xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[opt] color

This commit is contained in:
xaoxuu 2022-12-10 15:49:59 +08:00
parent 978bece89b
commit e1f617f582
11 changed files with 81 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_config.yml
View File

@ -347,22 +347,10 @@ style:
hover: 'hsl(14 100% 57%)' # 按钮高亮颜色 hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可） # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
dynamic: dynamic:
background: 'hsl(212 16% 98%)' # 浅色背景颜色
block: 'hsl(212 8% 95%)' # 块背景颜色 block: 'hsl(212 8% 95%)' # 块背景颜色
light:
background: hsl(212 16% 98%) # 浅色背景颜色
block: 'hsl(212 8% 95%)' # 块背景颜色
card: 'white' # 卡片背景颜色
title: 'black' # 标题文本颜色
text: 'hsl(0 0% 20%)' # 正文文本颜色
code: 'hsl(14 100% 48%)' # 行内代码颜色 code: 'hsl(14 100% 48%)' # 行内代码颜色
dark: text: 'hsl(0 0% 20%)' # 文本颜色
background: 'hsl(212 6% 16%)' # 深色背景颜色
background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
block: 'hsl(212 8% 20%)' # 块背景颜色
card: 'hsl(212 10% 22%)' # 卡片背景颜色
title: 'white' # 标题文本颜色
text: 'hsl(0 0% 93%)' # 正文文本颜色
code: 'hsl(14 100% 63%)' # 行内代码颜色
animated_avatar: animated_avatar:
animate: auto # auto, always animate: auto # auto, always
background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

10
scripts/tags/border.js
View File

