Dark/Light Theme feature added

caronc · Sep 2, 2023 · 9906f22 · 9906f22
1 parent e6700d1
commit 9906f22
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -285,6 +285,7 @@ The use of environment variables allow you to provide over-rides to default sett
 
 | Variable             | Description |
 |--------------------- | ----------- |
+| `APPRISE_DEFAULT_THEME` | Can be set to `light` or `dark`; it defaults to `light` if not otherwise provided.  The theme can be toggled from within the website as well.
 | `APPRISE_CONFIG_DIR` | Defines an (optional) persistent store location of all configuration files saved. By default:<br/> - Configuration is written to the `apprise_api/var/config` directory when just using the _Django_ `manage runserver` script. However for the path for the container is `/config`.
 | `APPRISE_ATTACH_DIR` | The directory the uploaded attachments are placed in. By default:<br/> - Attachments are written to the `apprise_api/var/attach` directory when just using the _Django_ `manage runserver` script. However for the path for the container is `/attach`.
 | `APPRISE_ATTACH_SIZE` | Over-ride the attachment size (defined in MB). By default it is set to `200` (Megabytes). You can set this up to a maximum value of `500` which is the restriction in place for NginX (internal hosting ervice) at this time.  If you set this to zero (`0`) then attachments will not be passed along even if provided.

diff --git a/apprise_api/api/templates/base.html b/apprise_api/api/templates/base.html
@@ -7,14 +7,14 @@
   <meta charset="utf-8">
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!--highlightjs-->
-  <link rel="stylesheet" href="{% static 'css/highlight.min.css' %}">
   <!--materialize-->
-  <link rel="stylesheet" href="{% static 'css/materialize.min.css' %}" />
+  <link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/materialize.min.css" />
   <!--material-design-icons-->
   <link rel="stylesheet" href="{% static 'iconfont/material-icons.css' %}">
   <!--common-->
   <link rel="stylesheet" href="{% static 'css/base.css' %}" />
+  <!--highlightjs-->
+  <link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/highlight.min.css">
   <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
   <!--materialize-->
   <script src="{% static 'js/materialize.min.js' %}"></script>
@@ -28,13 +28,16 @@
 <body>
   <div class="content">
     <!-- Title -->
-    <div class="nav row teal lighten-5 z-depth-2">
+    <div class="nav row nav-color z-depth-2">
       <div class="col s12">
         <a href="{% url 'welcome' %}">
           <img class="left" src="{% static "logo.png" %}" alt="{% trans "Apprise Logo" %}" />
         </a>
         <h1>{% trans "Apprise API" %}</h1>
-        <i>APPRISE v{{APPRISE_VERSION}}</i>
+        <ul>
+				   <li>APPRISE v{{APPRISE_VERSION}}</li>
+				   <li class="theme"><a href="{{ request.path }}?theme={{request.next_theme}}"><span class="tiny material-icons">invert_colors</span></a></li>
+				</ul>
       </div>
     </div>
     <!-- Page Layout here -->

