[Android] Allow switch the remote access between light and dark themes
Nicolas Pomepuy
git at videolan.org
Wed Feb 28 10:33:46 UTC 2024
vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Thu Feb 8 13:47:57 2024 +0100| [7e6397ae1fd61c361e3235111e5976563badbd7b] | committer: Nicolas Pomepuy
Allow switch the remote access between light and dark themes
> https://code.videolan.org/videolan/vlc-android/commit/7e6397ae1fd61c361e3235111e5976563badbd7b
---
.../videolan/vlc/webserver/TranslationMapping.kt | 1 +
.../public/icons/checked.svg | 25 ++++++++++++++++++++++
buildsystem/network-sharing-server/src/App.vue | 19 +++++++++++++++-
.../src/components/AppHeader.vue | 10 +++++++++
.../network-sharing-server/src/scss/app.scss | 6 ++++++
.../network-sharing-server/src/stores/AppStore.js | 1 +
6 files changed, 61 insertions(+), 1 deletion(-)
diff --git a/application/webserver/src/main/java/org/videolan/vlc/webserver/TranslationMapping.kt b/application/webserver/src/main/java/org/videolan/vlc/webserver/TranslationMapping.kt
index ed0ae6a5ec..1453cf09f1 100644
--- a/application/webserver/src/main/java/org/videolan/vlc/webserver/TranslationMapping.kt
+++ b/application/webserver/src/main/java/org/videolan/vlc/webserver/TranslationMapping.kt
@@ -92,5 +92,6 @@ object TranslationMapping {
VIDEO_GROUP_BY_FOLDER(R.string.video_min_group_length_folder),
VIDEO_GROUP_BY_NAME(R.string.video_min_group_length_name),
PLAY_ALL(R.string.play_all),
+ DARK_THEME(R.string.enable_black_theme),
}
}
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/public/icons/checked.svg b/buildsystem/network-sharing-server/public/icons/checked.svg
new file mode 100644
index 0000000000..6a97f8e092
--- /dev/null
+++ b/buildsystem/network-sharing-server/public/icons/checked.svg
@@ -0,0 +1,25 @@
+<!--
+ - *************************************************************************
+ - checked.svg
+ - **************************************************************************
+ - Copyright © 2024 VLC authors and VideoLAN
+ - Author: Nicolas POMEPUY
+ - This program is free software; you can redistribute it and/or modify
+ - it under the terms of the GNU General Public License as published by
+ - the Free Software Foundation; either version 2 of the License, or
+ - (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU General Public License for more details.
+ -
+ - You should have received a copy of the GNU General Public License
+ - along with this program; if not, write to the Free Software
+ - Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ - ***************************************************************************
+ -
+ -
+ -->
+
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/src/App.vue b/buildsystem/network-sharing-server/src/App.vue
index 390042319c..4ffc9c4b05 100644
--- a/buildsystem/network-sharing-server/src/App.vue
+++ b/buildsystem/network-sharing-server/src/App.vue
@@ -179,7 +179,24 @@ export default {
} else {
this.startWS()
}
- }
+
+ if (this.appStore.darkTheme) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark')
+ } else {
+ document.documentElement.removeAttribute('data-bs-theme')
+ }
+
+ },
+ mounted: function () {
+ this.appStore.$subscribe((mutation, state) => {
+ if (state.darkTheme) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark')
+ } else {
+ document.documentElement.removeAttribute('data-bs-theme')
+ }
+ })
+
+ },
}
</script>
diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index 1393f16333..cf593ac4c5 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -45,6 +45,13 @@
<RouterLink class="dropdown-item" :to="{ name: 'Logs' }" v-t="'LOG_FILE'">
</RouterLink>
</li>
+ <li><hr class="dropdown-divider"></li>
+ <li>
+ <a v-on:click="changeTheme" class="dropdown-item clickable">
+ <img class="image-button" :src="(`./icons/checked.svg`)" v-show="(this.appStore.darkTheme)"/>
+ <span v-t="'DARK_THEME'"></span>
+ </a>
+ </li>
</ul>
</div>
</div>
@@ -157,6 +164,9 @@ export default {
},
isActive(mode) {
return this.appStore.videoGrouping == mode
+ },
+ changeTheme () {
+ this.appStore.darkTheme = !this.appStore.darkTheme
}
},
computed: {
diff --git a/buildsystem/network-sharing-server/src/scss/app.scss b/buildsystem/network-sharing-server/src/scss/app.scss
index 04ef61b9dc..61100248bb 100644
--- a/buildsystem/network-sharing-server/src/scss/app.scss
+++ b/buildsystem/network-sharing-server/src/scss/app.scss
@@ -1,5 +1,6 @@
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
+// @import "~bootstrap/scss/variables-dark";
@import "colors";
$custom-theme-colors: map-merge($theme-colors, ("primary": $primary-color,
@@ -25,6 +26,11 @@ $card-bg: $lighter-grey;
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";
+// @include color-mode(dark) {
+// // CSS variable overrides here...
+// --bs-body-bg: var(--bs-blue);
+// }
+
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
diff --git a/buildsystem/network-sharing-server/src/stores/AppStore.js b/buildsystem/network-sharing-server/src/stores/AppStore.js
index aa9a569116..408f19ffec 100644
--- a/buildsystem/network-sharing-server/src/stores/AppStore.js
+++ b/buildsystem/network-sharing-server/src/stores/AppStore.js
@@ -16,6 +16,7 @@ export const useAppStore = defineStore('app', {
socketOpened: true,
showAddStream: false,
needRefresh: false,
+ darkTheme: reactive(useLocalStorage('darkTheme',false)),
title: ""
}),
getters: {
More information about the Android
mailing list