diff --git a/_includes/topbar.html b/_includes/topbar.html index 79e16d2..8ee6880 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -5,7 +5,7 @@ © 2017-2019 Cotes Chung MIT License --> -
+
{% for item in page.breadcrumb %} diff --git a/_layouts/default.html b/_layouts/default.html index 22b0084..a646ae9 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,7 +16,7 @@ layout: compress -
+
{% include topbar.html %}
diff --git a/_layouts/page.html b/_layouts/page.html index 86a674e..58dbc81 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -7,7 +7,7 @@ layout: default # MIT License --- -
+
{% if page.dynamic_title %} diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss new file mode 100644 index 0000000..8afe8cf --- /dev/null +++ b/assets/css/_dark/dark-main.scss @@ -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); + } +} \ No newline at end of file diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss new file mode 100644 index 0000000..3c16175 --- /dev/null +++ b/assets/css/_dark/dark-syntax.scss @@ -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 */ + } + +} \ No newline at end of file diff --git a/assets/css/archives.scss b/assets/css/archives.scss index 0f16254..7092881 100644 --- a/assets/css/archives.scss +++ b/assets/css/archives.scss @@ -18,7 +18,7 @@ } #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); } @@ -56,8 +56,8 @@ top: -26px; left: 63px; border: 3px solid; - background-color: #ffffff; - border-color: #c2c6cc; + background-color: var(--main-border, #ffffff); + border-color: var(--timeline-node-bg, #c2c6cc); box-shadow: 0 0 2px 0 #c2c6cc; z-index: 1; } @@ -103,7 +103,7 @@ float: left; top: 1.35rem; left: 69px; - background-color: #c2c6cc; + background-color: var(--timeline-node-bg, #c2c6cc); box-shadow: 0 0 3px 0 #c2c6cc; z-index: 1; } @@ -117,7 +117,7 @@ display: inline-block; float: left; 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 { @@ -139,7 +139,6 @@ } @media all and (max-width: 576px) { - #archives { margin-top: -1rem; } @@ -148,3 +147,10 @@ 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)); + } +} diff --git a/assets/css/categories.scss b/assets/css/categories.scss index d165662..01ff4a9 100644 --- a/assets/css/categories.scss +++ b/assets/css/categories.scss @@ -48,7 +48,7 @@ @media (hover: hover) { // only works on desktop .category-trigger:hover { - background-color: #e9ecef; + background-color: var(--categories-hover-bg, #e9ecef); } } @@ -64,3 +64,21 @@ -webkit-transform: rotate(-90deg); /* Safari 3-8 */ 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); + } +} diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss index ee9185e..58c3302 100644 --- a/assets/css/category-tag.scss +++ b/assets/css/category-tag.scss @@ -53,7 +53,7 @@ .dash { margin: 0 .5rem .6rem .5rem; - border-bottom: 2px dotted silver; + border-bottom: 2px dotted var(--main-border, silver); } @media all and (max-width: 576px) { diff --git a/assets/css/home.scss b/assets/css/home.scss index cbbc486..f6f24f3 100644 --- a/assets/css/home.scss +++ b/assets/css/home.scss @@ -41,7 +41,7 @@ .post-preview .post-content { margin-top: .6rem; margin-bottom: .6rem; - color: dimgray; + color: var(--text-color, dimgray); } /* Make preview shorter in Home page*/ @@ -67,19 +67,21 @@ -webkit-box-align: center; align-items: center; border-radius: 50%; - border: 1px solid #f1f1f1; + border: 1px solid var(--main-border, #f1f1f1); font-family: 'Lato', sans-serif; + background-color: var(--button-bg); } .page-item.active .page-link { background-color: #2a408e; - box-shadow: 0 0 8px 0 #4b92d2 !important; - color: #f8f8f8; + box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important; + color: var(--text-color, #f8f8f8); } .page-item.disabled .page-link { color: rgba(108, 117, 125, 0.57); - border-color: #f1f1f1; + border-color: var(--main-border, #f1f1f1); + background-color: var(--button-bg); } .page-item.disabled { @@ -129,4 +131,11 @@ #post-list { padding-right: 0; } +} + +@media (prefers-color-scheme: dark) { + .page-item.active .page-link { + background-color: #203a96; + border-color: #0252a9; + } } \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index 90eae33..fc32cbe 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -9,6 +9,7 @@ */ @import "_fonts"; +@import "_dark/dark-main"; html, body { height: 100%; @@ -23,7 +24,7 @@ html { body { line-height: 1.75rem; background: #fafafa; - color: #212529; + color: var(--text-color, #212529); -webkit-font-smoothing: antialiased; font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; } @@ -43,7 +44,8 @@ body { -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; 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 { @@ -122,7 +124,7 @@ body { position: relative; width: 3px; height: 26px; - background: #fcfcfc;; + background-color: var(--nav-cursor, #fcfcfc); pointer-events: none; } @@ -245,6 +247,7 @@ body { z-index: 50; border-bottom: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05); + background-color: var(--topbar-wrapper-bg, white); } #topbar i { // icons @@ -271,8 +274,8 @@ body { display: flex; width: 95%; border-radius: 1rem; - border: 1px solid #fff; - background: #f5f5f5; + border: 1px solid var(--search-wrapper-bg, #fff); + background: var(--search-wrapper-bg, #f5f5f5); padding: 0 .5rem; transition: background-color .15s ease-in-out,border-color .15s ease-in-out; } @@ -280,7 +283,7 @@ body { #search-wrapper i { z-index: 2; font-size: .9rem; - color: #c2c6cc; + color: var(--search-icon, #c2c6cc); } #search-wrapper .fa-times-circle { /* button 'clean up' */ @@ -298,6 +301,7 @@ body { border: 0; border-radius: 0; padding: .18rem .3rem; + color: var(--text-color); } #search-input:focus { @@ -318,7 +322,7 @@ body { display: inline-block; line-height: 1rem; font-size: 1rem; - background: #f8f9fa; + background: var(--tag-bg, #f8f9fa); border: none; padding: .5rem; margin: 0 1rem 1rem 0; @@ -366,7 +370,7 @@ body { font-size: 1.1rem; font-weight: 600; font-family: sans-serif; - color: rgb(78, 78, 78); + color: var(--text-color, rgb(78, 78, 78)); text-align: center; width: 70%; overflow: hidden; @@ -384,7 +388,7 @@ body { left: 0; height: 100%; width: 100%; - background: #c1c3c5; + background: var(--mask-bg, #c1c3c5); opacity: 0.5; z-index: 1; } @@ -396,6 +400,7 @@ body { /*--- main wrapper ---*/ #main-wrapper { + background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30); position: relative; min-height: 100%; padding-bottom: 6rem; /* equals to or greatter than footer's height */ @@ -435,7 +440,8 @@ footer { padding: 1rem; font-size: 0.8rem; color: #7a7b7d; - background: #f3f3f3; + background-color: var(--footer-bg, #f3f3f3); + border-top: 1px solid var(--footer-border, #f3f3f3); } footer>div.d-flex { @@ -512,7 +518,7 @@ footer .license a { line-height: 1rem; font-size: 0.85rem; background: none; - border: 1px solid #e9ecef; + border: 1px solid var(--main-border, #e9ecef); border-radius: .8rem; padding: .3rem .5rem; margin: 0 .35rem .5rem 0; @@ -546,12 +552,12 @@ footer .license a { z-index: 1; cursor: pointer; position: fixed; - background: #fff; + background: var(--button-bg, #fff); color: #686868; height: 2.6em; width: 2.7em; border-radius: 50%; - border: 1px solid #f1f1f1; + border: 1px solid var(--main-border, #f1f1f1); transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out; } @@ -591,13 +597,13 @@ h2, h3, h4 { } blockquote { - border-left: 5px solid #eee; + border-left: 5px solid var(--blockquote-border, #eee); padding-left: 1rem; - color: #9a9a9a; + color: var(--blockquote-text, #9a9a9a); } .post-content blockquote a { - color: #2a408e; + color: var(--link-color, #2a408e); } kbd { @@ -655,8 +661,8 @@ a.reversefootnote { } .post-content a { - color: #2a408e; - border-bottom: 1px dotted #c2c6cc; + color: var(--link-color, #2a408e); + border-bottom: 1px dotted var(--link-color, #c2c6cc); } p>a, span>a, @@ -667,7 +673,7 @@ p>a, span>a, #page-tag a, #archives a, #search-results a { - color: #2a408e; + color: var(--link-color, #2a408e); } .categories a, @@ -717,11 +723,11 @@ table thead { } 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) { - background-color: #f8f9fa; + background-color: var(--tb-odd-bg, #f8f9fa); } table thead th, @@ -742,8 +748,8 @@ table tbody td { } .post-meta a { - color: #2a408e; - border-bottom: 1px dotted #c2c6cc; + color: var(--link-color, #2a408e); + border-bottom: 1px dotted var(--link-color, #c2c6cc); } .post-meta a:not(:last-child) { @@ -762,7 +768,7 @@ table tbody td { display: inline-block; min-width: 2rem; text-align: center; - background: rgba(0, 0, 0, 0.075); + background: var(--tag-bg, rgba(0, 0, 0, 0.075)); border-radius: .34rem; padding: 0 .4rem; margin: 0 .1rem; @@ -772,7 +778,7 @@ table tbody td { .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; } @@ -815,7 +821,7 @@ table tbody td { } .btn-box-shadow { - box-shadow: 0 0 8px 0 #eaeaea!important; + box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important; } .topbar-up { @@ -843,7 +849,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */ .input-focus { box-shadow: none; - border-color: #e9ecef !important; + border-color: var(--input-focus-border, #e9ecef) !important; background: center !important; } diff --git a/assets/css/post.scss b/assets/css/post.scss index 3292574..947c94f 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -23,7 +23,7 @@ .post-tail { margin-top: 3.5rem; - border-bottom: 1px double #e9ecef; + border-bottom: 1px double var(--main-border, #e9ecef); font-size: 0.85rem; } @@ -36,8 +36,8 @@ .post-navigation .btn.disabled { width: 50%; position: relative; - color: #2a408e; - border-color: #e9ecef; + color: var(--link-color, #2a408e); + border-color: var(--main-border, #e9ecef); } .post-navigation .btn:hover { @@ -51,7 +51,7 @@ cursor: not-allowed; background: none; color: gray; - border-color: #e9ecef; + border-color: var(--main-border, #e9ecef); } .post-navigation a.btn.btn-outline-primary.disabled:focus { @@ -138,8 +138,9 @@ } #related-posts .card { - border: 1px solid #f1f1f1; - box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922); + border: 1px solid var(--main-wrapper-bg, #f1f1f1); + 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;; -moz-transition: all .3s ease-in-out;; transition: all .3s ease-in-out; @@ -152,7 +153,7 @@ } #related-posts .card h3 { - color: #353a3d; + color: var(--relate-post-title, #353a3d); } #related-posts .timeago { @@ -194,7 +195,6 @@ min-height: 2rem; } - @media all and (max-width: 768px) { .post img { max-width: calc(100% + 1rem); @@ -266,3 +266,15 @@ 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; + } +} diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 6086b5c..9a0091a 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -8,68 +8,71 @@ * MIT Licensed */ -/* https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */ -.highlight .hll { background-color: #ffffcc } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { color: #000000; font-weight: bold } /* Keyword */ -.highlight .o { color: #000000; font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ +@import "_dark/dark-syntax"; + +/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */ +.highlight pre { background-color: var(--highlight-pre-bg) } +.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) } +.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */ +.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */ +.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */ +.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */ +.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */ +.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */ +.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */ +.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */ +.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */ +.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 .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d01040 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d01040 } /* Literal.String.Backtick */ -.highlight .sc { color: #d01040 } /* Literal.String.Char */ -.highlight .sd { color: #d01040 } /* Literal.String.Doc */ -.highlight .s2 { color: #d01040 } /* Literal.String.Double */ -.highlight .se { color: #d01040 } /* Literal.String.Escape */ -.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ -.highlight .si { color: #d01040 } /* Literal.String.Interpol */ -.highlight .sx { color: #d01040 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d01040 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ +.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */ +.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */ +.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */ +.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */ +.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */ +.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */ +.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */ +.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */ +.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */ +.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */ +.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */ +.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */ +.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */ +.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */ +.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */ +.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */ +.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */ +.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */ +.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */ +.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */ +.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */ +.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */ +.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */ +.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */ +.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */ +.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */ +.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */ +.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */ +.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */ +.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */ +.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */ +.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */ +.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */ +.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */ +.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */ +.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */ +.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */ +.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */ +.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */ /*-- Codes Snippet --*/ @@ -77,14 +80,11 @@ div.highlight, figure.highlight, .highlighter-rouge { - background: #f7f7f7; + background: var(--highlight-pre-bg, #f7f7f7) } .highlight { 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 { @@ -92,8 +92,8 @@ figure.highlight, padding: 0 .5rem; min-width: 2.2rem; text-align: right; - color: #c2c6cc; - border-right: 1px solid #e9ecef; + color: var(--highlight-lineno, #c2c6cc); + border-right: 1px solid var(--highlight-lineno-border, #e9ecef); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; @@ -125,7 +125,6 @@ figure.highlight, /* Override BS Inline-code style */ .highlighter-rouge { - color: black; margin-bottom: 1.2em; } @@ -140,7 +139,6 @@ code.highlighter-rouge { padding: 2px 4px; margin: 0 .3rem; border-radius: 4px; - border: 1px solid #e9ecef; } td.rouge-code { @@ -166,3 +164,19 @@ div.language-console.highlighter-rouge td.rouge-code, div.language-terminal.highlighter-rouge td.rouge-code { 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; + } +} diff --git a/assets/css/tags.scss b/assets/css/tags.scss index d4327dd..8dc4613 100644 --- a/assets/css/tags.scss +++ b/assets/css/tags.scss @@ -15,8 +15,8 @@ margin-right: .8rem; line-height: 3rem; letter-spacing: 0; - border: 1px solid #dee2e6 !important; - box-shadow: 0 0 3px 0 #e9ecef; + border: 1px solid var(--tag-border, #dee2e6) !important; + box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef); } .tag span {