81 lines
3.0 KiB
Stylus
81 lines
3.0 KiB
Stylus
theme($t)
|
|
convert(hexo-config('style.prefers_theme')) == $t
|
|
|
|
$color-background-h = hue($color-background)
|
|
$color-background-s = saturation($color-background)
|
|
$color-background-l = lightness($color-background)
|
|
|
|
$color-block-h = hue($color-block)
|
|
$color-block-s = saturation($color-block)
|
|
$color-block-l = lightness($color-block)
|
|
|
|
$color-code-h = hue($color-code)
|
|
$color-code-s = saturation($color-code)
|
|
$color-code-l = lightness($color-code)
|
|
|
|
$color-text-h = hue($color-text)
|
|
$color-text-s = saturation($color-text)
|
|
$color-text-l = lightness($color-text)
|
|
|
|
_dark_text()
|
|
--text: 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)
|
|
--text-code: hsl($color-code-h, $color-code-s, $color-code-l)
|
|
|
|
_light_text()
|
|
--text: 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)
|
|
--text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
|
|
|
|
_light_root()
|
|
:root
|
|
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
|
|
--card: hsl($color-block-h, $color-block-s, 100)
|
|
--alpha20: rgba(white, 0.2)
|
|
--alpha50: rgba(white, 0.5)
|
|
--alpha60: rgba(white, 0.6)
|
|
--alpha75: rgba(white, 0.75)
|
|
--alpha100: white
|
|
--leftbar-bg: hsl($color-block-h, $color-block-s, 90)
|
|
--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)
|
|
_dark_text()
|
|
--theme-link: $color-link
|
|
--theme-link-opa: rgba($color-link, 0.2)
|
|
|
|
_dark_root()
|
|
:root
|
|
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
|
|
--card: hsl($color-block-h, $color-block-s * 1.2, 24)
|
|
--block: hsl($color-block-h, $color-block-s, 16)
|
|
--block-border: hsl($color-block-h, $color-block-s, 24)
|
|
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
|
--alpha20: rgba(black, 0.2)
|
|
--alpha50: rgba(black, 0.5)
|
|
--alpha60: rgba(black, 0.6)
|
|
--alpha75: rgba(black, 0.75)
|
|
--alpha100: black
|
|
--leftbar-bg: hsl($color-block-h, $color-block-s, 24)
|
|
_light_text()
|
|
@media screen and (max-width: $device-mobile-max)
|
|
--site-bg: black
|
|
|
|
// 默认自动模式
|
|
if theme(light)
|
|
_light_root()
|
|
else if theme(dark)
|
|
_dark_root()
|
|
else
|
|
@media (prefers-color-scheme: light)
|
|
_light_root()
|
|
@media (prefers-color-scheme: dark)
|
|
_dark_root() |