migration: rework dark theme enabling

app/src/App.vue

@@ -8,7 +8,7 @@
           :disabled="waiting"
           exact-active-class="active"
         >
-          <span v-if="theme">
+          <span v-if="dark">
             <img alt="YunoHost logo" src="./assets/logo_light.png" width="40" />
           </span>
           <span v-else>
@@ -116,7 +116,7 @@ export default {
       'transitions',
       'transitionName',
       'waiting',
-      'theme',
+      'dark',
       'ssoLink',
     ]),
   },
@@ -184,8 +184,11 @@ export default {
     if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
       this.$store.commit('SET_SPINNER', 'spookycat')
     }
-
+    // updates the data-bs-theme attribute
-    document.documentElement.setAttribute('dark-theme', this.theme) // updates the data-theme attribute
+    document.documentElement.setAttribute(
+      'data-bs-theme',
+      this.dark ? 'dark' : 'light',
+    )
   },
 }
 </script>

app/src/components/globals/YListGroupItem.vue

@@ -63,7 +63,7 @@ export default {
     &-#{$color} {
       color: theme-color-level($color, 6);
 
-      [dark-theme='true'] & {
+      [data-bs-theme='light'] & {
         color: theme-color-level($color, -6);
       }
 

app/src/components/globals/YSpinner.vue

@@ -25,7 +25,7 @@ export default {
     background-image: url('../../assets/spinners/pacman_dark.gif');
     animation-name: back-and-forth-pacman;
 
-    [dark-theme='true'] & {
+    [data-bs-theme='dark'] & {
       background-image: url('../../assets/spinners/pacman_light.gif');
     }
 

app/src/main.js

@@ -40,7 +40,7 @@ app.config.globalProperties.$askConfirmation = function (message, props) {
     bodyClass: [
       'font-weight-bold',
       'rounded-top',
-      store.state.theme ? 'text-white' : 'text-black',
+      store.state.dark ? 'text-white' : 'text-black',
     ],
     ...props,
   })
@@ -58,7 +58,7 @@ app.config.globalProperties.$askMdConfirmation = function (
     okTitle: this.$t('yes'),
     cancelTitle: this.$t('cancel'),
     headerBgVariant: 'warning',
-    headerClass: store.state.theme ? 'text-white' : 'text-black',
+    headerClass: store.state.dark ? 'text-white' : 'text-black',
     centered: true,
     ...props,
   })

app/src/store/settings.js

@@ -12,7 +12,7 @@ export default {
     fallbackLocale: localStorage.getItem('fallbackLocale'),
     cache: localStorage.getItem('cache') !== 'false',
     transitions: localStorage.getItem('transitions') !== 'false',
-    theme: localStorage.getItem('theme') === 'true',
+    dark: localStorage.getItem('dark') === 'true',
     experimental: localStorage.getItem('experimental') === 'true',
     spinner: 'pacman',
     supportedLocales,
@@ -48,10 +48,13 @@ export default {
       state.spinner = spinner
     },
 
-    SET_THEME(state, boolean) {
+    SET_DARK(state, boolean) {
-      localStorage.setItem('theme', boolean)
+      localStorage.setItem('dark', boolean)
-      state.theme = boolean
+      state.dark = boolean
-      document.documentElement.setAttribute('dark-theme', boolean)
+      document.documentElement.setAttribute(
+        'data-bs-theme',
+        boolean ? 'dark' : 'light',
+      )
     },
   },
 
@@ -68,8 +71,8 @@ export default {
       })
     },
 
-    UPDATE_THEME({ commit }, theme) {
+    UPDATE_DARK({ commit }, boolean) {
-      commit('SET_THEME', theme)
+      commit('SET_DARK', boolean)
     },
   },
 
@@ -78,7 +81,7 @@ export default {
     fallbackLocale: (state) => state.fallbackLocale,
     cache: (state) => state.cache,
     transitions: (state) => state.transitions,
-    theme: (state) => state.theme,
+    dark: (state) => state.dark,
     experimental: (state) => state.experimental,
     spinner: (state) => state.spinner,
 

app/src/views/diagnosis/DiagnosisView.vue

@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {

app/src/views/tool/ToolWebadmin.vue

@@ -63,7 +63,7 @@ export default {
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
-        theme: {
+        dark: {
           id: 'theme',
           label: this.$t('tools_webadmin.theme'),
           component: 'CheckboxItem',
@@ -77,7 +77,7 @@ export default {
 
   computed: {
     // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
+    ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
     ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
   },
 

app/src/views/update/SystemUpdate.vue

@@ -91,7 +91,7 @@
       id="apps-pre-upgrade"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
-      :header-class="theme ? 'text-white' : 'text-black'"
+      :header-class="dark ? 'text-white' : 'text-black'"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {