Merge pull request #31 from stephanediondev/theme

Use variables to define theme (Bootstrap)

Author: stephanediondev

.env.dist

@@ -33,4 +33,7 @@ SECRET_REGISTER=
 VAPID_PUBLIC_KEY=
 VAPID_PRIVATE_KEY=
 SENDER_ADDRESS=
+#THEME_COLOR_1='light'
+#THEME_COLOR_2='dark'
+#THEME_COLOR_3='primary'
 ###< app ###

assets/js/app.js

@@ -96,7 +96,7 @@ if('serviceWorker' in navigator && 'https:' == window.location.protocol) {
 }
 
 $(document).ready(function () {
-    $('label.required').append(' <small class="badge bg-light text-dark ml-1">' + trans_required + '</small>');
+    $('label.required').append(' <small class="badge bg-' + themeColor2 + ' text-' + themeColor1 + ' ml-1">' + trans_required + '</small>');
 
     $(document).on('click', '.dashboard-table-expand', function(event) {
         event.preventDefault();

config/packages/twig.yaml

@@ -1,3 +1,7 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
     form_themes: ['bootstrap_5_layout.html.twig']
+    globals:
+        themeColor1: '%env(THEME_COLOR_1)%'
+        themeColor2: '%env(THEME_COLOR_2)%'
+        themeColor3: '%env(THEME_COLOR_3)%'

config/services.yaml

@@ -4,6 +4,9 @@
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
 parameters:
+    env(THEME_COLOR_1): 'dark'
+    env(THEME_COLOR_2): 'light'
+    env(THEME_COLOR_3): 'info'
 
 services:
     # default configuration for services in *this* file

templates/Embed/card_embed.html.twig

@@ -1,4 +1,4 @@
-<div class="shadow p-3 mb-4 bg-dark rounded">
+<div class="shadow p-3 mb-4 bg-{{ themeColor1 }} rounded">
     {% block content %}
     {% endblock %}
 </div>

templates/Embed/shard_reroute_cluster_embed.html.twig

@@ -6,7 +6,7 @@
 
 <div class="modal fade" id="modal{{ modalReference }}" tabindex="-1" role="dialog" aria-labelledby="modalLabel{{ modalReference }}" aria-hidden="true">
     <div class="modal-dialog" role="document">
-        <div class="modal-content bg-dark">
+        <div class="modal-content bg-{{ themeColor1 }}">
             <form action="{{ form_action }}">
                 <div class="modal-header">
                     <h5 class="modal-title" id="modalLabel{{ modalReference }}">{{ title }}</h5>

templates/Embed/stats_table_embed.html.twig

@@ -1,18 +1,18 @@
 {% set limit = 15 %}
 
 <div class="col">
-    <div class="card bg-dark border border-secondary mb-4">
+    <div class="card bg-{{ themeColor1 }} border border-secondary mb-4">
         <div class="card-body card-dashboard" id="{{ key }}">
             <h4 class="card-title text-center">{% block title %}{% endblock %}</h4>
 
-            <table class="table table-dark table-hover table-sm">
+            <table class="table table-{{ themeColor1 }} table-hover table-sm">
                 {% block content %}
                 {% endblock %}
             </table>
 
             {% block all %}
                 {% if limit < results|length %}
-                    <a href="#{{ key }}" class="btn btn-light btn-sm text-center d-block dashboard-table-expand">{{ 'all'|trans }} ({{ results|length }})</a>
+                    <a href="#{{ key }}" class="btn btn-{{ themeColor2 }} btn-sm text-center d-block dashboard-table-expand">{{ 'all'|trans }} ({{ results|length }})</a>
                 {% endif %}
             {% endblock %}
         </div>

templates/Embed/table_embed.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="{% block table_class %}table table-dark table-hover table-sm{% endblock %}">
+    <table class="{% block table_class %}table table-{{ themeColor1 }} table-hover table-sm{% endblock %}">
 
     <thead>
     {% block thead %}

templates/Import/app_import.html.twig

@@ -4,7 +4,7 @@
         <input
             id="searchInput"
             name="{{ app.request.attributes.get('_route') }}-searchInput"
-            class="form-control bg-dark text-light form-control-sm"
+            class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }} form-control-sm"
             type="text"
             autocomplete="off"
         >
@@ -83,7 +83,7 @@
 
 {% macro link(params) %}
     {% if params.class is not defined %}
-        {% set params = params|merge({'class': 'text-light'}) %}
+        {% set params = params|merge({'class': 'text-' ~ themeColor2}) %}
     {% endif %}
 
     <a class="{{ params.class }}" href="{{ params.url }}">{{ params.title }}</a>
@@ -92,7 +92,7 @@
 {% macro sort(params) %}
     {% if true == params.cat_sort %}
         {% if params.class is not defined %}
-            {% set params = params|merge({'class': 'text-light'}) %}
+            {% set params = params|merge({'class': 'text-' ~ themeColor2}) %}
         {% endif %}
 
         {% if '?' in params.url %}
@@ -176,7 +176,7 @@
     </button>
     <div class="modal fade" id="modal{{ params.id }}" tabindex="-1" role="dialog" aria-labelledby="modalLabel{{ params.id }}" aria-hidden="true">
         <div class="modal-dialog" role="document">
-            <div class="modal-content bg-dark">
+            <div class="modal-content bg-{{ themeColor1 }}">
                 <div class="modal-header">
                     <h5 class="modal-title" id="modalLabel{{ params.id }}">{{ params.title }}{% if params.badge is defined %}{{ _self.badge(params.badge) }}{% endif %}</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ 'cancel'|trans }}"></button>
