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 }}
|
{{ 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
@import 'colors';
|
@import 'colors';
|
||||||
|
@import 'colors-dark';
|
||||||
@import 'fonts';
|
@import 'fonts';
|
||||||
@import 'vars';
|
@import 'vars';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user