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 }}
</router-link>
<button
class="logout-button transparent"
class="nav-button transparent"
@click="updateDisplayModal(true)"
:aria-label="$t('user.LOGOUT')"
:title="$t('user.LOGOUT')"
>
<i class="fa fa-sign-out logout-fa" aria-hidden="true" />
<span class="logout-text">{{ $t('user.LOGOUT') }}</span>
<i class="fa fa-sign-out nav-button-fa" aria-hidden="true" />
<span class="nav-button-text">{{ $t('user.LOGOUT') }}</span>
</button>
</div>
<div class="nav-items-group" v-else>
@ -76,6 +76,14 @@
{{ $t('user.REGISTER') }}
</router-link>
</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
v-if="availableLanguages && language"
class="nav-item"
@ -93,7 +101,7 @@
</template>
<script setup lang="ts">
import { computed, ref, capitalize } from 'vue'
import { computed, ref, capitalize, onBeforeMount } from 'vue'
import type { ComputedRef, Ref } from 'vue'
import UserPicture from '@/components/User/UserPicture.vue'
@ -119,6 +127,12 @@
)
const isMenuOpen: 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() {
isMenuOpen.value = true
@ -141,6 +155,24 @@
function updateDisplayModal(display: boolean) {
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>
<style scoped lang="scss">
@ -252,13 +284,13 @@
.nav-separator {
display: none;
}
.logout-button {
.nav-button {
padding: $default-padding * 0.5 $default-padding * 0.75;
margin-left: 2px;
.logout-fa {
.nav-button-fa {
display: block;
}
.logout-text {
.nav-button-text {
display: none;
}
}
@ -323,15 +355,16 @@
display: flex;
flex-direction: column;
.logout-button {
.nav-button {
padding: $default-padding $default-padding $default-padding
$default-padding * 2.4;
color: var(--app-a-color);
text-align: left;
.logout-fa {
.nav-button-fa {
display: none;
width: 36px;
}
.logout-text {
.nav-button-text {
display: block;
}
}

View File

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

View File

@ -136,6 +136,7 @@
"REVIEW": "accepter",
"SHOW_PASSWORD": "afficher le mot de passe",
"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_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",

View File

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

View File

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