From 8347139ff582341246975f047f04b4848f6e5af9 Mon Sep 17 00:00:00 2001 From: Soso Date: Sat, 21 Jan 2023 20:24:40 +0100 Subject: book: Use per-theme syntax-highlighting CSS variables (#5406) Until this patch, all themes used the Colibri values for syntax highlighting. This made the documentation very hard to read in some light themes.--- book/theme/css/variables.css | 71 +++++++++++++++++++++++++++++++++++++++++++- book/theme/highlight.css | 16 +++++----- 2 files changed, 78 insertions(+), 9 deletions(-) diff --git a/book/theme/css/variables.css b/book/theme/css/variables.css index 1bf91b19..5d0978cc 100644 --- a/book/theme/css/variables.css +++ b/book/theme/css/variables.css @@ -48,6 +48,18 @@ --searchresults-border-color: #888; --searchresults-li-bg: #252932; --search-mark-bg: #e3b171; + --hljs-background: #191f26; + --hljs-color: #e6e1cf; + --hljs-quote: #5c6773; + --hljs-variable: #ff7733; + --hljs-type: #ffee99; + --hljs-title: #b8cc52; + --hljs-symbol: #ffb454; + --hljs-selector-tag: #ff7733; + --hljs-selector-tag: #36a3d9; + --hljs-selector-tag: #00568d; + --hljs-selector-tag: #91b362; + --hljs-selector-tag: #d96c75; } .coal { @@ -88,6 +100,18 @@ --searchresults-border-color: #98a3ad; --searchresults-li-bg: #2b2b2f; --search-mark-bg: #355c7d; + --hljs-background: #969896; + --hljs-color: #cc6666; + --hljs-quote: #de935f; + --hljs-variable: #f0c674; + --hljs-type: #b5bd68; + --hljs-title: #8abeb7; + --hljs-symbol: #81a2be; + --hljs-selector-tag: #b294bb; + --hljs-selector-tag: #1d1f21; + --hljs-selector-tag: #c5c8c6; + --hljs-selector-tag: #718c00; + --hljs-selector-tag: #c82829; } .light { @@ -128,6 +152,14 @@ --searchresults-border-color: #888; --searchresults-li-bg: #e4f2fe; --search-mark-bg: #a2cff5; + --hljs-background: #f6f7f6; + --hljs-color: #000; + --hljs-quote: #575757; + --hljs-variable: #d70025; + --hljs-type: #b21e00; + --hljs-title: #0030f2; + --hljs-symbol: #008200; + --hljs-selector-tag: #9d00ec; } .navy { @@ -168,6 +200,19 @@ --searchresults-border-color: #5c5c68; --searchresults-li-bg: #242430; --search-mark-bg: #a2cff5; + + --hljs-background: #969896; + --hljs-color: #cc6666; + --hljs-quote: #de935f; + --hljs-variable: #f0c674; + --hljs-type: #b5bd68; + --hljs-title: #8abeb7; + --hljs-symbol: #81a2be; + --hljs-selector-tag: #b294bb; + --hljs-selector-tag: #1d1f21; + --hljs-selector-tag: #c5c8c6; + --hljs-selector-tag: #718c00; + --hljs-selector-tag: #c82829; } .rust { @@ -208,6 +253,14 @@ --searchresults-border-color: #888; --searchresults-li-bg: #dec2a2; --search-mark-bg: #e69f67; + --hljs-background: #f6f7f6; + --hljs-color: #000; + --hljs-quote: #575757; + --hljs-variable: #d70025; + --hljs-type: #b21e00; + --hljs-title: #0030f2; + --hljs-symbol: #008200; + --hljs-selector-tag: #9d00ec; } @media (prefers-color-scheme: dark) { @@ -292,7 +345,15 @@ --searchresults-header-fg: #5f5f71; --searchresults-border-color: #5c5c68; --searchresults-li-bg: #242430; - --search-mark-bg: #a2cff5; + --search-mark-bg: #acff5; + --hljs-background: #2f1e2e; + --hljs-color: #a39e9b; + --hljs-quote: #8d8687; + --hljs-variable: #ef6155; + --hljs-type: #f99b15; + --hljs-title: #fec418; + --hljs-symbol: #48b685; + --hljs-selector-tag: #815ba4; } .colibri { @@ -338,5 +399,13 @@ --searchresults-border-color: #5c5c68; --searchresults-li-bg: #242430; --search-mark-bg: #a2cff5; + --hljs-background: #TODO; + --hljs-color: #TODO; + --hljs-quote: #TODO; + --hljs-variable: #TODO; + --hljs-type: #TODO; + --hljs-title: #TODO; + --hljs-symbol: #TODO; + --hljs-selector-tag: #TODO; */ } diff --git a/book/theme/highlight.css b/book/theme/highlight.css index 8dce7d65..a2db0500 100644 --- a/book/theme/highlight.css +++ b/book/theme/highlight.css @@ -7,12 +7,12 @@ code.hljs { padding:3px 5px } .hljs { - background:#2f1e2e; - color:#a39e9b + background: var(--hljs-background); + color: var(--hljs-color); } .hljs-comment, .hljs-quote { - color:#8d8687 + color: var(--hljs-quote) } .hljs-link, .hljs-meta, @@ -23,7 +23,7 @@ code.hljs { .hljs-tag, .hljs-template-variable, .hljs-variable { - color:#ef6155 + color: var(--hljs-variable) } .hljs-built_in, .hljs-deletion, @@ -31,22 +31,22 @@ code.hljs { .hljs-number, .hljs-params, .hljs-type { - color:#f99b15 + color: var(--hljs-type) } .hljs-attribute, .hljs-section, .hljs-title { - color:#fec418 + color: var(--hljs-title) } .hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { - color:#48b685 + color: var(--hljs-symbol) } .hljs-keyword, .hljs-selector-tag { - color:#815ba4 + color: var(--hljs-selector-tag) } .hljs-emphasis { font-style:italic -- cgit v1.2.3-70-g09d2