Add theming

backend/app.py

@@ -73,7 +73,7 @@ def songlist():
 @nocache
 @basic_auth.required
 def settings():
-    return render_template('settings.html', app=app, auth=basic_auth.authenticate())
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
 
 
 @app.route("/settings", methods=['POST'])
@@ -82,6 +82,7 @@ def settings():
 def settings_post():
     entryquota = request.form.get("entryquota")
     maxqueue = request.form.get("maxqueue")
+    theme = request.form.get("theme")
     if entryquota.isnumeric() and int(entryquota) > 0:  # type: ignore
         app.config['ENTRY_QUOTA'] = int(entryquota)  # type: ignore
     else:
@@ -90,6 +91,10 @@ def settings_post():
         app.config['MAX_QUEUE'] = int(maxqueue)  # type: ignore
     else:
         abort(400)
+    if theme in helpers.get_themes():
+        app.config['THEME'] = theme
+    else:
+        abort(400)
 
     helpers.persist_config(app=app)
 

backend/helpers.py

@@ -87,7 +87,7 @@ def setup_config(app: Flask):
         config = database.get_config_list()
         print("Loaded existing config")
     else:
-        config = {'username': 'admin', 'password': 'changeme', 'entryquota': 3, 'maxqueue': 20, 'entries_allowed': 1}
+        config = {'username': 'admin', 'password': 'changeme', 'entryquota': 3, 'maxqueue': 20, 'entries_allowed': 1, 'theme': 'default'}
         for key, value in config.items():
             database.set_config(key, value)
         print("Created new config")
@@ -119,6 +119,20 @@ def persist_config(app: Flask):
     for key, value in config.items():
         database.set_config(key, value)
 
+# Get available themes from themes directory
+def get_themes():
+    themes = []
+    for theme in os.listdir('./static/css/themes'):
+        themes.append(theme)
+    return themes
+
+# Set theme
+def set_theme(app: Flask, theme: str):
+    if theme in get_themes():
+        app.config['THEME'] = theme
+        database.set_config('theme', theme)
+    else:
+        print("Theme not found, not setting theme.")
 
 
 def nocache(view):

backend/static/css/themes/stuk.css

@@ -0,0 +1,91 @@
+.navbar {
+    background: #090a28 !important;
+}
+
+.navbar .navbar-toggle:hover,
+.navbar .navbar-toggle:focus {
+    background-color: #900000 !important;
+}
+
+.navbar .navbar-toggle {
+    border: none;
+}
+
+.navbar .navbar-nav>.open>a,
+.navbar .navbar-nav>.open>a:hover,
+.navbar .navbar-nav>.open>a:focus {
+    color: #CF2323 !important;
+    background-color: #050515 !important;
+}
+
+.btn-primary {
+    background-color: #15175b;
+    border-color: #15175b;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: #0e103e;
+    background-position: 0 -15px;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+    background-color: #0e103e;
+    border-color: #0e103e;
+}
+
+.btn-primary.disabled,
+.btn-primary:disabled,
+.btn-primary[disabled] {
+    background-color: #0e103e;
+    background-image: none;
+}
+
+.dropdown-menu>li>a:hover,
+.dropdown-menu>li>a:focus {
+    color: #8A0711;
+}
+
+.dropdown-menu>.active>a,
+.dropdown-menu>.active>a:hover,
+.dropdown-menu>.active>a:focus {
+    background-color: #2e6da4;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+}
+
+.navbar .navbar-nav>li>a:hover {
+    color: #b60000;
+}
+
+.form-control:focus {
+    border-color: rgba(21, 23, 91, 0.8);
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    0 0 8px rgba(21, 23, 91, 0.6);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
+    0 0 8px rgba(21, 23, 91, 0.6);
+}
+
+a {
+    color: #900000;
+}
+
+a:hover,
+a:focus {
+    color: #670000;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand > img {
+    height: 4rem;
+}

backend/templates/base.html

@@ -28,6 +28,9 @@
     <!-- Bootstraptoggle -->
     <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 
+    <!-- Active Theme -->
+    <link href="static/css/themes/{{config['THEME']}}" rel="stylesheet">
+
 </head>
 
 <body>

backend/templates/settings.html

@@ -10,8 +10,20 @@
         <label for="maxqueue">Maximale Anzahl an Einträgen Insgesamt</label>
         <input type="number" class="form-control" id="maxqueue" name="maxqueue" min=1 value={{app.config['MAX_QUEUE']}}>
     </p>
+    <p>
+        <label for="theme">Aktives Theme</label>
+        <select class="form-control" id="theme" name="theme">
+            {% for theme in themes %}
+            <option value="{{theme}}" {% if theme == config['THEME'] %}selected{% endif %}>{{theme}}</option>
+            {% endfor %}
+        </select>
+    </p>
     <input type="submit" class="btn btn-primary mr-1 mb-2" value="Einstellungen anwenden">
 </form>
+<details>
+    <summary>Current config:</summary>
+    <pre>{% for key, val in config.items() %}{{key}}: {{val}}<br>{% endfor %}</pre>
+</details>
 {% endblock %}
 {% block extrajs %}
 {% endblock %}