Allow switch the remote access between light and dark themes

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

buildsystem/network-sharing-server/public/icons/checked.svg

+<!--
+  - *************************************************************************
+  -  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

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>
 

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: {

buildsystem/network-sharing-server/src/scss/app.scss

 @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";
 

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: {