diff --git a/apprise_api/core/middleware/__init__.py b/apprise_api/core/middleware/__init__.py
diff --git a/apprise_api/core/middleware/theme.py b/apprise_api/core/middleware/theme.py
@@ -0,0 +1,84 @@
+# -*- coding: utf-8 -*-
+#
+# Copyright (C) 2023 Chris Caron <[email protected]>
+# All rights reserved.
+#
+# This code is licensed under the MIT License.
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files(the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions :
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+#
+from django.conf import settings
+from core.themes import SiteTheme, SITE_THEMES
+import datetime
+
+
+class AutoThemeMiddleware:
+    """
+    Using the `theme=` variable, allow one to fix the language to either
+    'dark' or 'light'
+
+    """
+
+    def __init__(self, get_response):
+        """
+        Prepare our initialization
+        """
+        self.get_response = get_response
+
+    def __call__(self, request):
+        """
+        Define our middleware hook
+        """
+
+        # Our current theme
+        current_theme = \
+            request.COOKIES.get('t', request.COOKIES.get(
+                'theme', settings.APPRISE_DEFAULT_THEME))
+
+        # Extract our theme (fall back to our default if not set)
+        theme = request.GET.get("theme", current_theme).strip().lower()
+        theme = next((entry for entry in SITE_THEMES
+                     if entry.startswith(theme)), None) \
+            if theme else None
+
+        if theme not in SITE_THEMES:
+            # Fallback to default theme
+            theme = SiteTheme.LIGHT
+
+        # Set our theme to a cookie
+        request.theme = theme
+
+        # Set our next theme
+        request.next_theme = SiteTheme.LIGHT \
+            if theme == SiteTheme.DARK \
+            else SiteTheme.DARK
+
+        # Get our response object
+        response = self.get_response(request)
+
+        # Set our cookie
+        max_age = 365 * 24 * 60 * 60  # 1 year
+        expires = datetime.datetime.utcnow() + \
+            datetime.timedelta(seconds=max_age)
+
+        # Set our cookie
+        response.set_cookie('theme', theme, expires=expires.utctimetuple())
+
+        # return our response
+        return response
diff --git a/apprise_api/core/settings/__init__.py b/apprise_api/core/settings/__init__.py
@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 #
-# Copyright (C) 2019 Chris Caron <[email protected]>
+# Copyright (C) 2023 Chris Caron <[email protected]>
 # All rights reserved.
 #
 # This code is licensed under the MIT License.
@@ -23,6 +23,7 @@
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
 import os
+from core.themes import SiteTheme
 
 # Disable Timezones
 USE_TZ = False
@@ -64,6 +65,7 @@
 
 MIDDLEWARE = [
     'django.middleware.common.CommonMiddleware',
+    'core.middleware.theme.AutoThemeMiddleware',
 ]
 
 ROOT_URLCONF = 'core.urls'
@@ -111,6 +113,7 @@
     }
 }
 
+
 WSGI_APPLICATION = 'core.wsgi.application'
 
 # Define our base URL
@@ -120,6 +123,10 @@
 # Static files relative path (CSS, JavaScript, Images)
 STATIC_URL = BASE_URL + '/s/'
 
+# Default theme can be either 'light' or 'dark'
+APPRISE_DEFAULT_THEME = \
+    os.environ.get('APPRISE_DEFAULT_THEME', SiteTheme.LIGHT)
+
 # The location to store Apprise configuration files
 APPRISE_CONFIG_DIR = os.environ.get(
     'APPRISE_CONFIG_DIR', os.path.join(BASE_DIR, 'var', 'config'))

diff --git a/apprise_api/core/themes.py b/apprise_api/core/themes.py
@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+#
+# Copyright (C) 2019 Chris Caron <[email protected]>
+# All rights reserved.
+#
+# This code is licensed under the MIT License.
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files(the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions :
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+
+
+class SiteTheme:
+    """
+    Defines our site themes
+    """
+    LIGHT = 'light'
+    DARK = 'dark'
+
+
+SITE_THEMES = (
+    SiteTheme.LIGHT,
+    SiteTheme.DARK,
+)
diff --git a/apprise_api/static/css/base.css b/apprise_api/static/css/base.css
@@ -7,11 +7,16 @@
 }
 
 /* Apprise Version */
-.nav i {
+.nav ul {
   float: right;
 	font-style: normal;
   font-size: 0.7rem;
 }
+.theme {
+	 text-align: right;
+	 display: block;
+	 float:right;
+}
 
 input {
   display: block;

diff --git a/apprise_api/static/css/dark/highlight.min.css b/apprise_api/static/css/dark/highlight.min.css
diff --git a/apprise_api/static/css/dark/materialize.min.css b/apprise_api/static/css/dark/materialize.min.css
diff --git a/apprise_api/static/css/highlight.min.css b/apprise_api/static/css/highlight.min.css
diff --git a/apprise_api/static/css/light/highlight.min.css b/apprise_api/static/css/light/highlight.min.css
diff --git a/apprise_api/static/css/materialize.min.css → ..._api/static/css/light/materialize.min.css b/apprise_api/static/css/materialize.min.css → ..._api/static/css/light/materialize.min.css