Skip to content
Snippets Groups Projects
Verified Commit 6c3f3df7 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Added UI to change theme

parent c4ace75a
No related branches found
No related tags found
No related merge requests found
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<title>Funkwhale</title> <title>Funkwhale</title>
</head> </head>
<body class="theme-dark"> <body class="theme-light" id="body">
<noscript> <noscript>
<strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
......
...@@ -227,6 +227,14 @@ export default { ...@@ -227,6 +227,14 @@ export default {
this.$store.dispatch('instance/fetchSettings') this.$store.dispatch('instance/fetchSettings')
this.fetchNodeInfo() 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) { '$store.state.auth.authenticated' (newValue) {
if (!newValue) { if (!newValue) {
this.disconnect() this.disconnect()
......
...@@ -33,6 +33,14 @@ ...@@ -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> <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 role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate translate-context="Footer/*/List item.Link/Short, Noun">Keyboard shortcuts</translate></div>
</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>
<section class="four wide column"> <section class="four wide column">
<h4 v-translate class="ui header">Getting help</h4> <h4 v-translate class="ui header">Getting help</h4>
...@@ -76,6 +84,18 @@ export default { ...@@ -76,6 +84,18 @@ export default {
parser.href = url parser.href = url
return parser.hostname 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> </script>
...@@ -40,7 +40,7 @@ export default new Vuex.Store({ ...@@ -40,7 +40,7 @@ export default new Vuex.Store({
}), }),
createPersistedState({ createPersistedState({
key: 'ui', key: 'ui',
paths: ['ui.currentLanguage', 'ui.momentLocale'] paths: ['ui.currentLanguage', 'ui.momentLocale', 'ui.theme']
}), }),
createPersistedState({ createPersistedState({
key: 'radios', key: 'radios',
......
...@@ -10,6 +10,7 @@ export default { ...@@ -10,6 +10,7 @@ export default {
maxMessages: 100, maxMessages: 100,
messageDisplayDuration: 10000, messageDisplayDuration: 10000,
messages: [], messages: [],
theme: 'light',
notifications: { notifications: {
inbox: 0, inbox: 0,
pendingReviewEdits: 0, pendingReviewEdits: 0,
...@@ -38,6 +39,9 @@ export default { ...@@ -38,6 +39,9 @@ export default {
computeLastDate: (state) => { computeLastDate: (state) => {
state.lastDate = new Date() state.lastDate = new Date()
}, },
theme: (state, value) => {
state.theme = value
},
addMessage (state, message) { addMessage (state, message) {
state.messages.push(message) state.messages.push(message)
if (state.messages.length > state.maxMessages) { if (state.messages.length > state.maxMessages) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment