feat: add option to follow system color setting (#1012)
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:
parent
c484117657
commit
e9dccc9ef5
|
@ -12,8 +12,8 @@ function setColorMode(mode: ColorMode) {
|
|||
<div flex="~ gap4" w-full>
|
||||
<button
|
||||
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
|
||||
:tabindex="colorMode.value === 'dark' ? 0 : -1"
|
||||
:class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
|
||||
:tabindex="colorMode.preference === 'dark' ? 0 : -1"
|
||||
:class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
|
||||
@click="setColorMode('dark')"
|
||||
>
|
||||
<div i-ri:moon-line />
|
||||
|
@ -21,12 +21,21 @@ function setColorMode(mode: ColorMode) {
|
|||
</button>
|
||||
<button
|
||||
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
|
||||
:tabindex="colorMode.value === 'light' ? 0 : -1"
|
||||
:class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
|
||||
:tabindex="colorMode.preference === 'light' ? 0 : -1"
|
||||
:class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
|
||||
@click="setColorMode('light')"
|
||||
>
|
||||
<div i-ri:sun-line />
|
||||
{{ $t('settings.interface.light_mode') }}
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
|
||||
|
||||
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
export type ColorMode = 'light' | 'dark'
|
||||
export type ColorMode = 'light' | 'dark' | 'system'
|
||||
|
||||
export interface FeatureFlags {
|
||||
experimentalVirtualScroller: boolean
|
||||
|
|
|
@ -202,7 +202,8 @@
|
|||
"default": " (default)",
|
||||
"font_size": "Font Size",
|
||||
"label": "Interface",
|
||||
"light_mode": "Light Mode"
|
||||
"light_mode": "Light Mode",
|
||||
"system_mode": "System"
|
||||
},
|
||||
"language": {
|
||||
"display_language": "Display Language",
|
||||
|
|
|
@ -267,7 +267,8 @@
|
|||
"sm": "Small",
|
||||
"xl": "Extra large",
|
||||
"xs": "Extra small"
|
||||
}
|
||||
},
|
||||
"system_mode": "System"
|
||||
},
|
||||
"language": {
|
||||
"display_language": "Display Language",
|
||||
|
|
Loading…
Reference in a new issue