Another super feature: auto dark mode!

This commit is contained in:
Cotes Chung 2020-01-03 21:22:11 +08:00
parent 1c2be0c243
commit 2386fe5bd8
13 changed files with 325 additions and 122 deletions

View file

@ -5,7 +5,7 @@
© 2017-2019 Cotes Chung © 2017-2019 Cotes Chung
MIT License MIT License
--> -->
<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down"> <div id="topbar-wrapper" class="row justify-content-center topbar-down">
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between"> <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
<span id="breadcrumb"> <span id="breadcrumb">
{% for item in page.breadcrumb %} {% for item in page.breadcrumb %}

View file

@ -16,7 +16,7 @@ layout: compress
<div id="sidebar" class="d-flex flex-column"> <div id="sidebar" class="d-flex flex-column">
{% include sidebar.html %} {% include sidebar.html %}
</div> </div>
<div id="main-wrapper" class="bg-white"> <div id="main-wrapper">
{% include topbar.html %} {% include topbar.html %}
<div id="main"> <div id="main">

View file

@ -7,7 +7,7 @@ layout: default
# MIT License # MIT License
--- ---
<div class="row bg-white"> <div class="row">
<div class="col-12 col-lg-11 col-xl-8"> <div class="col-12 col-lg-11 col-xl-8">
<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3"> <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
{% if page.dynamic_title %} {% if page.dynamic_title %}

View file

