add theme

This commit is contained in:
2025-08-12 12:19:25 +08:00
parent 8c06923a46
commit ac0d1944ab
227 changed files with 18962 additions and 0 deletions

View File

@@ -0,0 +1,281 @@
$highlight_theme = hexo-config('code_blocks.theme')
$highlight_macstyle = hexo-config('code_blocks.macStyle')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
@require 'theme'
:root
--hl-color: $highlight-foreground
--hl-bg: $highlight-background
--hltools-bg: $highlight-tools.bg-color
--hltools-color: $highlight-tools.color
--hlnumber-bg: $highlight-gutter.bg-color
--hlnumber-color: $highlight-gutter.color
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
[data-theme='dark']
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
if $highlight_enable
@require 'highlight/index'
if $prismjs_enable
@require 'prismjs/index'
$code-block
overflow: auto
margin: 0 0 20px
padding: 0
background: var(--hl-bg)
color: var(--hl-color)
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
.container
pre,
code
font-size: $code-font-size
font-family: $code-font-family !important
addBorderRadius()
code
padding: 2px 5px
background: $code-background
color: $code-foreground
pre
@extend $code-block
padding: 10px 20px
code
padding: 0
background: none
color: var(--hl-color)
text-shadow: none
figure.highlight
@extend $code-block
position: relative
addBorderRadius()
pre
margin: 0
padding: 8px 0
border: none
figcaption,
.caption
padding: 6px 0 2px 14px
font-size: $code-font-size
line-height: 1em
a
float: right
padding-right: 10px
color: var(--hl-color)
&:hover
border-bottom-color: var(--hl-color)
&.copy-true
user-select: all
-webkit-user-select: all
& > table,
& > pre
display: block !important
opacity: 0
.highlight-tools
display: flex
align-items: center
padding: 0 8px
min-height: 24px
height: 2.15em
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
overflow: hidden
& > *
padding: 5px
i
cursor: pointer
transition: all .3s
&:hover
color: $theme-color
&.closed
& ~ *
display: none
.expand
transform: rotate(-90deg)
if !$highlight_macstyle
& > .macStyle
padding: 0
.code-lang
flex: 1
text-transform: uppercase
font-weight: bold
font-size: 1.15em
user-select: none
-webkit-user-select: none
padding 2px
.copy-notice
padding-right: 2px
opacity: 0
transition: opacity .4s
if hexo-config('code_blocks.language')
.code-lang
flex: 1
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
& > div:nth-child(2)
flex: 1
else
.macStyle
flex: 1
.gutter
user-select: none
-webkit-user-select: none
.gist table
width: auto
td
border: none
if $highlight_macstyle
.container
figure.highlight
margin: 0 0 24px
border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0)
.highlight-tools
.macStyle
display: flex
& > *
margin-right: 8px
width: 12px
height: 12px
border-radius: 50%
& > :last-child
margin-right: 5px
.mac-close
background: #fc625d
.mac-minimize
background: #fdbc40
.mac-maximize
background: #35cd4b
if hexo-config('code_blocks.shrink') != 'none'
& > :nth-child(2)
order: 8
&.closed
.expand
transform: rotate(90deg)
if hexo-config('code_blocks.height_limit')
.container
.code-expand-btn
position: absolute
bottom: 0
z-index: 10
width: 100%
background: var(--hlexpand-bg)
text-align: center
font-size: $code-font-size
cursor: pointer
i
padding: 6px 0
color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite
&.expand-done
& > i
transform: rotate(180deg)
& + table,
& + pre
margin-bottom: 1.8em
&:not(.expand-done)
& ~ table,
& ~ pre
overflow: hidden
height: unit(hexo-config('code_blocks.height_limit'), px)
@keyframes code-expand-key
0%
opacity: .6
50%
opacity: .1
100%
opacity: .6
if hexo-config('code_blocks.fullpage')
.container
figure.highlight.code-fullpage
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 9999
margin: 0
border-radius: 0
animation: code-fullpage .3s
.code-expand-btn,
.expand
display: none
.highlight-tools
& ~ pre,
& ~ table
display: block
overflow: auto
height: calc(100vh - 2.15em)
margin-bottom: 0
@keyframes code-fullpage
0%,
100%
transform: translateX(0)
20%,
60%
transform: translateX(-5px)
40%,
80%
transform: translateX(5px)

View File

@@ -0,0 +1,81 @@
figure.highlight
table
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
pre .deletion
color: $highlight-deletion
pre .addition
color: $highlight-addition
pre .meta
color: $highlight-purple
pre
.comment
color: $highlight-comment
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
.tag
color: $highlight-aqua
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
.built_in
color: $highlight-yellow
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
.tag .attr,
.javascript .function
color: $highlight-purple

View File

@@ -0,0 +1,39 @@
if $highlight_theme != false
@require 'diff'
.container
figure.highlight
.line
if wordWrap
&:before
display: inline-block
padding: 0 6px 0 0
min-width: 30px
color: var(--hlnumber-color)
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
.gutter pre
padding-right: 10px
padding-left: 10px
background-color: var(--hlnumber-bg)
color: var(--hlnumber-color)
text-align: right
.code pre
padding-right: 10px
padding-left: 10px
width: 100%

View File

@@ -0,0 +1,302 @@
if $highlight_theme == 'light'
// prism-base16-ateliersulphurpool.light
pre[class*='language-']
.token.function
color: #ffb62c
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: rgba(149, 165, 166, .8)
.token.punctuation
color: #5e6687
.token.namespace
opacity: .7
.token.operator,
.token.boolean,
.token.number
color: #c76b29
.token.property
color: #c08b30
.token.tag
color: #3d8fd1
.token.string
color: #22a2c9
.token.selector
color: #6679cc
.token.attr-name
color: #c76b29
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
color: #22a2c9
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit
color: #ac9739
.token.statement,
.token.regex,
.token.atrule
color: #22a2c9
.token.placeholder,
.token.variable
color: #3d8fd1
.token.deleted
text-decoration: line-through
.token.inserted
border-bottom: 1px dotted #202746
text-decoration: none
.token.italic
font-style: italic
.token.important,
.token.bold
font-weight: bold
.token.important
color: #c94922
.token.entity
cursor: help
pre > code.highlight
outline: .4em solid #c94922
outline-offset: .4em
if $highlight_theme == 'darker'
// prism-atom-dark
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #7C7C7C
.token.punctuation
color: #c5c8c6
.namespace
opacity: .7
.token.property,
.token.keyword,
.token.tag
color: #96CBFE
.token.class-name
color: #FFFFB6
.token.boolean,
.token.constant
color: #99CC99
.token.symbol,
.token.deleted
color: #f92672
.token.number
color: #FF73FD
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #A8FF60
.token.variable
color: #C6C5FE
.token.operator
color: #EDEDED
.token.entity
color: #FFFFB6
cursor: help
.token.url
color: #96CBFE
.language-css .token.string,
.style .token.string
color: #87C38A
.token.atrule,
.token.attr-value
color: #F9EE98
.token.function
color: #DAD085
.token.regex
color: #E9C062
.token.important
color: #fd971f
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
if $highlight_theme == 'pale night'
// prism-dracula
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #6272a4
.token.punctuation
color: #f8f8f2
.namespace
opacity: .7
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: #ff79c6
.token.boolean,
.token.number
color: #bd93f9
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #50fa7b
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: #f8f8f2
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #f1fa8c
.token.keyword
color: #8be9fd
.token.regex,
.token.important
color: #ffb86c
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
.token.entity
cursor: help
if $highlight_theme == 'ocean'
// prism-material-oceanic
pre[class*='language-']
&.language-css > code,
&.language-sass > code,
&.language-scss > code
color: #fd9170 !important
.namespace
opacity: .7
.token.atrule,
.token.symbol,
.token.constant,
.token.boolean,
.token.function
color: #c792ea
.token.attr-name,
.token.builtin,
.token.class
color: #ffcb6b
.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string
color: #c3e88d
.token.cdata,
.token.property,
.token.char,
.token.inserted
color: #80cbc4
.token.class-name,
.token.color,
.token.hexcode,
.token.regex
color: #f2ff00
.token.comment,
.token.prolog,
.token.doctype
color: #546e7a
.token.deleted,
.token.variable,
.token.entity,
.token.selector,
.token.tag,
.token.unit
color: #f07178
.token.id
color: #c792ea
font-weight: bold
.token.important
color: #c792ea
font-weight: bold
.token.keyword
color: #c792ea
font-style: italic
.token.number,
.token.url
color: #fd9170
.token.operator,
.token.punctuation
color: #89ddff

View File

@@ -0,0 +1,24 @@
if $prismjs_line_number
@require 'line-number'
if $highlight_theme != false
@require 'diff'
.container
pre[class*='language-']
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
&:not(.line-numbers)
padding: 10px 20px
.caption
margin-left: -3.8em
padding: 4px 16px !important
a
padding: 0 !important

View File

@@ -0,0 +1,42 @@
.container
pre[class*='language-']
&.line-numbers
position: relative
padding-left: 3.8em
counter-reset: linenumber
line-height: $line-height-code-block
> code
position: relative
line-height: $line-height-code-block
if hexo-config('code_blocks.word_wrap')
white-space: pre-wrap
else
white-space: inherit
word-wrap: normal
word-break: normal
overflow-wrap: normal
.line-numbers-rows
position: absolute
top: 0
left: -3.8em
width: 3em
letter-spacing: -1px
font-size: 100%
pointer-events: none
user-select: none
-webkit-user-select: none
& > span
display: block
counter-increment: linenumber
pointer-events: none
&:before
display: block
padding-right: .8em
color: var(--hlnumber-color)
content: counter(linenumber)
text-align: right

View File

@@ -0,0 +1,121 @@
if $highlight_theme == 'darker'
$highlight-background = #212121
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-mac-border = rgba(0, 0, 0, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == false
$highlight-background = #F6F8FA
$highlight-foreground = #90A4AE
$highlight-selection = #80CBC440
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-scrollbar = darken($highlight-background, 8)