hexo-theme-stellar/source/css/_defines/theme.styl

63 lines
2.5 KiB
Stylus
Raw Normal View History

2022-12-10 18:43:55 +08:00
$color-background-h = hue($color-background)
$color-background-s = saturation($color-background)
$color-background-l = lightness($color-background)
2022-12-10 15:49:59 +08:00
2022-12-10 18:43:55 +08:00
$color-block-h = hue($color-block)
$color-block-s = saturation($color-block)
$color-block-l = lightness($color-block)
2022-12-09 23:56:58 +08:00
2022-12-10 18:43:55 +08:00
$color-code-h = hue($color-code)
$color-code-s = saturation($color-code)
$color-code-l = lightness($color-code)
2022-12-10 15:49:59 +08:00
2022-12-10 18:43:55 +08:00
$color-text-h = hue($color-text)
$color-text-s = saturation($color-text)
$color-text-l = lightness($color-text)
2022-12-10 15:49:59 +08:00
2022-11-04 23:13:01 +08:00
set_text_dark()
2022-12-10 18:43:55 +08:00
--text-p0: hsl($color-text-h, $color-text-s, 0)
--text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
--text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
--text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
--text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
--text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
2024-01-05 22:58:30 +08:00
--text-code: hsl($color-code-h, $color-code-s, $color-code-l)
2022-12-10 15:49:59 +08:00
set_text_light()
2022-12-10 18:43:55 +08:00
--text-p0: hsl($color-text-h, $color-text-s, 100)
--text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
--text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
--text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
--text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
--text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
2024-01-05 22:58:30 +08:00
--text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
2022-12-10 15:49:59 +08:00
2022-11-04 23:13:01 +08:00
:root
2022-12-11 21:38:19 +08:00
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
2022-12-10 18:43:55 +08:00
--card: hsl($color-block-h, $color-block-s, 100)
--block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92)
2022-11-04 23:13:01 +08:00
set_text_dark()
--theme-link: $color-link
2021-02-19 23:33:19 +08:00
2021-08-28 14:03:54 +08:00
set_darkmode()
:root
2022-12-11 21:38:19 +08:00
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
2022-12-15 22:09:01 +08:00
--card: hsl($color-block-h, $color-block-s * 1.2, 24)
2022-12-11 21:38:19 +08:00
--block: hsl($color-block-h, $color-block-s, 16)
2022-12-10 18:43:55 +08:00
--block-border: hsl($color-block-h, $color-block-s, 24)
2022-12-11 21:38:19 +08:00
--block-hover: hsl($color-block-h, $color-block-s, 20)
2022-11-04 23:13:01 +08:00
set_text_light()
2022-10-09 13:42:03 +08:00
@media screen and (max-width: $device-mobile-max)
2022-12-10 15:49:59 +08:00
--site-bg: black
2021-08-28 14:03:54 +08:00
2021-04-02 20:24:16 +08:00
if hexo-config('style.darkmode') == 'auto'
// dark
@media (prefers-color-scheme: dark)
2021-08-28 14:03:54 +08:00
set_darkmode()
if hexo-config('style.darkmode') == 'always'
set_darkmode()