From 910780f696c18bedc91206a7407f07e5258dcd79 Mon Sep 17 00:00:00 2001 From: Tim Small Date: Thu, 15 Oct 2020 18:07:35 +0100 Subject: [PATCH] Enhanced contrast theme, for users with visual restrictions etc. This adds a "contrast" theme, which (insofar as it can) makes mdBook's output compliant with the W3C's WCAG ("Web Content Accessibility Guidelines") https://www.w3.org/WAI/standards-guidelines/wcag/ --- src/renderer/html_handlebars/hbs_renderer.rs | 5 ++ src/theme/book.js | 10 +++ src/theme/contrast-highlight.css | 84 ++++++++++++++++++++ src/theme/css/variables.css | 40 ++++++++++ src/theme/index.hbs | 2 + src/theme/mod.rs | 9 +++ 6 files changed, 150 insertions(+) create mode 100644 src/theme/contrast-highlight.css diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 6b934b13cb..c395b76268 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -207,6 +207,11 @@ impl HtmlHandlebars { write_file(destination, "highlight.css", &theme.highlight_css)?; write_file(destination, "tomorrow-night.css", &theme.tomorrow_night_css)?; write_file(destination, "ayu-highlight.css", &theme.ayu_highlight_css)?; + write_file( + destination, + "contrast-highlight.css", + &theme.contrast_highlight_css, + )?; write_file(destination, "highlight.js", &theme.highlight_js)?; write_file(destination, "clipboard.min.js", &theme.clipboard_js)?; write_file( diff --git a/src/theme/book.js b/src/theme/book.js index 5e386369f7..211788f4d3 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -278,6 +278,7 @@ function playground_text(playground) { var themeColorMetaTag = document.querySelector('meta[name="theme-color"]'); var stylesheets = { ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"), + contrastHighlight: document.querySelector("[href$='contrast-highlight.css']"), tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"), highlight: document.querySelector("[href$='highlight.css']"), }; @@ -310,17 +311,26 @@ function playground_text(playground) { if (theme == 'coal' || theme == 'navy') { stylesheets.ayuHighlight.disabled = true; stylesheets.tomorrowNight.disabled = false; + stylesheets.contrastHighlight.disabled = true; stylesheets.highlight.disabled = true; ace_theme = "ace/theme/tomorrow_night"; } else if (theme == 'ayu') { stylesheets.ayuHighlight.disabled = false; stylesheets.tomorrowNight.disabled = true; + stylesheets.contrastHighlight.disabled = true; stylesheets.highlight.disabled = true; ace_theme = "ace/theme/tomorrow_night"; + } else if (theme == 'contrast') { + stylesheets.ayuHighlight.disabled = true; + stylesheets.tomorrowNight.disabled = true; + stylesheets.contrastHighlight.disabled = false; + stylesheets.highlight.disabled = true; + ace_theme = "ace/theme/dawn"; } else { stylesheets.ayuHighlight.disabled = true; stylesheets.tomorrowNight.disabled = true; + stylesheets.contrastHighlight.disabled = true; stylesheets.highlight.disabled = false; ace_theme = "ace/theme/dawn"; } diff --git a/src/theme/contrast-highlight.css b/src/theme/contrast-highlight.css new file mode 100644 index 0000000000..649a8c0cf8 --- /dev/null +++ b/src/theme/contrast-highlight.css @@ -0,0 +1,84 @@ +/* + * An increased contrast highlighting scheme loosely based on the mdbook + * "light" highlight scheme, itself a subset of Base16 Atelier Dune Light - + * Theme by Bram de Haan + * (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) + * Original Base16 color scheme by Chris Kempson + * (https://github.com/chriskempson/base16) + */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #575757; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #d70025; +} + +/* Dark Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #a61900; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #008200; +} + +/* Blue */ +.hljs-title, +.hljs-section { + color: #0030f2; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #9d00ec; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f5f6f6; + color: #000; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-addition { + color: #22863a; + background-color: #f0fff4; +} + +.hljs-deletion { + color: #b31d28; + background-color: #ffeef0; +} diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css index 9534ec8d15..59c7df6949 100644 --- a/src/theme/css/variables.css +++ b/src/theme/css/variables.css @@ -130,6 +130,46 @@ --search-mark-bg: #a2cff5; } +.contrast { + --bg: hsl(0, 0%, 100%); + --fg: hsl(0, 0%, 0%); + + --sidebar-bg: #fafafa; + --sidebar-fg: hsl(0, 0%, 0%); + --sidebar-non-existant: #aaaaaa; + --sidebar-active: #1f1fff; + --sidebar-spacer: #f4f4f4; + + --scrollbar: #747474; + + --icons: #747474; + --icons-hover: #000000; + + --links: #20609f; + + --inline-code-color: #3c1900; + + --theme-popup-bg: #fafafa; + --theme-popup-border: #cccccc; + --theme-hover: #e6e6e6; + + --quote-bg: hsl(197, 37%, 96%); + --quote-border: hsl(197, 37%, 91%); + + --table-border-color: hsl(0, 0%, 95%); + --table-header-bg: hsl(0, 0%, 80%); + --table-alternate-bg: hsl(0, 0%, 97%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #e4f2fe; + --search-mark-bg: #a2cff5; +} + .navy { --bg: hsl(226, 23%, 11%); --fg: #bcbdd0; diff --git a/src/theme/index.hbs b/src/theme/index.hbs index e9e6cff8b2..661d2dcda8 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -43,6 +43,7 @@ + {{#each additional_css}} @@ -123,6 +124,7 @@