From 70a5b8723cf71a5b51c08ceb2b261e6f68a7cf33 Mon Sep 17 00:00:00 2001 From: KarolG Date: Wed, 5 Jul 2023 03:58:25 +0200 Subject: [PATCH] Created dark and light themes and theme selector --- artel/artel/settings/base.py | 2 ++ artel/artel/static/css/dark.css | 16 ++++++++++++++++ artel/artel/static/css/dynamic_colors.css | 10 ---------- artel/artel/static/css/light.css | 16 ++++++++++++++++ artel/artel/templates/base.html | 11 ++++++++++- artel/artel/templates/menu/custom_main_menu.html | 1 + artel/setup/context_processors.py | 2 ++ artel/setup/forms.py | 8 ++++++++ artel/setup/templates/setup.html | 5 ++++- artel/setup/views.py | 9 +++++---- 10 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 artel/artel/static/css/dark.css delete mode 100644 artel/artel/static/css/dynamic_colors.css create mode 100644 artel/artel/static/css/light.css diff --git a/artel/artel/settings/base.py b/artel/artel/settings/base.py index 57e2ea7..bf9e12a 100644 --- a/artel/artel/settings/base.py +++ b/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 = [ diff --git a/artel/artel/static/css/dark.css b/artel/artel/static/css/dark.css new file mode 100644 index 0000000..ce10ce0 --- /dev/null +++ b/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; +} diff --git a/artel/artel/static/css/dynamic_colors.css b/artel/artel/static/css/dynamic_colors.css deleted file mode 100644 index fc1b228..0000000 --- a/artel/artel/static/css/dynamic_colors.css +++ /dev/null @@ -1,10 +0,0 @@ -body { - background-color: #000000; - color: #ffee00; -} -.button { - background-color: #ffd6d6; -} -a { - color: #804242; -} diff --git a/artel/artel/static/css/light.css b/artel/artel/static/css/light.css new file mode 100644 index 0000000..81ad1d8 --- /dev/null +++ b/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; + } diff --git a/artel/artel/templates/base.html b/artel/artel/templates/base.html index b96880b..c29bdd2 100644 --- a/artel/artel/templates/base.html +++ b/artel/artel/templates/base.html @@ -27,7 +27,16 @@ {# Global stylesheets #} - + + {% if skin == 'light' %} + + {% endif %} + {% if skin == 'dark' %} + + {% endif %} + {% if skin == 'custom' %} + + {% endif %} {% block extra_css %} {# Override this in templates to add extra stylesheets #} diff --git a/artel/artel/templates/menu/custom_main_menu.html b/artel/artel/templates/menu/custom_main_menu.html index 1a01b8f..9dcc3c4 100644 --- a/artel/artel/templates/menu/custom_main_menu.html +++ b/artel/artel/templates/menu/custom_main_menu.html @@ -25,4 +25,5 @@ {% if store_enabled %} Koszyk {% endif %} + TEST diff --git a/artel/setup/context_processors.py b/artel/setup/context_processors.py index 9fd2018..ec8b57f 100644 --- a/artel/setup/context_processors.py +++ b/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, } diff --git a/artel/setup/forms.py b/artel/setup/forms.py index c4640d1..57d5f24 100644 --- a/artel/setup/forms.py +++ b/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']: diff --git a/artel/setup/templates/setup.html b/artel/setup/templates/setup.html index 6f643de..389f2cd 100644 --- a/artel/setup/templates/setup.html +++ b/artel/setup/templates/setup.html @@ -34,7 +34,10 @@ {{ form.navbar_position }} - +
+ + {{ form.skin }} +
diff --git a/artel/setup/views.py b/artel/setup/views.py index 4e2aadc..5095405 100644 --- a/artel/setup/views.py +++ b/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 {{