Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - update icon for ligth theme mode

Browse Source
This commit is contained in:
Sam 2023-12-17 11:32:31 +01:00
parent 82d7001e15
commit 6be93dae12
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
fittrackee_client/src/components/NavBar.vue
View File

@ -83,8 +83,15 @@
:title="$t('user.TOGGLE_THEME')" :title="$t('user.TOGGLE_THEME')"
> >
<i <i
class="fa nav-button-fa" v-if="darkTheme"
:class="themeIcon" class="fa nav-button-fa fa-moon"
aria-hidden="true"
/>
<img
v-else
class="clear-theme"
src="/img/weather/clear-day.svg"
alt=""
aria-hidden="true" aria-hidden="true"
/> />
<span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span> <span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
@ -137,9 +144,6 @@
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE] () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
) )
const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme()) const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme())
const themeIcon: ComputedRef<string> = computed(() =>
darkTheme.value ? 'fa-moon' : 'fa-sun'
)
onBeforeMount(() => setTheme()) onBeforeMount(() => setTheme())
@ -311,6 +315,12 @@
display: none; display: none;
} }
} }
.clear-theme {
filter: var(--workout-img-color);
height: 20px;
margin-bottom: -5px;
}
} }
@media screen and (max-width: $medium-limit) { @media screen and (max-width: $medium-limit) {