@ -0,0 +1,53 @@
/*!
* The main dark mode styles
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2018-2019 Cotes Chung
* MIT Licensed
*/
@media (prefers-color-scheme: dark) {
html {
/* framework */
--main-wrapper-bg: rgb(27, 27, 30);
--topbar-wrapper-bg: rgb(39, 40, 43);
--search-wrapper-bg: rgb(34, 34, 39);
--search-icon: rgb(100, 102, 105);
--input-focus-border: rgb(112, 114, 115);
--footer-bg: rgb(31, 30, 30);
--footer-border: rgb(44, 45, 45);
--mask-bg: rgb(68, 69, 70);
/* sidebar */
--nav-cursor: rgb(183, 182, 182);
--sidebar-bg: radial-gradient(circle, #231c4c 0%, #1d1f27 100%);
/* common color */
--text-color: rgb(175, 176, 177);
--link-color: rgb(138, 180, 248);
--main-border: rgb(63, 65, 68);
--button-bg: rgb(39, 40, 33);
--blockquote-border: rgb(93, 95, 82);
--blockquote-text: rgb(96, 125, 139);
--card-bg: rgb(39, 40, 33);
--card-header-bg: rgb(51, 50, 50);
--relate-post-title: rgb(164, 175, 181);
/* posts */
--toc-highlight: rgb(116, 178, 243);
--tag-bg: rgb(41, 40, 40);
--tag-hover: rgb(43, 56, 62);
--tb-odd-bg: rgb(50, 51, 41); /* posts' table odd line */
/* tags */
--tag-border: rgb(59, 79, 88);
--tag-shadow: rgb(32, 33, 33);
/* categories */
--categories-hover-bg: rgb(73, 75, 76);
/* archives */
--timeline-node-bg: rgb(150, 152, 156);
}
}

View file

@ -0,0 +1,85 @@
/*!
* The syntax dark mode styles
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2018-2019 Cotes Chung
* MIT Licensed
*/
@media (prefers-color-scheme: dark) {
html {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
--highlight-pre-bg: #272822;
--highlight-hll-bg: #272822;
--highlight-c: #75715e; /* Comment */
--highlight-err: #960050; /* Error */
--highlight-err-bg: #1e0010; /* Error background */
--highlight-k: #66d9ef; /* Keyword */
--highlight-l: #ae81ff; /* Literal */
--highlight-n: #f8f8f2; /* Name */
--highlight-o: #f92672; /* Operator */
--highlight-p: #f8f8f2; /* Punctuation */
--highlight-cm: #75715e; /* Comment.Multiline */
--highlight-cp: #75715e; /* Comment.Preproc */
--highlight-c1: #75715e; /* Comment.Single */
--highlight-cs: #75715e; /* Comment.Special */
--highlight-kc: #66d9ef; /* Keyword.Constant */
--highlight-kd: #66d9ef; /* Keyword.Declaration */
--highlight-kn: #f92672; /* Keyword.Namespace */
--highlight-kp: #66d9ef; /* Keyword.Pseudo */
--highlight-kr: #66d9ef; /* Keyword.Reserved */
--highlight-kt: #66d9ef; /* Keyword.Type */
--highlight-ld: #e6db74; /* Literal.Date */
--highlight-m: #ae81ff; /* Literal.Number */
--highlight-s: #e6db74; /* Literal.String */
--highlight-na: #a6e22e; /* Name.Attribute */
--highlight-nb: #f8f8f2; /* Name.Builtin */
--highlight-nc: #a6e22e; /* Name.Class */
--highlight-no: #66d9ef; /* Name.Constant */
--highlight-nd: #a6e22e; /* Name.Decorator */
--highlight-ni: #f8f8f2; /* Name.Entity */
--highlight-ne: #a6e22e; /* Name.Exception */
--highlight-nf: #a6e22e; /* Name.Function */
--highlight-nl: #f8f8f2; /* Name.Label */
--highlight-nn: #f8f8f2; /* Name.Namespace */
--highlight-nx: #a6e22e; /* Name.Other */
--highlight-py: #f8f8f2; /* Name.Property */
--highlight-nt: #f92672; /* Name.Tag */
--highlight-nv: #f8f8f2; /* Name.Variable */
--highlight-ow: #f92672; /* Operator.Word */
--highlight-w: #f8f8f2; /* Text.Whitespace */
--highlight-mf: #ae81ff; /* Literal.Number.Float */
--highlight-mh: #ae81ff; /* Literal.Number.Hex */
--highlight-mi: #ae81ff; /* Literal.Number.Integer */
--highlight-mo: #ae81ff; /* Literal.Number.Oct */
--highlight-sb: #e6db74; /* Literal.String.Backtick */
--highlight-sc: #e6db74; /* Literal.String.Char */
--highlight-sd: #e6db74; /* Literal.String.Doc */
--highlight-s2: #e6db74; /* Literal.String.Double */
--highlight-se: #ae81ff; /* Literal.String.Escape */
--highlight-sh: #e6db74; /* Literal.String.Heredoc */
--highlight-si: #e6db74; /* Literal.String.Interpol */
--highlight-sx: #e6db74; /* Literal.String.Other */
--highlight-sr: #e6db74; /* Literal.String.Regex */
--highlight-s1: #e6db74; /* Literal.String.Single */
--highlight-ss: #e6db74; /* Literal.String.Symbol */
--highlight-bp: #f8f8f2; /* Name.Builtin.Pseudo */
--highlight-vc: #f8f8f2; /* Name.Variable.Class */
--highlight-vg: #f8f8f2; /* Name.Variable.Global */
--highlight-vi: #f8f8f2; /* Name.Variable.Instance */
--highlight-il: #ae81ff; /* Literal.Number.Integer.Long */
// --highlight-gh: none; /* Generic Heading & Diff Header */
--highlight-gu: #75715e; /* Generic.Subheading & Diff Unified/Comment? */
--highlight-gd: #f92672; /* Generic.Deleted & Diff Deleted */
/* My styles */
--highlight-lineno: #6c6c6d;
--highlight-lineno-border: #3c4042;
}
pre {
color: #818c96; /* override Bootstrap */
}
}

View file

@ -18,7 +18,7 @@
} }
#archives li:nth-child(odd) { #archives li:nth-child(odd) {
background-color: #fff; background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
} }
@ -56,8 +56,8 @@
top: -26px; top: -26px;
left: 63px; left: 63px;
border: 3px solid; border: 3px solid;
background-color: #ffffff; background-color: var(--main-border, #ffffff);
border-color: #c2c6cc; border-color: var(--timeline-node-bg, #c2c6cc);
box-shadow: 0 0 2px 0 #c2c6cc; box-shadow: 0 0 2px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
@ -103,7 +103,7 @@
float: left; float: left;
top: 1.35rem; top: 1.35rem;
left: 69px; left: 69px;
background-color: #c2c6cc; background-color: var(--timeline-node-bg, #c2c6cc);
box-shadow: 0 0 3px 0 #c2c6cc; box-shadow: 0 0 3px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
@ -117,7 +117,7 @@
display: inline-block; display: inline-block;
float: left; float: left;
position: relative; position: relative;
background-color: rgba(0, 0, 0, 0.075); background-color: var(--main-border, rgba(0, 0, 0, 0.075));
} }
#archives ul>li::after { #archives ul>li::after {
@ -139,7 +139,6 @@
} }
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#archives { #archives {
margin-top: -1rem; margin-top: -1rem;
} }
@ -148,3 +147,10 @@
letter-spacing: 0; letter-spacing: 0;
} }
} }
@media (prefers-color-scheme: dark) {
#archives li:nth-child(odd) {
background-image: linear-gradient(to left,
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
}
}

