Created dark and light themes and theme selector

artel/artel/settings/base.py

@@ -61,6 +61,7 @@ INSTALLED_APPS = [
 SHOP_ENABLED = False
 LOGO = 'nologo'
 NAVBAR_POSITION = 'left'
+SKIN = 'none'
 
 if os.path.exists('config.json'):
     with open(os.path.join(BASE_DIR, 'config.json'), 'r') as file:
@@ -71,6 +72,7 @@ if os.path.exists('config.json'):
         SHOP_ENABLED = True
     LOGO = config_data.get('logo', False)
     NAVBAR_POSITION = config_data.get('navbar_position', False)
+    SKIN = config_data.get('skin', False)
 
 
 MIDDLEWARE = [

artel/artel/static/css/dark.css

@@ -0,0 +1,16 @@
+body {
+    background-color: var(--background_color, #222222);
+    color: var(--font_color, #AAAAAA);
+  }
+
+hr {
+	background-color: #d8d8d8;
+}
+
+a[href] {
+	color: #1e8ad6;
+}
+
+a[href]:hover {
+	color: #3ba0e6;
+}

artel/artel/static/css/dynamic_colors.css

@@ -1,10 +0,0 @@
-body {
-    background-color: #000000;
-    color: #ffee00;
-}
-.button {
-    background-color: #ffd6d6;
-}
-a {
-    color: #804242;
-}

artel/artel/static/css/light.css

@@ -0,0 +1,16 @@
+body {
+    background-color: var(--background_color, #DDDDDD);
+    color: var(--font_color, #555555);
+  }
+
+  hr {
+    background-color: #282828;
+  }
+
+  a[href] {
+    color: var(--link_color, #007bff);
+  }
+
+  a[href]:hover {
+    color: #0056b3;
+  }

artel/artel/templates/base.html

@@ -27,7 +27,16 @@
         {# Global stylesheets #}
         <link rel="stylesheet" type="text/css" href="{% static 'css/artel.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
-        <link rel="stylesheet" href="{% static 'css/dynamic_colors.css' %}">
+
+        {% if skin == 'light' %}
+        <link rel="stylesheet" href="{% static 'css/light.css' %}">
+        {% endif %}
+        {% if skin == 'dark' %}
+        <link rel="stylesheet" href="{% static 'css/dark.css' %}">
+        {% endif %}
+        {% if skin == 'custom' %}
+        <link rel="stylesheet" href="{% static 'css/custom.css' %}">
+        {% endif %}
 
         {% block extra_css %}
         {# Override this in templates to add extra stylesheets #}

artel/artel/templates/menu/custom_main_menu.html

@@ -25,4 +25,5 @@
     {% if store_enabled %}
     <a href={% url 'cart' %} alt="Koszyk" > Koszyk </a>
     {% endif %}
+    <a href="/" alt="TEST"> TEST </a>
 </div>

artel/setup/context_processors.py

@@ -5,8 +5,10 @@ def SetupContextProcessor(request):
     navbar_position = settings.NAVBAR_POSITION
     logo = settings.LOGO
     shop_enabled = settings.SHOP_ENABLED
+    skin = settings.SKIN
     return {
             'navbar_position': navbar_position,
             'logo_url': logo,
             'shop_enabled': shop_enabled,
+            'skin': skin,
         }

artel/setup/forms.py

@@ -16,6 +16,14 @@ class SiteConfigurationForm(forms.Form):
         initial='left',
         widget=forms.RadioSelect
     )
+    skin = forms.ChoiceField(
+        choices=[
+            ('light', 'Light'),
+            ('dark', 'Dark'),
+            ('custom', 'Custom'),
+        ],
+        widget=forms.Select
+    )
 
     def save_logo(self):
         if self.cleaned_data['logo']:

artel/setup/templates/setup.html

@@ -34,7 +34,10 @@
             <label for="{{ form.navbar_position.id_for_label }}">Navbar Position</label>
             {{ form.navbar_position }}
           </div>
-
+          <div class="form-group mb-4">
+            <label for="{{ form.skin.id_for_label }}">Skin</label>
+            {{ form.skin }}
+          </div>
           <button type="submit" class="btn btn-primary">Save</button>
         </form>
       </div>

artel/setup/views.py

@@ -27,8 +27,9 @@ class SetupPageView(View):
 
             with open('config.json', 'w') as file:
                 file.write(json_data)
-
-            return redirect('/skins')
+            if form_data['skin'] == 'custom':
+                return redirect('/skins')
+            return redirect('/')
         else:
             return render(request, self.template_name, {'form': form})
 
@@ -45,7 +46,7 @@ class SkinChangerView(View):
         if form.is_valid():
             form_data = form.data
             css_content = generate_css_content(form_data)
-            file_name = 'dynamic_colors.css'
+            file_name = 'custom.css'
             css_file_path = os.path.join(settings.MEDIA_ROOT, 'css', file_name)
             with open(css_file_path, 'w') as css_file:
                 css_file.write(css_content)
@@ -60,7 +61,7 @@ def generate_css_content(form_data):
             background-color: {form_data['background_color']};
             color: {form_data['font_color']};
         }}
-        .button {{
+        .btn {{
             background-color: {form_data['button_color']};
         }}
         a {{