color management via css

2025-04-19 12:37:05 +02:00 · 2025-04-19 12:37:05 +02:00 · c72a707a2d
commit c72a707a2d
parent 0ec123aa7d
9 changed files with 68 additions and 67 deletions
--- a/.gitignore
+++ b/.gitignore
@ -15,3 +15,4 @@
 /.env
 /app_config.json
 /custom_logo
+/static/theme.css
--- a/app.py
+++ b/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,
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
+                            title_long=title_long
                           )

 if __name__ == '__main__':
--- a/search.py
+++ b/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,
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
+                            title_long=title_long
                           )

--- a/static/app.css
+++ b/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;
--- a/static/app.js
+++ b/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);
--- a/static/audioplayer.css
+++ b/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;
--- a/templates/app.html
+++ b/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">
--- a/templates/index.html
+++ b/templates/index.html
@ -9,23 +9,14 @@

    <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">
-      <h1>{{ title_long }}</h1>
+    <img src="/custom_logo/logoW.png" alt="Logo" class="logo">
+    <h1>{{ title_long }}</h1>
  </header>
  
  <div class="container">
--- a/templates/search.html
+++ b/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>
-        <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 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 -->