View file

@ -48,7 +48,7 @@
@media (hover: hover) { // only works on desktop @media (hover: hover) { // only works on desktop
.category-trigger:hover { .category-trigger:hover {
background-color: #e9ecef; background-color: var(--categories-hover-bg, #e9ecef);
} }
} }
@ -64,3 +64,21 @@
-webkit-transform: rotate(-90deg); /* Safari 3-8 */ -webkit-transform: rotate(-90deg); /* Safari 3-8 */
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@media (prefers-color-scheme: dark) {
.categories.card,
.list-group-item {
background-color: var(--card-bg);
}
.categories .card-header {
background-color: var(--card-header-bg);
}
.categories .list-group-item {
border-left: none;
border-right: none;
padding-left: 2rem;
border-color: var(--main-border);
}
}

View file

@ -53,7 +53,7 @@
.dash { .dash {
margin: 0 .5rem .6rem .5rem; margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted silver; border-bottom: 2px dotted var(--main-border, silver);
} }
@media all and (max-width: 576px) { @media all and (max-width: 576px) {

View file

@ -41,7 +41,7 @@
.post-preview .post-content { .post-preview .post-content {
margin-top: .6rem; margin-top: .6rem;
margin-bottom: .6rem; margin-bottom: .6rem;
color: dimgray; color: var(--text-color, dimgray);
} }
/* Make preview shorter in Home page*/ /* Make preview shorter in Home page*/
@ -67,19 +67,21 @@
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
border: 1px solid #f1f1f1; border: 1px solid var(--main-border, #f1f1f1);
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
background-color: var(--button-bg);
} }
.page-item.active .page-link { .page-item.active .page-link {
background-color: #2a408e; background-color: #2a408e;
box-shadow: 0 0 8px 0 #4b92d2 !important; box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
color: #f8f8f8; color: var(--text-color, #f8f8f8);
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
color: rgba(108, 117, 125, 0.57); color: rgba(108, 117, 125, 0.57);
border-color: #f1f1f1; border-color: var(--main-border, #f1f1f1);
background-color: var(--button-bg);
} }
.page-item.disabled { .page-item.disabled {
@ -130,3 +132,10 @@
padding-right: 0; padding-right: 0;
} }
} }
@media (prefers-color-scheme: dark) {
.page-item.active .page-link {
background-color: #203a96;
border-color: #0252a9;
}
}

View file

