diff --git a/.gitignore b/.gitignore
index 2e9eddc..ee7ba93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@
/folder_mount_config.json
/.env
/app_config.json
-/custom_logo
\ No newline at end of file
+/custom_logo
+/static/theme.css
\ No newline at end of file
diff --git a/app.py b/app.py
index d44ffc2..689c0fc 100755
--- 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__':
diff --git a/search.py b/search.py
index d934bf0..913b07b 100644
--- 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
)
diff --git a/static/app.css b/static/app.css
index b946d9b..5d05515 100644
--- 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;
diff --git a/static/app.js b/static/app.js
index def6a5e..82a4847 100644
--- a/static/app.js
+++ b/static/app.js
@@ -468,4 +468,19 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
// document.addEventListener("DOMContentLoaded", function() {
// // Automatically reload every 5 minutes (300,000 milliseconds)
// setInterval(reloadDirectory, 300000);
-// });
\ No newline at end of file
+// });
+
+
+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);
\ No newline at end of file
diff --git a/static/audioplayer.css b/static/audioplayer.css
index 739f2e1..d11594c 100644
--- 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;
diff --git a/templates/app.html b/templates/app.html
index 1a65dd3..dec95fe 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -18,7 +18,7 @@
-
+
@@ -27,20 +27,11 @@
+
-
- 
+