feat: Dark/Light Theme support for code blocks
This commit is contained in:
parent
8cf3f6f066
commit
06b49e037b
@ -281,6 +281,58 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-code-dark {
|
||||||
|
pre, pre.hljs {
|
||||||
|
background-color: mc('blue-grey', '900');
|
||||||
|
border-left-color: mc('blue-grey', '500');
|
||||||
|
|
||||||
|
> code {
|
||||||
|
color: mc('blue-grey', '100');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-code-light {
|
||||||
|
@import 'node_modules/highlight.js/styles/atom-one-light';
|
||||||
|
pre, pre.hljs {
|
||||||
|
background-color: lighten(mc('blue-grey', '50'), 3%);
|
||||||
|
border-left: 7px solid mc('blue-grey', '100');
|
||||||
|
border-top: 1px solid mc('blue-grey', '100');
|
||||||
|
border-bottom: 1px solid mc('blue-grey', '100');
|
||||||
|
|
||||||
|
> code {
|
||||||
|
color: mc('blue-grey', '800');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-code-dark, &.is-code-light {
|
||||||
|
pre, pre.hljs {
|
||||||
|
padding: 20px 20px 20px 13px;
|
||||||
|
font-family: $core-font-monospace;
|
||||||
|
white-space: pre;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
> code {
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
font-family: $core-font-monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + p {
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + h1, & + h2, & + h3 {
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.align-right {
|
.align-right {
|
||||||
float:right;
|
float:right;
|
||||||
margin: 0 0 10px 10px;
|
margin: 0 0 10px 10px;
|
||||||
|
@ -77,7 +77,7 @@ block content
|
|||||||
h1.title#title= pageData.meta.title
|
h1.title#title= pageData.meta.title
|
||||||
if pageData.meta.subtitle
|
if pageData.meta.subtitle
|
||||||
h2.subtitle= pageData.meta.subtitle
|
h2.subtitle= pageData.meta.subtitle
|
||||||
.content.mkcontent(v-pre)
|
.content.mkcontent(v-pre, class=[appconfig.theme.code.dark ? 'is-code-dark' : 'is-code-light'])
|
||||||
!= pageData.html
|
!= pageData.html
|
||||||
|
|
||||||
modal-create-page(basepath=pageData.meta.path)
|
modal-create-page(basepath=pageData.meta.path)
|
||||||
|
Loading…
Reference in New Issue
Block a user