Added UI to change theme

6c3f3df7 · Eliot Berriot · c4ace75a · 6c3f3df7 · 6c3f3df7 · 6c3f3df7
Verified Commit 6c3f3df7 authored 6 years ago by Eliot Berriot
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -9,7 +9,7 @@
  <title>Funkwhale</title>
 </head>

-<body class="theme-dark">
+<body class="theme-light" id="body">
  <noscript>
    <strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>

--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -227,6 +227,14 @@ export default {
      this.$store.dispatch('instance/fetchSettings')
      this.fetchNodeInfo()
    },
+    '$store.state.ui.theme': {
+      immediate: true,
+      handler (newValue, oldValue) {
+        let body = document.getElementById('body')
+        body.classList.remove(`theme-${oldValue}`)
+        body.classList.add(`theme-${newValue}`)
+      },
+    },
    '$store.state.auth.authenticated' (newValue) {
      if (!newValue) {
        this.disconnect()

--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -33,6 +33,14 @@
            <a href="https://docs.funkwhale.audio/users/apps.html" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
            <div role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate translate-context="Footer/*/List item.Link/Short, Noun">Keyboard shortcuts</translate></div>
          </div>
+          <div class="ui form">
+            <div class="ui field">
+              <label><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change theme</translate></label>
+              <select class="ui dropdown" :value="$store.state.ui.theme" @change="$store.commit('ui/theme', $event.target.value)">
+                <option v-for="theme in themes" :key="theme.key" :value="theme.key">{{ theme.name }}</option>
+              </select>
+            </div>
+          </div>
        </section>
        <section class="four wide column">
          <h4 v-translate class="ui header">Getting help</h4>
@@ -76,6 +84,18 @@ export default {
      parser.href = url
      return parser.hostname
    },
+    themes () {
+      return [
+        {
+          name: this.$pgettext('Footer/Settings/Dropdown.Label/Theme name', 'Light'),
+          key: 'light'
+        },
+        {
+          name: this.$pgettext('Footer/Settings/Dropdown.Label/Theme name', 'Dark'),
+          key: 'dark'
+        }
+      ]
+    }
  }
 }
 </script>
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -40,7 +40,7 @@ export default new Vuex.Store({
    }),
    createPersistedState({
      key: 'ui',
-      paths: ['ui.currentLanguage', 'ui.momentLocale']
+      paths: ['ui.currentLanguage', 'ui.momentLocale', 'ui.theme']
    }),
    createPersistedState({
      key: 'radios',

--- a/front/src/store/ui.js
+++ b/front/src/store/ui.js
@@ -10,6 +10,7 @@ export default {
    maxMessages: 100,
    messageDisplayDuration: 10000,
    messages: [],
+    theme: 'light',
    notifications: {
      inbox: 0,
      pendingReviewEdits: 0,
@@ -38,6 +39,9 @@ export default {
    computeLastDate: (state) => {
      state.lastDate = new Date()
    },
+    theme: (state, value) => {
+      state.theme = value
+    },
    addMessage (state, message) {
      state.messages.push(message)
      if (state.messages.length > state.maxMessages) {