Client - add dark theme to base.scss & button in navbar to toggle theme
This commit is contained in:
parent
861c3d7af3
commit
94fd50d404
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -1,4 +1,5 @@
|
||||
@import 'colors';
|
||||
@import 'colors-dark';
|
||||
@import 'fonts';
|
||||
@import 'vars';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
:root {
|
||||
:root [data-theme='dark'] {
|
||||
--app-background-color: #090909;
|
||||
--app-color: #ffffff;
|
||||
--app-color-light: #6f7070;
|
||||
|
Loading…
Reference in New Issue
Block a user