color management via css

.gitignore

@@ -15,3 +15,4 @@
 /.env
 /app_config.json
 /custom_logo
+/static/theme.css

app.py

@@ -430,17 +430,9 @@ def handle_request_initial_data():
 def index(path):
     title_short = app_config.get('TITLE_SHORT', 'Default Title')
     title_long  = app_config.get('TITLE_LONG' , 'Default Title')
-    header_color  = app_config.get('header_color' , '#000')
-    header_text_color = app_config.get('header_text_color', '#fff')
-    background_color = app_config.get('background_color', '#fff')
-    main_text_color = app_config.get('main_text_color', '#000')
     return render_template("app.html",
                             title_short=title_short,
-                            title_long=title_long,
+                            title_long=title_long
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
                            )
 
 if __name__ == '__main__':

search.py

@@ -95,16 +95,8 @@ def searchcommand():
 def search():
     title_short = app_config.get('TITLE_SHORT', 'Default Title')
     title_long  = app_config.get('TITLE_LONG' , 'Default Title')
-    header_color  = app_config.get('header_color' , '#000')
-    header_text_color = app_config.get('header_text_color', '#fff')
-    background_color = app_config.get('background_color', '#fff')
-    main_text_color = app_config.get('main_text_color', '#000')
     return render_template("search.html",
                             title_short=title_short,
-                            title_long=title_long,
+                            title_long=title_long
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
                            )
 

static/app.css

@@ -1,5 +1,7 @@
 /* Ensure html and body take full height */
 html, body {
+  background-color: var(--light-background);
+  color: var(--main-text-color);
   height: 100%;
   margin: 0;
 }
@@ -11,6 +13,8 @@ body {
 }
   /* Header styles */
   .site-header {
+    background-color: var(--dark-background);
+    color: var(--header-text-color);
     position: fixed;
     top: 0;
     width: 94%;
@@ -53,11 +57,11 @@ body {
 }
 .breadcrumb a {
   text-decoration: none;
-  color: #34495e;
+  color: var(--main-text-color);
   margin-right: 5px;
 }
 .breadcrumb span {
-  color: #c2c2c2;
+  color: #ccc;
   margin-right: 5px;
 }
 
@@ -120,13 +124,13 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
 .directory-link,
 .link-link,
 a.play-file {
-  color: #34495e;
+  color: var(--player-text-color);
   text-decoration: none;
   word-break: break-all;
 }
 a.show-transcript {
   text-decoration: none;
-  color: #34495e;
+  color: var(--main-text-color);
   font-size: 20px;
   margin-left: 10px;
 }
@@ -135,7 +139,7 @@ a.show-transcript:hover {
 }
 
 .currently-playing {
-  background-color: #bfd0df; /* Adjust to your preferred color */
+  background-color: var(--selected-background);
 }
 
 /* Footer Player Styles */
@@ -144,7 +148,7 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   color: #fff;
   padding: 7px;
   text-align: center;

static/app.js

@@ -469,3 +469,18 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
 //   // Automatically reload every 5 minutes (300,000 milliseconds)
 //   setInterval(reloadDirectory, 300000);
 // });
+
+
+function syncThemeColor() {
+  // read the CSS variable from :root (or any selector)
+  const cssVar = getComputedStyle(document.documentElement)
+                     .getPropertyValue('--dark-background').trim();
+  if (cssVar) {
+    document
+      .querySelector('meta[name="theme-color"]')
+      .setAttribute('content', cssVar);
+  }
+}
+
+// sync once on load
+document.addEventListener('DOMContentLoaded', syncThemeColor);

static/audioplayer.css

@@ -11,7 +11,7 @@
 .now-playing-info {
   margin-top: 5px;
   font-size: 16px;
-  color: #23313f;
+  color: var(--main-text-color);
   text-align: center;
 }
 
@@ -40,10 +40,10 @@
   -webkit-appearance: none;
   width: 100%;
   height: 0.5em;
-  background-color: #ccc; /* light gray background */
+  background-color: #ccc;
   border-radius: 5px;
   background-size: 0% 100%;
-  background-image: linear-gradient(#34495e, #34495e); /* progress bar */
+  background-image: linear-gradient(var(--dark-background), var(--dark-background));
   background-repeat: no-repeat;
   appearance: none;
   outline: none;
@@ -56,7 +56,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;
@@ -67,7 +67,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;
@@ -78,7 +78,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;

templates/app.html

@@ -18,7 +18,7 @@
   <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
   
   <!-- Android Theme Color -->
-  <meta name="theme-color" content="{{ header_color }}">
+  <meta name="theme-color" content="#000">
   
   <!-- Apple-specific tags -->
   <link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
@@ -27,20 +27,11 @@
   <meta name="mobile-web-app-title" content="Gottesdienste">
 
   <!-- Your CSS -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='gallery.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='audioplayer.css') }}">
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <style>
-    body {
-        background-color: {{ background_color }};
-        color: {{ main_text_color }};
-    }
-    .site-header {
-        background-color: {{ header_color }};
-        color: {{ header_text_color }};
-    }
-  </style>
 </head>
 <body>
   <header class="site-header">

templates/index.html

@@ -9,22 +9,13 @@
 
     <title>{{ title_long }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-      body {
-          background-color: {{ background_color }};
-          color: {{ main_text_color }};
-      }
-      .site-header {
-          background-color: {{ header_color }};
-          color: {{ header_text_color }};
-      }
-  </style>
 </head>
 <body>
   <header class="site-header">
-      <img src="/icon/logo-300x300.png" alt="Logo" class="logo">
+    <img src="/custom_logo/logoW.png" alt="Logo" class="logo">
     <h1>{{ title_long }}</h1>
   </header>
   

templates/search.html

@@ -18,7 +18,7 @@
   <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
   
   <!-- Android Theme Color -->
-  <meta name="theme-color" content="{{ header_color }}">
+  <meta name="theme-color" content="#000">
   
   <!-- Apple-specific tags -->
   <link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
@@ -30,22 +30,20 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
   <!-- Your CSS -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
 
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
-    body {
-        background-color: {{ background_color }};
-        color: {{ main_text_color }};
-    }
     .site-header {
-        background-color: {{ header_color }};
-        color: {{ header_text_color }};
         width: 100%;
     }
     .card {
         margin-bottom: 20px;
     }
+    .btn {
+        margin-bottom: 10px;
+    }
   </style>
 </head>
 <body>
@@ -98,11 +96,13 @@
             <input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
             <label class="form-check-label" for="includeTranscript">Im Transkript suchen</label>
         </div>
+        <div class="mb-3">
             <button type="submit" class="btn btn-primary">Suchen</button>
             <!-- Clear Button -->
             <button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</button>
             <!-- Back Button -->
             <button type="button" id="backBtn" class="btn btn-secondary ms-2">zurück</button>
+        </div>
     </form>
     <!-- Container for AJAX-loaded results -->
     <div id="results"></div>
@@ -249,6 +249,21 @@ document.addEventListener('DOMContentLoaded', function() {
         window.location.href = '/';
     });
 });
+
+function syncThemeColor() {
+    // read the CSS variable from :root (or any selector)
+    const cssVar = getComputedStyle(document.documentElement)
+                       .getPropertyValue('--dark-background').trim();
+    if (cssVar) {
+      document
+        .querySelector('meta[name="theme-color"]')
+        .setAttribute('content', cssVar);
+    }
+  }
+  
+  // sync once on load
+  document.addEventListener('DOMContentLoaded', syncThemeColor);
+
 </script>
 
 <!-- Bootstrap Bundle with Popper -->