@ -9,6 +9,7 @@
*/ */
@import "_fonts"; @import "_fonts";
@import "_dark/dark-main";
html, body { html, body {
height: 100%; height: 100%;
@ -23,7 +24,7 @@ html {
body { body {
line-height: 1.75rem; line-height: 1.75rem;
background: #fafafa; background: #fafafa;
color: #212529; color: var(--text-color, #212529);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
} }
@ -43,7 +44,8 @@ body {
-webkit-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease;
transition: transform 0.4s ease; transition: transform 0.4s ease;
background: rgb(42, 30, 107); background: rgb(42, 30, 107);
background: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%); background: var(--sidebar-bg,
radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
} }
#sidebar a { #sidebar a {
@ -122,7 +124,7 @@ body {
position: relative; position: relative;
width: 3px; width: 3px;
height: 26px; height: 26px;
background: #fcfcfc;; background-color: var(--nav-cursor, #fcfcfc);
pointer-events: none; pointer-events: none;
} }
@ -245,6 +247,7 @@ body {
z-index: 50; z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
background-color: var(--topbar-wrapper-bg, white);
} }
#topbar i { // icons #topbar i { // icons
@ -271,8 +274,8 @@ body {
display: flex; display: flex;
width: 95%; width: 95%;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid #fff; border: 1px solid var(--search-wrapper-bg, #fff);
background: #f5f5f5; background: var(--search-wrapper-bg, #f5f5f5);
padding: 0 .5rem; padding: 0 .5rem;
transition: background-color .15s ease-in-out,border-color .15s ease-in-out; transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
} }
@ -280,7 +283,7 @@ body {
#search-wrapper i { #search-wrapper i {
z-index: 2; z-index: 2;
font-size: .9rem; font-size: .9rem;
color: #c2c6cc; color: var(--search-icon, #c2c6cc);
} }
#search-wrapper .fa-times-circle { /* button 'clean up' */ #search-wrapper .fa-times-circle { /* button 'clean up' */
@ -298,6 +301,7 @@ body {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
padding: .18rem .3rem; padding: .18rem .3rem;
color: var(--text-color);
} }
#search-input:focus { #search-input:focus {
@ -318,7 +322,7 @@ body {
display: inline-block; display: inline-block;
line-height: 1rem; line-height: 1rem;
font-size: 1rem; font-size: 1rem;
background: #f8f9fa; background: var(--tag-bg, #f8f9fa);
border: none; border: none;
padding: .5rem; padding: .5rem;
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
@ -366,7 +370,7 @@ body {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
color: rgb(78, 78, 78); color: var(--text-color, rgb(78, 78, 78));
text-align: center; text-align: center;
width: 70%; width: 70%;
overflow: hidden; overflow: hidden;
@ -384,7 +388,7 @@ body {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #c1c3c5; background: var(--mask-bg, #c1c3c5);
opacity: 0.5; opacity: 0.5;
z-index: 1; z-index: 1;
} }
@ -396,6 +400,7 @@ body {
/*--- main wrapper ---*/ /*--- main wrapper ---*/
#main-wrapper { #main-wrapper {
background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
position: relative; position: relative;
min-height: 100%; min-height: 100%;
padding-bottom: 6rem; /* equals to or greatter than footer's height */ padding-bottom: 6rem; /* equals to or greatter than footer's height */
@ -435,7 +440,8 @@ footer {
padding: 1rem; padding: 1rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #7a7b7d; color: #7a7b7d;
background: #f3f3f3; background-color: var(--footer-bg, #f3f3f3);
border-top: 1px solid var(--footer-border, #f3f3f3);
} }
footer>div.d-flex { footer>div.d-flex {
@ -512,7 +518,7 @@ footer .license a {
line-height: 1rem; line-height: 1rem;
font-size: 0.85rem; font-size: 0.85rem;
background: none; background: none;
border: 1px solid #e9ecef; border: 1px solid var(--main-border, #e9ecef);
border-radius: .8rem; border-radius: .8rem;
padding: .3rem .5rem; padding: .3rem .5rem;
margin: 0 .35rem .5rem 0; margin: 0 .35rem .5rem 0;
@ -546,12 +552,12 @@ footer .license a {
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
background: #fff; background: var(--button-bg, #fff);
color: #686868; color: #686868;
height: 2.6em; height: 2.6em;
width: 2.7em; width: 2.7em;
border-radius: 50%; border-radius: 50%;
border: 1px solid #f1f1f1; border: 1px solid var(--main-border, #f1f1f1);
transition: 0.2s ease-out; transition: 0.2s ease-out;
-webkit-transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out;
} }
@ -591,13 +597,13 @@ h2, h3, h4 {
} }
blockquote { blockquote {
border-left: 5px solid #eee; border-left: 5px solid var(--blockquote-border, #eee);
padding-left: 1rem; padding-left: 1rem;
color: #9a9a9a; color: var(--blockquote-text, #9a9a9a);
} }
.post-content blockquote a { .post-content blockquote a {
color: #2a408e; color: var(--link-color, #2a408e);
} }
kbd { kbd {
@ -655,8 +661,8 @@ a.reversefootnote {
} }
.post-content a { .post-content a {
color: #2a408e; color: var(--link-color, #2a408e);
border-bottom: 1px dotted #c2c6cc; border-bottom: 1px dotted var(--link-color, #c2c6cc);
} }
p>a, span>a, p>a, span>a,
@ -667,7 +673,7 @@ p>a, span>a,
#page-tag a, #page-tag a,
#archives a, #archives a,
#search-results a { #search-results a {
color: #2a408e; color: var(--link-color, #2a408e);
} }
.categories a, .categories a,
@ -717,11 +723,11 @@ table thead {
} }
table thead+tbody tr { table thead+tbody tr {
border-bottom: solid 1px rgba(210, 215, 217, 0.75); border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
} }
table thead+tbody tr:nth-child(2n + 1) { table thead+tbody tr:nth-child(2n + 1) {
background-color: #f8f9fa; background-color: var(--tb-odd-bg, #f8f9fa);
} }
table thead th, table thead th,
@ -742,8 +748,8 @@ table tbody td {
} }
.post-meta a { .post-meta a {
color: #2a408e; color: var(--link-color, #2a408e);
border-bottom: 1px dotted #c2c6cc; border-bottom: 1px dotted var(--link-color, #c2c6cc);
} }
.post-meta a:not(:last-child) { .post-meta a:not(:last-child) {
@ -762,7 +768,7 @@ table tbody td {
display: inline-block; display: inline-block;
min-width: 2rem; min-width: 2rem;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.075); background: var(--tag-bg, rgba(0, 0, 0, 0.075));
border-radius: .34rem; border-radius: .34rem;
padding: 0 .4rem; padding: 0 .4rem;
margin: 0 .1rem; margin: 0 .1rem;
@ -772,7 +778,7 @@ table tbody td {
.tag:hover, .tag:hover,
.post-tag:hover { .post-tag:hover {
background: rgb(222, 226, 230); background: var(--tag-hover, rgb(222, 226, 230));
transition: background 0.35s ease-in-out; transition: background 0.35s ease-in-out;
} }
@ -815,7 +821,7 @@ table tbody td {
} }
.btn-box-shadow { .btn-box-shadow {
box-shadow: 0 0 8px 0 #eaeaea!important; box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important;
} }
.topbar-up { .topbar-up {
@ -843,7 +849,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
.input-focus { .input-focus {
box-shadow: none; box-shadow: none;
border-color: #e9ecef !important; border-color: var(--input-focus-border, #e9ecef) !important;
background: center !important; background: center !important;
} }

View file

@ -23,7 +23,7 @@
.post-tail { .post-tail {
margin-top: 3.5rem; margin-top: 3.5rem;
border-bottom: 1px double #e9ecef; border-bottom: 1px double var(--main-border, #e9ecef);
font-size: 0.85rem; font-size: 0.85rem;
} }
@ -36,8 +36,8 @@
.post-navigation .btn.disabled { .post-navigation .btn.disabled {
width: 50%; width: 50%;
position: relative; position: relative;
color: #2a408e; color: var(--link-color, #2a408e);
border-color: #e9ecef; border-color: var(--main-border, #e9ecef);
} }
.post-navigation .btn:hover { .post-navigation .btn:hover {
@ -51,7 +51,7 @@
cursor: not-allowed; cursor: not-allowed;
background: none; background: none;
color: gray; color: gray;
border-color: #e9ecef; border-color: var(--main-border, #e9ecef);
} }
.post-navigation a.btn.btn-outline-primary.disabled:focus { .post-navigation a.btn.btn-outline-primary.disabled:focus {
@ -138,8 +138,9 @@
} }
#related-posts .card { #related-posts .card {
border: 1px solid #f1f1f1; border: 1px solid var(--main-wrapper-bg, #f1f1f1);
box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922); background-color: var(--card-bg);
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
-webkit-transition: all .3s ease-in-out;; -webkit-transition: all .3s ease-in-out;;
-moz-transition: all .3s ease-in-out;; -moz-transition: all .3s ease-in-out;;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
@ -152,7 +153,7 @@
} }
#related-posts .card h3 { #related-posts .card h3 {
color: #353a3d; color: var(--relate-post-title, #353a3d);
} }
#related-posts .timeago { #related-posts .timeago {
@ -194,7 +195,6 @@
min-height: 2rem; min-height: 2rem;
} }
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
.post img { .post img {
max-width: calc(100% + 1rem); max-width: calc(100% + 1rem);
@ -266,3 +266,15 @@
margin-right: calc((100% - 1150px) / 8 + 300px); margin-right: calc((100% - 1150px) / 8 + 300px);
} }
} }
@media (prefers-color-scheme: dark) {
nav[data-toggle=toc] .nav-link.active,
nav[data-toggle=toc] .nav-link.active:focus,
nav[data-toggle=toc] .nav-link.active:hover,
nav[data-toggle=toc] .nav>li>a:focus,
nav[data-toggle=toc] .nav>li>a:hover {
/* Override BS */
color: var(--toc-highlight)!important;
border-left-color: var(--toc-highlight)!important;
}
}

