mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
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
4 changed files with 18 additions and 7 deletions
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue