Skip to content

Commit

Permalink
fix: comment code block theme adaptation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Centaurus99
Centaurus99 committed Feb 7, 2022
1 parent 863f6ad commit 974b1c9
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 4 deletions.
19 changes: 18 additions & 1 deletion source/css/custom.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ article.article .content
:root
--waline-theme-color: $primary !important
--waline-active-color: darken(hsl(217, 71%, 53%), 5%) !important
--waline-code-bgcolor: #f8f8f8 !important
--waline-badge-color: #27ae60 !important

body.night
Expand All @@ -83,6 +84,22 @@ body.night
--waline-active-color: dark-primary-color-hover !important
--waline-bgcolor: rgba(40, 44, 52, 0.5) !important
--waline-bgcolor-light: rgba(40, 44, 52, 0.8) !important
--waline-code-bgcolor: #282c34 !important
--waline-border-color: dark-primary-color-hover !important
--waline-badge-color: dark-primary-color !important
--waline-border: 1px solid var(--waline-border-color) !important
--waline-border: 1px solid var(--waline-border-color) !important

.v[data-class=v]
pre::-webkit-scrollbar-track
background: rgba(0, 0, 0, 0.06) !important
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1) !important

pre::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.12) !important
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2) !important

pre::-webkit-scrollbar-thumb:hover
background: rgba(0, 0, 0, 0.24) !important

// code block highlight in comments fixes
@import 'prismjs'
3 changes: 0 additions & 3 deletions source/css/night.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +120,6 @@ night()
.v .vlist .vcard .vh,
.v .vlist .vcard .vquote
border-color: dark-primary-color-hover
.v code,
.v pre
background-color: transparent

// font color
body,
Expand Down
219 changes: 219 additions & 0 deletions source/css/prismjs.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
// prismjs theme for code block in comments

// default theme: https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
code-light()
.v[data-class=v]
.token
all: unset

code[class*=language-], pre[class*=language-]
all: unset

.token.comment, .token.prolog, .token.cdata
color: hsl(230, 4%, 64%)

.token.doctype, .token.punctuation, .token.entity
color: hsl(230, 8%, 24%)

.token.attr-name, .token.class-name, .token.boolean, .token.constant, .token.number, .token.atrule
color: hsl(35, 99%, 36%)

.token.keyword
color: hsl(301, 63%, 40%)

.token.property, .token.tag, .token.symbol, .token.deleted, .token.important
color: hsl(5, 74%, 59%)

.token.selector, .token.string, .token.char, .token.builtin, .token.inserted, .token.regex, .token.attr-value, .token.attr-value > .token.punctuation
color: hsl(119, 34%, 47%)

.token.variable, .token.operator, .token.function
color: hsl(221, 87%, 60%)

.token.url
color: hsl(198, 99%, 37%)

/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals, .token.special-attr > .token.attr-value > .token.value.css
color: hsl(230, 8%, 24%)

/* CSS overrides */
.language-css .token.selector
color: hsl(5, 74%, 59%)

.language-css .token.property
color: hsl(230, 8%, 24%)

.language-css .token.function, .language-css .token.url > .token.function
color: hsl(198, 99%, 37%)

.language-css .token.url > .token.string.url
color: hsl(119, 34%, 47%)

.language-css .token.important, .language-css .token.atrule .token.rule
color: hsl(301, 63%, 40%)

/* JS overrides */
.language-javascript .token.operator
color: hsl(301, 63%, 40%)

.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation
color: hsl(344, 84%, 43%)

/* JSON overrides */
.language-json .token.operator
color: hsl(230, 8%, 24%)

.language-json .token.null.keyword
color: hsl(35, 99%, 36%)

/* MD overrides */
.language-markdown .token.url, .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string
color: hsl(230, 8%, 24%)

.language-markdown .token.url > .token.content
color: hsl(221, 87%, 60%)

.language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url
color: hsl(198, 99%, 37%)

.language-markdown .token.blockquote.punctuation, .language-markdown .token.hr.punctuation
color: hsl(230, 4%, 64%)
font-style: italic

.language-markdown .token.code-snippet
color: hsl(119, 34%, 47%)

.language-markdown .token.bold .token.content
color: hsl(35, 99%, 36%)

.language-markdown .token.italic .token.content
color: hsl(301, 63%, 40%)

.language-markdown .token.strike .token.content, .language-markdown .token.strike .token.punctuation, .language-markdown .token.list.punctuation, .language-markdown .token.title.important > .token.punctuation
color: hsl(5, 74%, 59%)

/* General */
.token.bold
font-weight: bold

.token.comment, .token.italic
font-style: italic

.token.entity
cursor: help

.token.namespace
opacity: 0.8

// night theme: https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
code-night()
.v[data-class=v]
.token
all: unset

code[class*=language-], pre[class*=language-]
all: unset

.token.comment, .token.prolog, .token.cdata
color: hsl(220, 10%, 40%)

.token.doctype, .token.punctuation, .token.entity
color: hsl(220, 14%, 71%)

.token.attr-name, .token.class-name, .token.boolean, .token.constant, .token.number, .token.atrule
color: hsl(29, 54%, 61%)

.token.keyword
color: hsl(286, 60%, 67%)

.token.property, .token.tag, .token.symbol, .token.deleted, .token.important
color: hsl(355, 65%, 65%)

.token.selector, .token.string, .token.char, .token.builtin, .token.inserted, .token.regex, .token.attr-value, .token.attr-value > .token.punctuation
color: hsl(95, 38%, 62%)

.token.variable, .token.operator, .token.function
color: hsl(207, 82%, 66%)

.token.url
color: hsl(187, 47%, 55%)

/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals, .token.special-attr > .token.attr-value > .token.value.css
color: hsl(220, 14%, 71%)

/* CSS overrides */
.language-css .token.selector
color: hsl(355, 65%, 65%)

.language-css .token.property
color: hsl(220, 14%, 71%)

.language-css .token.function, .language-css .token.url > .token.function
color: hsl(187, 47%, 55%)

.language-css .token.url > .token.string.url
color: hsl(95, 38%, 62%)

.language-css .token.important, .language-css .token.atrule .token.rule
color: hsl(286, 60%, 67%)

/* JS overrides */
.language-javascript .token.operator
color: hsl(286, 60%, 67%)

.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation
color: hsl(5, 48%, 51%)

/* JSON overrides */
.language-json .token.operator
color: hsl(220, 14%, 71%)

.language-json .token.null.keyword
color: hsl(29, 54%, 61%)

/* MD overrides */
.language-markdown .token.url, .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string
color: hsl(220, 14%, 71%)

.language-markdown .token.url > .token.content
color: hsl(207, 82%, 66%)

.language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url
color: hsl(187, 47%, 55%)

.language-markdown .token.blockquote.punctuation, .language-markdown .token.hr.punctuation
color: hsl(220, 10%, 40%)
font-style: italic

.language-markdown .token.code-snippet
color: hsl(95, 38%, 62%)

.language-markdown .token.bold .token.content
color: hsl(29, 54%, 61%)

.language-markdown .token.italic .token.content
color: hsl(286, 60%, 67%)

.language-markdown .token.strike .token.content, .language-markdown .token.strike .token.punctuation, .language-markdown .token.list.punctuation, .language-markdown .token.title.important > .token.punctuation
color: hsl(355, 65%, 65%)

/* General */
.token.bold
font-weight: bold

.token.comment, .token.italic
font-style: italic

.token.entity
cursor: help

.token.namespace
opacity: 0.8

body.light
code-light()

body.night
code-night()

0 comments on commit 974b1c9

Please sign in to comment.