From 0231ebfeef5b9569da82d1fbe072cb99aebea769 Mon Sep 17 00:00:00 2001 From: Robert Smits Date: Sun, 1 Oct 2023 13:16:00 +0200 Subject: [PATCH 1/2] Use Bootstrap 5 dark theme support --- ui/src/app/app.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index a71d76e..e087ef8 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -128,9 +128,8 @@ export class AppComponent implements AfterViewInit { } setTheme() { - const doc = document.querySelector('html') - const filter = this.darkMode ? "invert(1) hue-rotate(180deg)" : "" - doc.style.filter = filter + const theme = this.darkMode ? 'dark' : 'light'; + document.documentElement.setAttribute('data-bs-theme', theme); } formatChanged() { From c64dda8ca7c80fa8fb2abdeb538c0634d9b3adac Mon Sep 17 00:00:00 2001 From: Robert Smits Date: Sun, 1 Oct 2023 15:25:11 +0200 Subject: [PATCH 2/2] Fix theme handling and auto theme This commit fixes the client side theme selection being overwritten by the backend and adds a selectable auto theming option. --- README.md | 2 +- app/main.py | 7 ++--- ui/angular.json | 2 +- ui/src/app/app.component.html | 34 +++++++++++++++++++----- ui/src/app/app.component.sass | 8 +++--- ui/src/app/app.component.ts | 50 ++++++++++++++++++++++------------- ui/src/app/theme.ts | 26 ++++++++++++++++++ ui/src/styles.sass | 8 +++++- 8 files changed, 101 insertions(+), 36 deletions(-) create mode 100644 ui/src/app/theme.ts diff --git a/README.md b/README.md index b089a46..a0477be 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Certain values can be set via environment variables, using the `-e` parameter on * __UID__: user under which MeTube will run. Defaults to `1000`. * __GID__: group under which MeTube will run. Defaults to `1000`. * __UMASK__: umask value used by MeTube. Defaults to `022`. -* __DARK_MODE__: if set to `true`, the UI will be in dark mode. Defaults to `false`. +* __DEFAULT_THEME__: default theme to use for the ui, can be set to `light`, `dark` or `auto`. Defaults to `auto`. * __DOWNLOAD_DIR__: path to where the downloads will be saved. Defaults to `/downloads` in the docker image, and `.` otherwise. * __AUDIO_DOWNLOAD_DIR__: path to where audio-only downloads will be saved, if you wish to separate them from the video downloads. Defaults to the value of `DOWNLOAD_DIR`. * __DOWNLOAD_DIRS_INDEXABLE__: if `true`, the download dirs (__DOWNLOAD_DIR__ and __AUDIO_DOWNLOAD_DIR__) are indexable on the webserver. Defaults to `false`. diff --git a/app/main.py b/app/main.py index 88b3d5b..51caccb 100644 --- a/app/main.py +++ b/app/main.py @@ -31,10 +31,10 @@ class Config: 'HOST': '0.0.0.0', 'PORT': '8081', 'BASE_DIR': '', - 'DARK_MODE': 'false' + 'DEFAULT_THEME': 'auto' } - _BOOLEAN = ('DOWNLOAD_DIRS_INDEXABLE', 'CUSTOM_DIRS', 'CREATE_CUSTOM_DIRS', 'DELETE_FILE_ON_TRASHCAN', 'DARK_MODE') + _BOOLEAN = ('DOWNLOAD_DIRS_INDEXABLE', 'CUSTOM_DIRS', 'CREATE_CUSTOM_DIRS', 'DELETE_FILE_ON_TRASHCAN') def __init__(self): for k, v in self._DEFAULTS.items(): @@ -173,7 +173,8 @@ def get_custom_dirs(): @routes.get(config.URL_PREFIX) def index(request): response = web.FileResponse(os.path.join(config.BASE_DIR, 'ui/dist/metube/index.html')) - response.set_cookie('metube_dark', 'true' if config.DARK_MODE else 'false') + if 'metube_theme' not in request.cookies: + response.set_cookie('metube_theme', config.DEFAULT_THEME) return response if config.URL_PREFIX != '/': diff --git a/ui/angular.json b/ui/angular.json index 3574c80..65b1d1e 100644 --- a/ui/angular.json +++ b/ui/angular.json @@ -31,7 +31,7 @@ "src/styles.sass" ], "scripts": [ - "node_modules/bootstrap/dist/js/bootstrap.min.js", + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", ] }, "configurations": { diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index 31716b4..a339eb7 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -1,4 +1,4 @@ -