View file

@ -8,68 +8,71 @@
* MIT Licensed * MIT Licensed
*/ */
/* https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */ @import "_dark/dark-syntax";
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #999988; font-style: italic } /* Comment */ /* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight pre { background-color: var(--highlight-pre-bg) }
.highlight .k { color: #000000; font-weight: bold } /* Keyword */ .highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
.highlight .o { color: #000000; font-weight: bold } /* Operator */ .highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ .highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ .highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ .highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ .highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ .highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
.highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gh { color: #999999 } /* Generic.Heading */ .highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
.highlight .go { color: #888888 } /* Generic.Output */ .highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
.highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: var(#888888) } /* Generic.Output */
.highlight .gp { color: var(#555555) } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ .highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ .highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ .highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ .highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ .highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ .highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ .highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */ .highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
.highlight .s { color: #d01040 } /* Literal.String */ .highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */ .highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */ .highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ .highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */ .highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ .highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #800080 } /* Name.Entity */ .highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ .highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ .highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ .highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
.highlight .nn { color: #555555 } /* Name.Namespace */ .highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */ .highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */ .highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ .highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */ .highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */ .highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */ .highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */ .highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */ .highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
.highlight .sc { color: #d01040 } /* Literal.String.Char */ .highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
.highlight .sd { color: #d01040 } /* Literal.String.Doc */ .highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
.highlight .s2 { color: #d01040 } /* Literal.String.Double */ .highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
.highlight .se { color: #d01040 } /* Literal.String.Escape */ .highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ .highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
.highlight .si { color: #d01040 } /* Literal.String.Interpol */ .highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
.highlight .sx { color: #d01040 } /* Literal.String.Other */ .highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */ .highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
.highlight .s1 { color: #d01040 } /* Literal.String.Single */ .highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */ .highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ .highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */ .highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */ .highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ .highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
/*-- Codes Snippet --*/ /*-- Codes Snippet --*/
@ -77,14 +80,11 @@
div.highlight, div.highlight,
figure.highlight, figure.highlight,
.highlighter-rouge { .highlighter-rouge {
background: #f7f7f7; background: var(--highlight-pre-bg, #f7f7f7)
} }
.highlight { .highlight {
overflow: auto; overflow: auto;
-moz-box-shadow: inset 0 0 2px #c2c6cc;
-webkit-box-shadow: inset 0 0 2px #c2c6cc;
box-shadow: inset 0 0 2px #c2c6cc;
} }
.highlight .lineno { .highlight .lineno {
@ -92,8 +92,8 @@ figure.highlight,
padding: 0 .5rem; padding: 0 .5rem;
min-width: 2.2rem; min-width: 2.2rem;
text-align: right; text-align: right;
color: #c2c6cc; color: var(--highlight-lineno, #c2c6cc);
border-right: 1px solid #e9ecef; border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -125,7 +125,6 @@ figure.highlight,
/* Override BS Inline-code style */ /* Override BS Inline-code style */
.highlighter-rouge { .highlighter-rouge {
color: black;
margin-bottom: 1.2em; margin-bottom: 1.2em;
} }
@ -140,7 +139,6 @@ code.highlighter-rouge {
padding: 2px 4px; padding: 2px 4px;
margin: 0 .3rem; margin: 0 .3rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e9ecef;
} }
td.rouge-code { td.rouge-code {
@ -166,3 +164,19 @@ div.language-console.highlighter-rouge td.rouge-code,
div.language-terminal.highlighter-rouge td.rouge-code { div.language-terminal.highlighter-rouge td.rouge-code {
padding: .8rem 1rem; padding: .8rem 1rem;
} }
@media (prefers-color-scheme: light) {
.highlight {
-moz-box-shadow: inset 0 0 2px #c2c6cc;
-webkit-box-shadow: inset 0 0 2px #c2c6cc;
box-shadow: inset 0 0 2px #c2c6cc;
}
.highlighter-rouge {
color: black;
}
code.highlighter-rouge {
border: 1px solid #e9ecef;
}
}

View file

@ -15,8 +15,8 @@
margin-right: .8rem; margin-right: .8rem;
line-height: 3rem; line-height: 3rem;
letter-spacing: 0; letter-spacing: 0;
border: 1px solid #dee2e6 !important; border: 1px solid var(--tag-border, #dee2e6) !important;
box-shadow: 0 0 3px 0 #e9ecef; box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
} }
.tag span { .tag span {