teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: add option to follow system color setting (#1012)

Browse source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Closes https://github.com/elk-zone/elk/issues/1007
This commit is contained in:
Tom Sherman 2023-01-12 18:29:10 +00:00 committed by GitHub
parent c484117657
commit e9dccc9ef5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/settings/SettingsColorMode.vue
View file

@ -12,8 +12,8 @@ function setColorMode(mode: ColorMode) {
<div flex="~ gap4" w-full> <div flex="~ gap4" w-full>
<button <button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'dark' ? 0 : -1" :tabindex="colorMode.preference === 'dark' ? 0 : -1"
:class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('dark')" @click="setColorMode('dark')"
> >
<div i-ri:moon-line /> <div i-ri:moon-line />
@ -21,12 +21,21 @@ function setColorMode(mode: ColorMode) {
</button> </button>
<button <button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'light' ? 0 : -1" :tabindex="colorMode.preference === 'light' ? 0 : -1"
:class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('light')" @click="setColorMode('light')"
> >
<div i-ri:sun-line /> <div i-ri:sun-line />
{{ $t('settings.interface.light_mode') }} {{ $t('settings.interface.light_mode') }}
</button> </button>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.preference === 'system' ? 0 : -1"
:class="colorMode.preference === 'system' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('system')"
>
<div i-ri:computer-line />
{{ $t('settings.interface.system_mode') }}
</button>
</div> </div>
</template> </template>

2
composables/settings/definition.ts
View file

@ -1,7 +1,7 @@
import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants' import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
export type ColorMode = 'light' | 'dark' export type ColorMode = 'light' | 'dark' | 'system'
export interface FeatureFlags { export interface FeatureFlags {
experimentalVirtualScroller: boolean experimentalVirtualScroller: boolean

3
locales/en-GB.json
View file

@ -202,7 +202,8 @@
"default": " (default)", "default": " (default)",
"font_size": "Font Size", "font_size": "Font Size",
"label": "Interface", "label": "Interface",
"light_mode": "Light Mode" "light_mode": "Light Mode",
"system_mode": "System"
}, },
"language": { "language": {
"display_language": "Display Language", "display_language": "Display Language",

3
locales/en-US.json
View file

@ -267,7 +267,8 @@
"sm": "Small", "sm": "Small",
"xl": "Extra large", "xl": "Extra large",
"xs": "Extra small" "xs": "Extra small"
} },
"system_mode": "System"
}, },
"language": { "language": {
"display_language": "Display Language", "display_language": "Display Language",