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

18
_config.yml
View File

@ -346,23 +346,11 @@ style:
button: 'hsl(192 98% 55%)' # 按钮颜色
hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
dynamic:
dynamic:
background: 'hsl(212 16% 98%)' # 浅色背景颜色
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%)' # 行内代码颜色
dark:
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%)' # 行内代码颜色
text: 'hsl(0 0% 20%)' # 文本颜色
animated_avatar:
animate: auto # auto, always
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) {
args = hexo.args.map(args, ['color', 'child'], ['title']);
const color = args.color;
const title = args.title;
var el = '';
const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
if (!color && defaultColor) {
color = defaultColor;
const { title } = args;
if (args.color == null) {
args.color = hexo.theme.config.tag_plugins.note.default_color
}
var el = '';
// header
el += '<div class="tag-plugin note"';
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.title = '';
}
const color = args.color;
const title = args.title;
var el = '';
const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
if (!color && defaultColor) {
color = defaultColor;
const { title } = args;
if (args.color == null) {
args.color = hexo.theme.config.tag_plugins.note.default_color
}
var el = '';
// header
el += '<div class="tag-plugin note"';
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
background: var(--block)
$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
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-hover = convert(hexo-config('style.color.common.hover'))
// 浅色
$light-background = convert(hexo-config('style.color.light.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-background = convert(hexo-config('style.color.dynamic.background'))
$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-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-s = saturation($dynamic-block)
$dynamic-block-l = lightness($dynamic-block)
set_text_light()
--text-p0: $dark-title
--text-p1: mix($dark-text, $dark-background, 85)
--text-p2: mix($dark-text, $dark-background, 70)
--text-p3: mix($dark-text, $dark-background, 45)
--text-p4: mix($dark-text, $dark-background, 35)
--text-meta: mix($dark-text, $dark-background, 30)
--text-code: $dark-code
$dynamic-code-h = hue($dynamic-code)
$dynamic-code-s = saturation($dynamic-code)
$dynamic-code-l = lightness($dynamic-code)
$dynamic-text-h = hue($dynamic-text)
$dynamic-text-s = saturation($dynamic-text)
$dynamic-text-l = lightness($dynamic-text)
set_text_dark()
--text-p0: $light-title
--text-p1: $light-text
--text-p2: mix($light-text, $light-background, 80)
--text-p3: mix($light-text, $light-background, 60)
--text-p4: mix($light-text, $light-background, 35)
--text-meta: mix($light-text, $light-background, 20)
--text-code: $light-code
--text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0)
--text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l)
--text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75)
--text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25)
--text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5)
--text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2)
--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
--site-bg: $light-background
--card: $light-card
--site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98)
--card: hsl($dynamic-block-h, $dynamic-block-s, 100)
--block: hsl($dynamic-block-h, $dynamic-block-s, 95)
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
set_text_dark()
--theme-highlight: darken($color-theme, 5)
--theme-bg: mix($color-theme, $light-card, 10)
--theme-bg: $color-theme
--theme-link: $color-link
set_darkmode()
:root
--site-bg: $dark-background
--card: $dark-card
--site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16)
--card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25)
--block: hsl($dynamic-block-h, $dynamic-block-s, 12)
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
set_text_light()
--theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-mobile-max)
--site-bg: $dark-background-mobile
--card: darken($dark-card, 6)
--site-bg: black
if hexo-config('style.darkmode') == 'auto'
// 系统的dark模式

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

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

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

@ -9,10 +9,11 @@
border-radius: $border-card
overflow: hidden
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
.page-number
.page-number
padding: 4px 8px
border-radius: 8px
background: var(--block)
margin: 2px
.extend
text-align: center
background-size: contain

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

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

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

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

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

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