From 6418e50961c367e28620c7de315ef47e7f21bb94 Mon Sep 17 00:00:00 2001 From: Thomas Hebb Date: Thu, 24 Aug 2023 09:58:54 -0400 Subject: [PATCH] Add a dark theme for code blocks Now that code highlighting is just a normal stylesheet, it's easy to add a separate set of dark-mode rules. Do so and update the documentation. Fixes #24 --- _config.yml | 15 +++- _sass/yat/_dark.scss | 4 + assets/css/code-highlight-rouge.css | 112 ++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index 6bcf0288489..a2fcfd22cfe 100644 --- a/_config.yml +++ b/_config.yml @@ -156,13 +156,20 @@ yat: # use. This setting affects both Markdown code blocks and Liquid `highlight` # blocks. You can set it to `none` to disable highlighting. # -# By default, we highlight code with Rouge's "github.light" theme. If you want -# to change that, you can override `assets/css/code-highlight-rouge.css` with a -# different stylesheet generated with Rouge's `rougify` command. If you do so, -# you must set the CSS scope to `.highlight pre` for proper rendering: +# By default, we highlight code with Rouge's "github.light" and `github.dark` +# themes for light and dark mode, respectively. If you want to change that, you +# can override `assets/css/code-highlight-rouge.css` with a different +# stylesheet generated with Rouge's `rougify` command. If you do so, you must +# set the CSS scope to `.highlight pre` for your light-mode theme: # # $ mkdir -p assets/css # $ bundle exec rougify style --scope '.highlight pre' >assets/css/code-highlight-rouge.css +# +# ...and to `html[data-theme="dark"] .highlight pre` for your dark-mode theme. +# A dark-mode theme is optional, but if you want one just append its stylesheet +# to the same CSS file (note the >>): +# +# $ bundle exec rougify style --scope 'html[data-theme="dark"] .highlight pre' >>assets/css/code-highlight-rouge.css # highlighter: rouge # If you want to link only specific pages in your header, uncomment diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss index d9945fed122..0e8b6f75115 100644 --- a/_sass/yat/_dark.scss +++ b/_sass/yat/_dark.scss @@ -30,6 +30,10 @@ html[data-theme="dark"] { background-color: #454545; } + pre { + background-color: #222222; + } + blockquote { border-left: 4px solid #484848; } diff --git a/assets/css/code-highlight-rouge.css b/assets/css/code-highlight-rouge.css index 000faaa68da..e74c4056264 100644 --- a/assets/css/code-highlight-rouge.css +++ b/assets/css/code-highlight-rouge.css @@ -110,3 +110,115 @@ color: #24292f; font-weight: bold; } +html[data-theme="dark"] .highlight pre table td { padding: 5px; } +html[data-theme="dark"] .highlight pre table pre { margin: 0; } +html[data-theme="dark"] .highlight pre, html[data-theme="dark"] .highlight pre .w { + color: #c9d1d9; + background-color: #161b22; +} +html[data-theme="dark"] .highlight pre .k, html[data-theme="dark"] .highlight pre .kd, html[data-theme="dark"] .highlight pre .kn, html[data-theme="dark"] .highlight pre .kp, html[data-theme="dark"] .highlight pre .kr, html[data-theme="dark"] .highlight pre .kt, html[data-theme="dark"] .highlight pre .kv { + color: #ff7b72; +} +html[data-theme="dark"] .highlight pre .gr { + color: #f0f6fc; +} +html[data-theme="dark"] .highlight pre .gd { + color: #ffdcd7; + background-color: #67060c; +} +html[data-theme="dark"] .highlight pre .nb { + color: #ffa657; +} +html[data-theme="dark"] .highlight pre .nc { + color: #ffa657; +} +html[data-theme="dark"] .highlight pre .no { + color: #ffa657; +} +html[data-theme="dark"] .highlight pre .nn { + color: #ffa657; +} +html[data-theme="dark"] .highlight pre .sr { + color: #7ee787; +} +html[data-theme="dark"] .highlight pre .na { + color: #7ee787; +} +html[data-theme="dark"] .highlight pre .nt { + color: #7ee787; +} +html[data-theme="dark"] .highlight pre .gi { + color: #aff5b4; + background-color: #033a16; +} +html[data-theme="dark"] .highlight pre .kc { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .l, html[data-theme="dark"] .highlight pre .ld, html[data-theme="dark"] .highlight pre .m, html[data-theme="dark"] .highlight pre .mb, html[data-theme="dark"] .highlight pre .mf, html[data-theme="dark"] .highlight pre .mh, html[data-theme="dark"] .highlight pre .mi, html[data-theme="dark"] .highlight pre .il, html[data-theme="dark"] .highlight pre .mo, html[data-theme="dark"] .highlight pre .mx { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .sb { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .bp { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .ne { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .nl { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .py { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .nv, html[data-theme="dark"] .highlight pre .vc, html[data-theme="dark"] .highlight pre .vg, html[data-theme="dark"] .highlight pre .vi, html[data-theme="dark"] .highlight pre .vm { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .o, html[data-theme="dark"] .highlight pre .ow { + color: #79c0ff; +} +html[data-theme="dark"] .highlight pre .gh { + color: #1f6feb; + font-weight: bold; +} +html[data-theme="dark"] .highlight pre .gu { + color: #1f6feb; + font-weight: bold; +} +html[data-theme="dark"] .highlight pre .s, html[data-theme="dark"] .highlight pre .sa, html[data-theme="dark"] .highlight pre .sc, html[data-theme="dark"] .highlight pre .dl, html[data-theme="dark"] .highlight pre .sd, html[data-theme="dark"] .highlight pre .s2, html[data-theme="dark"] .highlight pre .se, html[data-theme="dark"] .highlight pre .sh, html[data-theme="dark"] .highlight pre .sx, html[data-theme="dark"] .highlight pre .s1, html[data-theme="dark"] .highlight pre .ss { + color: #a5d6ff; +} +html[data-theme="dark"] .highlight pre .nd { + color: #d2a8ff; +} +html[data-theme="dark"] .highlight pre .nf, html[data-theme="dark"] .highlight pre .fm { + color: #d2a8ff; +} +html[data-theme="dark"] .highlight pre .err { + color: #f0f6fc; + background-color: #8e1519; +} +html[data-theme="dark"] .highlight pre .c, html[data-theme="dark"] .highlight pre .ch, html[data-theme="dark"] .highlight pre .cd, html[data-theme="dark"] .highlight pre .cm, html[data-theme="dark"] .highlight pre .cp, html[data-theme="dark"] .highlight pre .cpf, html[data-theme="dark"] .highlight pre .c1, html[data-theme="dark"] .highlight pre .cs { + color: #8b949e; +} +html[data-theme="dark"] .highlight pre .gl { + color: #8b949e; +} +html[data-theme="dark"] .highlight pre .gt { + color: #8b949e; +} +html[data-theme="dark"] .highlight pre .ni { + color: #c9d1d9; +} +html[data-theme="dark"] .highlight pre .si { + color: #c9d1d9; +} +html[data-theme="dark"] .highlight pre .ge { + color: #c9d1d9; + font-style: italic; +} +html[data-theme="dark"] .highlight pre .gs { + color: #c9d1d9; + font-weight: bold; +}