Client - add dark theme to base.scss & button in navbar to toggle theme

This commit is contained in:
Sam 2023-12-16 18:54:40 +01:00
parent 861c3d7af3
commit 94fd50d404
5 changed files with 48 additions and 12 deletions

View File

@ -60,12 +60,12 @@
{{ authUser.username }} {{ authUser.username }}
</router-link> </router-link>
<button <button
class="logout-button transparent" class="nav-button transparent"
@click="updateDisplayModal(true)" @click="updateDisplayModal(true)"
:aria-label="$t('user.LOGOUT')" :title="$t('user.LOGOUT')"
> >
<i class="fa fa-sign-out logout-fa" aria-hidden="true" /> <i class="fa fa-sign-out nav-button-fa" aria-hidden="true" />
<span class="logout-text">{{ $t('user.LOGOUT') }}</span> <span class="nav-button-text">{{ $t('user.LOGOUT') }}</span>
</button> </button>
</div> </div>
<div class="nav-items-group" v-else> <div class="nav-items-group" v-else>
@ -76,6 +76,14 @@
{{ $t('user.REGISTER') }} {{ $t('user.REGISTER') }}
</router-link> </router-link>
</div> </div>
<button
class="nav-button transparent"
@click="toggleTheme"
:title="$t('user.TOGGLE_THEME')"
>
<i class="fa nav-button-fa" :class="themeIcon" aria-hidden="true" />
<span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
</button>
<Dropdown <Dropdown
v-if="availableLanguages && language" v-if="availableLanguages && language"
class="nav-item" class="nav-item"
@ -93,7 +101,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, capitalize } from 'vue' import { computed, ref, capitalize, onBeforeMount } from 'vue'
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import UserPicture from '@/components/User/UserPicture.vue' import UserPicture from '@/components/User/UserPicture.vue'
@ -119,6 +127,12 @@
) )
const isMenuOpen: Ref<boolean> = ref(false) const isMenuOpen: Ref<boolean> = ref(false)
const displayModal: Ref<boolean> = ref(false) const displayModal: Ref<boolean> = ref(false)
const darkTheme: Ref<boolean> = ref(false)
const themeIcon: ComputedRef<string> = computed(() =>
darkTheme.value ? 'fa-moon' : 'fa-sun-o'
)
onBeforeMount(() => initTheme())
function openMenu() { function openMenu() {
isMenuOpen.value = true isMenuOpen.value = true
@ -141,6 +155,24 @@
function updateDisplayModal(display: boolean) { function updateDisplayModal(display: boolean) {
displayModal.value = display displayModal.value = display
} }
function setTheme() {
if (darkTheme.value) {
darkTheme.value = true
document.body.setAttribute('data-theme', 'dark')
} else {
document.body.removeAttribute('data-theme')
}
}
function initTheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
darkTheme.value = true
}
setTheme()
}
function toggleTheme() {
darkTheme.value = !darkTheme.value
setTheme()
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -252,13 +284,13 @@
.nav-separator { .nav-separator {
display: none; display: none;
} }
.logout-button { .nav-button {
padding: $default-padding * 0.5 $default-padding * 0.75; padding: $default-padding * 0.5 $default-padding * 0.75;
margin-left: 2px; margin-left: 2px;
.logout-fa { .nav-button-fa {
display: block; display: block;
} }
.logout-text { .nav-button-text {
display: none; display: none;
} }
} }
@ -323,15 +355,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.logout-button { .nav-button {
padding: $default-padding $default-padding $default-padding padding: $default-padding $default-padding $default-padding
$default-padding * 2.4; $default-padding * 2.4;
color: var(--app-a-color); color: var(--app-a-color);
text-align: left; text-align: left;
.logout-fa { .nav-button-fa {
display: none; display: none;
width: 36px;
} }
.logout-text { .nav-button-text {
display: block; display: block;
} }
} }

View File

@ -136,6 +136,7 @@
"REVIEW": "review", "REVIEW": "review",
"SHOW_PASSWORD": "show password", "SHOW_PASSWORD": "show password",
"THIS_USER_ACCOUNT_IS_INACTIVE": "This user account is inactive.", "THIS_USER_ACCOUNT_IS_INACTIVE": "This user account is inactive.",
"TOGGLE_THEME": "Toggle theme (Light or Dark mode)",
"USERNAME": "Username", "USERNAME": "Username",
"USERNAME_INFO": "3 to 30 characters required, only alphanumeric characters and the underscore character \"_\" allowed.", "USERNAME_INFO": "3 to 30 characters required, only alphanumeric characters and the underscore character \"_\" allowed.",
"USER_PICTURE": "user picture", "USER_PICTURE": "user picture",

View File

@ -136,6 +136,7 @@
"REVIEW": "accepter", "REVIEW": "accepter",
"SHOW_PASSWORD": "afficher le mot de passe", "SHOW_PASSWORD": "afficher le mot de passe",
"THIS_USER_ACCOUNT_IS_INACTIVE": "Le compte de cet utilisateur est inactif.", "THIS_USER_ACCOUNT_IS_INACTIVE": "Le compte de cet utilisateur est inactif.",
"TOGGLE_THEME": "Modifier le thème (Mode Clair ou Sombre)",
"USERNAME": "Nom d'utilisateur", "USERNAME": "Nom d'utilisateur",
"USERNAME_INFO": "3 à 30 caractères requis, seuls les caractères alphanumériques et le caractère _ sont autorisés.", "USERNAME_INFO": "3 à 30 caractères requis, seuls les caractères alphanumériques et le caractère _ sont autorisés.",
"USER_PICTURE": "photo de l'utilisateur", "USER_PICTURE": "photo de l'utilisateur",

View File

@ -1,4 +1,5 @@
@import 'colors'; @import 'colors';
@import 'colors-dark';
@import 'fonts'; @import 'fonts';
@import 'vars'; @import 'vars';

View File

@ -1,4 +1,4 @@
:root { :root [data-theme='dark'] {
--app-background-color: #090909; --app-background-color: #090909;
--app-color: #ffffff; --app-color: #ffffff;
--app-color-light: #6f7070; --app-color-light: #6f7070;