@@ -236,55 +236,55 @@
         <ul class="pagination">
             {% if params.previous %}
                 <li class="page-item">
-                    <a class="page-link bg-dark text-light" rel="prev" href="{{ path(params.route, parameters|merge({'page': params.previous})) }}">&laquo;&nbsp;{{ 'previous'|trans }}</a>
+                    <a class="page-link bg-{{ themeColor1 }} text-{{ themeColor2 }}" rel="prev" href="{{ path(params.route, parameters|merge({'page': params.previous})) }}">&laquo;&nbsp;{{ 'previous'|trans }}</a>
                 </li>
             {% else %}
                 <li class="page-item disabled">
-                    <span class="page-link bg-dark text-secondary">&laquo;&nbsp;{{ 'previous'|trans }}</span>
+                    <span class="page-link bg-{{ themeColor1 }} text-secondary">&laquo;&nbsp;{{ 'previous'|trans }}</span>
                 </li>
             {% endif %}
 
             {% if params.first %}
                 <li class="page-item">
-                    <a class="page-link bg-dark text-light" rel="next" href="{{ path(params.route, parameters|merge({'page': params.first})) }}">{{ params.first }}</a>
+                    <a class="page-link bg-{{ themeColor1 }} text-{{ themeColor2 }}" rel="next" href="{{ path(params.route, parameters|merge({'page': params.first})) }}">{{ params.first }}</a>
                 </li>
                 {% if params.first != params.start_page - 1 %}
                     <li class="page-item disabled">
-                        <span class="page-link bg-dark text-secondary">&hellip;</span>
+                        <span class="page-link bg-{{ themeColor1 }} text-secondary">&hellip;</span>
                     </li>
                 {% endif %}
             {% endif %}
 
             {% for page in params.pages_slice %}
                 {% if page != params.page %}
                     <li class="page-item">
-                        <a class="page-link bg-dark text-light" href="{{ path(params.route, parameters|merge({'page': page})) }}">{{ page }}</a>
+                        <a class="page-link bg-{{ themeColor1 }} text-{{ themeColor2 }}" href="{{ path(params.route, parameters|merge({'page': page})) }}">{{ page }}</a>
                     </li>
                 {% else %}
                     <li class="page-item active">
-                        <span class="page-link bg-light text-dark border border-light">{{ page }}</span>
+                        <span class="page-link bg-{{ themeColor2 }} text-{{ themeColor1 }} border border-{{ themeColor2 }}">{{ page }}</span>
                     </li>
                 {% endif %}
             {% endfor %}
 
             {% if params.last %}
                 {% if params.last != params.end_page + 1 %}
                     <li class="page-item disabled">
-                        <span class="page-link bg-dark text-secondary">&hellip;</span>
+                        <span class="page-link bg-{{ themeColor1 }} text-secondary">&hellip;</span>
                     </li>
                 {% endif %}
                 <li class="page-item">
-                    <a class="page-link bg-dark text-light" rel="next" href="{{ path(params.route, parameters|merge({'page': params.last})) }}">{{ params.last }}</a>
+                    <a class="page-link bg-{{ themeColor1 }} text-{{ themeColor2 }}" rel="next" href="{{ path(params.route, parameters|merge({'page': params.last})) }}">{{ params.last }}</a>
                 </li>
             {% endif %}
 
             {% if params.next %}
                 <li class="page-item">
-                    <a class="page-link bg-dark text-light" rel="next" href="{{ path(params.route, parameters|merge({'page': params.next})) }}">{{ 'next'|trans }}&nbsp;&raquo;</a>
+                    <a class="page-link bg-{{ themeColor1 }} text-{{ themeColor2 }}" rel="next" href="{{ path(params.route, parameters|merge({'page': params.next})) }}">{{ 'next'|trans }}&nbsp;&raquo;</a>
                 </li>
             {% else %}
                 <li class="page-item disabled">
-                    <span class="page-link bg-dark text-secondary">{{ 'next'|trans }}&nbsp;&raquo;</span>
+                    <span class="page-link bg-{{ themeColor1 }} text-secondary">{{ 'next'|trans }}&nbsp;&raquo;</span>
                 </li>
             {% endif %}
         </ul>

templates/Modules/app_index_database_import/app_index_database_import_index.html.twig

@@ -33,7 +33,7 @@
                     <form name="data" method="post" action="{{ path('index_database_import_connect', {'index': index.name}) }}" id="form-connect">
                         <div class="form-group mb-3">
                             <label class="required form-label" for="driver">{{ 'database.driver'|trans }}</label>
-                            <select id="driver" name="driver" required="required" class="form-control bg-dark text-light">
+                            <select id="driver" name="driver" required="required" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}">
                                 <option value="">-</option>
                                 {% for driver in drivers %}
                                     <option value="{{ driver }}">{{ driver }}</option>
@@ -43,29 +43,29 @@
 
                         <div class="form-group mb-3">
                             <label for="host" class="required form-label">{{ 'database.host'|trans }}</label>
-                            <input type="text" id="host" name="host" required="required" class="form-control bg-dark text-light">
+                            <input type="text" id="host" name="host" required="required" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}">
                         </div>
 
                         <div class="form-group mb-3">
                             <label for="user" class="required form-label">{{ 'database.user'|trans }}</label>
-                            <input type="text" id="user" name="user" required="required" autocomplete="nope" class="form-control bg-dark text-light">
+                            <input type="text" id="user" name="user" required="required" autocomplete="nope" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}">
                         </div>
 
                         <div class="form-group mb-3">
                             <label for="password" class="required form-label">{{ 'database.password'|trans }}</label>
-                            <input type="password" id="password" name="password" required="required" autocomplete="new-password" class="form-control bg-dark text-light">
+                            <input type="password" id="password" name="password" required="required" autocomplete="new-password" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}">
                         </div>
 
                         <div class="form-group mb-3">
                             <label for="dbname" class="required form-label">{{ 'database.dbname'|trans }}</label>
-                            <input type="text" id="dbname" name="dbname" required="required" class="form-control bg-dark text-light">
+                            <input type="text" id="dbname" name="dbname" required="required" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}">
                         </div>
                     </div>
 
                     <div class="col-12 col-md-5 col-lg-4">
                         <div class="form-group mb-3">
                             <label for="query" class="required form-label">{{ 'database.query'|trans }}</label>
-                            <textarea id="query" name="query" required="required" class="form-control bg-dark text-light"></textarea>
+                            <textarea id="query" name="query" required="required" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }}"></textarea>
                         </div>
 
                         <div class="form-group mb-3">
@@ -102,7 +102,7 @@
                                     <td>_id</td>
                                     <td>meta</td>
                                     <td>
-                                        <select id="_id" name="_id" class="form-control bg-dark text-light select-column" data-field="_id">
+                                        <select id="_id" name="_id" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }} select-column" data-field="_id">
                                         </select>
                                     </td>
                                 </tr>
@@ -111,7 +111,7 @@
                                         <td><label for="{{ field }}">{{ field }}</label></td>
                                         <td>{{ mapping['type'] }}</td>
                                         <td>
-                                            <select id="{{ field }}" name="{{ field|replace({'.': '_DOT_'}) }}" class="form-control bg-dark text-light select-column" data-field="{{ field }}">
+                                            <select id="{{ field }}" name="{{ field|replace({'.': '_DOT_'}) }}" class="form-control bg-{{ themeColor1 }} text-{{ themeColor2 }} select-column" data-field="{{ field }}">
                                             </select>
                                         </td>
                                     </tr>
@@ -153,14 +153,14 @@
                     <div class="row">
                         <div class="text-center mb-4 col-12 col-md-4 col-lg-3">
                             <h4>{{ 'documents'|trans }}</h4>
-                            <h3><span class="badge bg-info text-light"></span></h3>
+                            <h3><span class="badge bg-info text-{{ themeColor2 }}"></span></h3>
                         </div>
                     </div>
 
                     <div class="table-responsive d-none" id="errors">
                         <h4>{{ 'errors'|trans }}</h4>
 
-                        <table class="table table-dark table-hover table-sm">
+                        <table class="table table-{{ themeColor1 }} table-hover table-sm">
 
                         <thead>
                             <tr>