@ -11,13 +11,11 @@
hexo.extend.tag.register('border', function(args, content) { hexo.extend.tag.register('border', function(args, content) {
args = hexo.args.map(args, ['color', 'child'], ['title']); args = hexo.args.map(args, ['color', 'child'], ['title']);
const color = args.color; const { title } = args;
const title = args.title; if (args.color == null) {
var el = ''; args.color = hexo.theme.config.tag_plugins.note.default_color
const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
if (!color && defaultColor) {
color = defaultColor;
} }
var el = '';
// header // header
el += '<div class="tag-plugin note"'; el += '<div class="tag-plugin note"';
el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' '); el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');

10
scripts/tags/note.js
View File

@ -13,13 +13,11 @@ hexo.extend.tag.register('note', function(args) {
args.content = args.title; args.content = args.title;
args.title = ''; args.title = '';
} }
const color = args.color; const { title } = args;
const title = args.title; if (args.color == null) {
var el = ''; args.color = hexo.theme.config.tag_plugins.note.default_color
const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
if (!color && defaultColor) {
color = defaultColor;
} }
var el = '';
// header // header
el += '<div class="tag-plugin note"'; el += '<div class="tag-plugin note"';
el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' '); el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');

2
source/css/_common/blockquote.styl
View File

@ -5,6 +5,6 @@ blockquote
padding: 0.5rem 0.75rem padding: 0.5rem 0.75rem
background: var(--block) background: var(--block)
$bd-left = 4px $bd-left = 4px
border-left: $bd-left solid var(--text-meta) border-left: $bd-left solid hsl($dynamic-block-h, $dynamic-block-s, $dynamic-block-l * 0.8)
border-radius: $bd-left $border-block $border-block $bd-left border-radius: $bd-left $border-block $border-block $bd-left
color: var(--text-p2) color: var(--text-p2)

24
source/css/_custom.styl
View File

@ -7,27 +7,11 @@ $color-link = convert(hexo-config('style.color.common.link'))
$color-button = convert(hexo-config('style.color.common.button')) $color-button = convert(hexo-config('style.color.common.button'))
$color-hover = convert(hexo-config('style.color.common.hover')) $color-hover = convert(hexo-config('style.color.common.hover'))
// 浅色 // 动态颜色
$light-background = convert(hexo-config('style.color.light.background')) $dynamic-background = convert(hexo-config('style.color.dynamic.background'))
$light-block = convert(hexo-config('style.color.light.block'))
$light-card = convert(hexo-config('style.color.light.card'))
$light-title = convert(hexo-config('style.color.light.title'))
$light-text = convert(hexo-config('style.color.light.text'))
$light-code = convert(hexo-config('style.color.light.code'))
// 深色
$dark-background = convert(hexo-config('style.color.dark.background'))
$dark-block = convert(hexo-config('style.color.dark.block'))
$dark-card = convert(hexo-config('style.color.dark.card'))
$dark-title = convert(hexo-config('style.color.dark.title'))
$dark-text = convert(hexo-config('style.color.dark.text'))
$dark-code = convert(hexo-config('style.color.dark.code'))
// 移动端深色背景（OLED调成纯黑可以省电）
$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
$dynamic-block = convert(hexo-config('style.color.dynamic.block')) $dynamic-block = convert(hexo-config('style.color.dynamic.block'))
$dynamic-code = convert(hexo-config('style.color.dynamic.code'))
$dynamic-text = convert(hexo-config('style.color.dynamic.text'))
// @font-face // @font-face
// font-family: 'Dosis' // font-family: 'Dosis'

60
source/css/_defines/theme.styl
View File

@ -1,49 +1,59 @@
$dynamic-background-h = hue($dynamic-background)
$dynamic-background-s = saturation($dynamic-background)
$dynamic-background-l = lightness($dynamic-background)
$dynamic-block-h = hue($dynamic-block) $dynamic-block-h = hue($dynamic-block)
$dynamic-block-s = saturation($dynamic-block) $dynamic-block-s = saturation($dynamic-block)
$dynamic-block-l = lightness($dynamic-block) $dynamic-block-l = lightness($dynamic-block)
set_text_light() $dynamic-code-h = hue($dynamic-code)
--text-p0: $dark-title $dynamic-code-s = saturation($dynamic-code)
--text-p1: mix($dark-text, $dark-background, 85) $dynamic-code-l = lightness($dynamic-code)
--text-p2: mix($dark-text, $dark-background, 70)
--text-p3: mix($dark-text, $dark-background, 45) $dynamic-text-h = hue($dynamic-text)
--text-p4: mix($dark-text, $dark-background, 35) $dynamic-text-s = saturation($dynamic-text)
--text-meta: mix($dark-text, $dark-background, 30) $dynamic-text-l = lightness($dynamic-text)
--text-code: $dark-code
set_text_dark() set_text_dark()
--text-p0: $light-title --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0)
--text-p1: $light-text --text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l)
--text-p2: mix($light-text, $light-background, 80) --text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75)
--text-p3: mix($light-text, $light-background, 60) --text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25)
--text-p4: mix($light-text, $light-background, 35) --text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5)
--text-meta: mix($light-text, $light-background, 20) --text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2)
--text-code: $light-code --text-code: hsl($dynamic-code-h, $dynamic-code-s, $dynamic-code-l * 1)
set_text_light()
--text-p0: hsl($dynamic-text-h, $dynamic-text-s, 100)
--text-p1: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.25)
--text-p2: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.5)
--text-p3: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1)
--text-p4: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.25)
--text-meta: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.5)
--text-code: hsl($dynamic-code-h, $dynamic-code-s, 48)
:root :root
--site-bg: $light-background --site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98)
--card: $light-card --card: hsl($dynamic-block-h, $dynamic-block-s, 100)
--block: hsl($dynamic-block-h, $dynamic-block-s, 95) --block: hsl($dynamic-block-h, $dynamic-block-s, 95)
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 90) --block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92) --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100) --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
set_text_dark() set_text_dark()
--theme-highlight: darken($color-theme, 5) --theme-bg: $color-theme
--theme-bg: mix($color-theme, $light-card, 10)
--theme-link: $color-link --theme-link: $color-link
set_darkmode() set_darkmode()
:root :root
--site-bg: $dark-background --site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16)
--card: $dark-card --card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25)
--block: hsl($dynamic-block-h, $dynamic-block-s, 12) --block: hsl($dynamic-block-h, $dynamic-block-s, 12)
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 24) --block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9) --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30) --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
set_text_light() set_text_light()
--theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
--site-bg: $dark-background-mobile --site-bg: black
--card: darken($dark-card, 6)
if hexo-config('style.darkmode') == 'auto' if hexo-config('style.darkmode') == 'auto'
// 系统的dark模式 // 系统的dark模式

6
source/css/_layout/md.styl
View File

@ -129,7 +129,7 @@ h1.article-title
padding: 2px 0 padding: 2px 0
text-decoration: none text-decoration: none
line-height: 1.2 line-height: 1.2
&:after &:before
content: '' content: ''
position: absolute position: absolute
border-radius: 2px border-radius: 2px
@ -143,9 +143,11 @@ h1.article-title
&:hover &:hover
border-bottom: none border-bottom: none
color: var(--theme-link) color: var(--theme-link)
&:after z-index 0
&:before
height: 100% height: 100%
opacity: 0.2 opacity: 0.2
z-index -1
bottom: 0 bottom: 0
left: -2px left: -2px
right: -2px right: -2px

1
source/css/_layout/partial/paginator.styl
View File

@ -13,6 +13,7 @@
padding: 4px 8px padding: 4px 8px
border-radius: 8px border-radius: 8px
background: var(--block) background: var(--block)
margin: 2px
.extend .extend
text-align: center text-align: center
background-size: contain background-size: contain

77
source/css/_layout/tag-plugins/common.styl
View File

@ -4,18 +4,17 @@ set_text_white()
--text-p2: #eee --text-p2: #eee
--text-p3: #ddd --text-p3: #ddd
--text-code: white --text-code: white
--card: $dark-card
--block-border: lighten($dark-block, 6)
--block-hover: darken($dark-block, 4)
set_text_black() set_text_black()
--text-p0: black --text-p0: black
--text-p1: #111 --text-p1: #111
--text-p2: #333 --text-p2: #333
--text-p3: #555 --text-p3: #555
--text-code: white --text-code: white
--card: $light-card
--block-border: darken($light-block, 5) set_dynamic_color($theme)
--block-hover: darken($light-block, 2) --theme: $theme
--theme-bg: hsl(hue($theme), 100, 95)
--theme-border: hsl(hue($theme), 90, 50)
.tag-plugin .tag-plugin
--theme: var(--text-p1) --theme: var(--text-p1)
@ -23,39 +22,19 @@ set_text_black()
--theme-bg: var(--block) --theme-bg: var(--block)
.tag-plugin[color='red'] .tag-plugin[color='red']
--theme: $c-red set_dynamic_color($c-red)
--theme-border: mix($c-red, white, 60)
--theme-bg: mix($c-red, white, 15)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme: $c-orange set_dynamic_color($c-orange)
--theme-border: mix($c-orange, white, 60)
--theme-bg: mix($c-orange, white, 15)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme: $c-yellow set_dynamic_color($c-yellow)
--theme-border: mix($c-yellow, white, 60)
--theme-bg: mix($c-yellow, white, 20)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme: $c-green set_dynamic_color($c-green)
--theme-border: mix($c-green, white, 60)
--theme-bg: mix($c-green, white, 15)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme: $c-cyan set_dynamic_color($c-cyan)
--theme-border: mix($c-cyan, white, 60)
--theme-bg: mix($c-cyan, white, 15)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme: $c-blue set_dynamic_color($c-blue)
--theme-border: mix($c-blue, white, 60)
--theme-bg: mix($c-blue, white, 15)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme: $c-purple set_dynamic_color($c-purple)
--theme-border: mix($c-purple, white, 60)
--theme-bg: mix($c-purple, white, 15)
.tag-plugin[color='light'] .tag-plugin[color='light']
--theme-bg: white --theme-bg: white
@ -78,34 +57,24 @@ set_text_black()
set_text_white() set_text_white()
set_darkmode_tags() set_darkmode_tags()
set_dynamic_color($theme)
--theme: $theme
--theme-bg: hsl(hue($theme), 30, 20)
--theme-border: hsl(hue($theme), 90, 40)
.tag-plugin[color='red'] .tag-plugin[color='red']
--theme-border: mix($c-red, black, 70) set_dynamic_color($c-red)
--theme-bg: mix($c-red, black, 35)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme-border: mix($c-orange, black, 70) set_dynamic_color($c-orange)
--theme-bg: mix($c-orange, black, 35)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme-border: mix($c-yellow, black, 70) set_dynamic_color($c-yellow)
--theme-bg: mix($c-yellow, black, 30)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme-border: mix($c-green, black, 70) set_dynamic_color($c-green)
--theme-bg: mix($c-green, black, 30)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme-border: mix($c-cyan, black, 70) set_dynamic_color($c-cyan)
--theme-bg: mix($c-cyan, black, 30)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme-border: mix($c-blue, black, 70) set_dynamic_color($c-blue)
--theme-bg: mix($c-blue, black, 35)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme-border: mix($c-purple, black, 70) set_dynamic_color($c-purple)
--theme-bg: mix($c-purple, black, 40)
.tag-plugin[color='light'] .tag-plugin[color='light']
--theme-border: white --theme-border: white
--theme-bg: #fff --theme-bg: #fff

2
source/css/_layout/widgets/toc_common.styl
View File

@ -66,6 +66,6 @@
&:hover &:hover
background: var(--block-hover) background: var(--block-hover)
&.active &.active
color: var(--theme-highlight) !important color: $color-theme !important
&:before &:before
visibility: visible visibility: visible

1
source/css/_plugins/comments/twikoo.styl
View File

@ -110,7 +110,6 @@ set_darkmode_comments()
.cmt-body.twikoo .cmt-body.twikoo
--twikoo-lighttext: #f2b94b; --twikoo-lighttext: #f2b94b;
--twikoo-secondtext: #a1a2b8; --twikoo-secondtext: #a1a2b8;
--twikoo-emoji-background: darken($dark-block, 1);
--twikoo-theme: #409eff; --twikoo-theme: #409eff;
if hexo-config('style.darkmode') == 'auto' if hexo-config('style.darkmode') == 'auto'