diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9e320fc061..ce78d974bf 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,20 +19,48 @@ themesdir = "../.."
   disableLandingPageButton = true
   disableMermaid = false
   titleSeparator = "::"
-  themeVariant = "relearn"
+  themeVariant = "relearn-light"
   disableSeoHiddenPages = true
 
 [outputs]
-  home = ["HTML", "RSS", "JSON"] # add JSON to the home page to support lunr search
+  # add JSON to the home page to support lunr search; This is a mandatory setting
+  # for the search functionality
+  home = ["HTML", "RSS", "JSON"]
 
 [markup]
   [markup.highlight]
-    style = "tango" # choose a color theme or create your own
-    guessSyntax = false     # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
+    # if set to `guessSyntax = true`, there will be no unstyled code even if no language
+    # was given BUT mermaid code fences will not work anymore! So this is a mandatory
+    # setting for your site
+    guessSyntax = false
 
-[markup.goldmark.renderer]
-  unsafe= true
+    # here in this showcase we use our own modified chroma syntax highlightning style
+    # which is imported in theme-relearn-light.css / theme-relearn-dark.css;
+    # if you want to use a predefined style instead:
+    # - remove the following `noClasses`
+    # - set the following `style` to a predefined style name
+    # - remove the `@import` of the self-defined chroma stylesheet from your CSS files
+    #   (here eg.: theme-relearn-light.css / theme-relearn-dark.css)
+    noClasses = false
+    # style = "base16-snazzy"
 
+  [markup.goldmark.renderer]
+    # activated for this showcase to use HTML and JavaScript; decide on your own needs;
+    # if in doubt, remove this line
+    unsafe = true
+
+# allows `hugo server` to display this showcase in IE11; this is used for testing, as we
+# are still supporting IE11 - although with degraded experience; if you don't care about
+# `hugo server` or browsers of ancient times, fell free to remove this whole block
+[server]
+  [[server.headers]]
+    for = "**.html"
+    [server.headers.values]
+       X-UA-Compatible = "IE=edge"
+
+# showcase of the menu shortcuts; you can use relative URLs linking
+# to your content or use fully-quallified URLs to link outside of
+# your project
 [Languages]
   [Languages.en]
     title = "Documentation for Hugo Relearn Theme"
@@ -68,6 +96,11 @@ themesdir = "../.."
     url = "tags/"
     weight = 40
 
+  # this ourrr way t' showcase th' multilang settings by
+  # doing autotrrranlat'n of th' english content; we are
+  # lazy and don't supporrt furrrther trrranslations; arrr,
+  # don't take it t' serrrious, fello'; it's prrretty hacky and:
+  # NOT MEANT FOR PRRRODUCTION! ARRR!
   [Languages.pir]
     title = "Documentat'n fer Cap'n Hugo Relearrrn Theme"
     weight = 1
diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
index 39eddc5921..e148e86306 100644
--- a/exampleSite/content/basics/customization/_index.en.md
+++ b/exampleSite/content/basics/customization/_index.en.md
@@ -95,35 +95,41 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them
 
 ```css
 :root {
-    --MAIN-TEXT-color: #323232; /* Color of text by default */
-    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #1C90F3; /* Color of links */
-    --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
+    --MAIN-TEXT-color: #101010; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
+    --MAIN-LINK-color: #486ac9; /* Color of links */
+    --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
 
-    /* adjusted to monokai chroma style */
-    --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */
-    --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */
+    /* adjusted to relearn-light chroma style */
+    --CODE-BLOCK-color: #000000; /* fallback color for block code text */
+    --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */
+    --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
 
     --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
-    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+    --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */
 
-    --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */
-    --MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */
+    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
 
-    --MENU-SEARCH-BG-color: #167ad0; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
+    --MENU-SEARCH-color: #efefef; /* Color of search field text */
+    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
 
-    --MENU-SECTIONS-ACTIVE-BG-color: #20272b; /* Background color of the active section and its children */
-    --MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */
-    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
+    --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
 
-    --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
+    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
 }
 ```
 
diff --git a/exampleSite/content/cont/syntaxhighlight.en.md b/exampleSite/content/cont/syntaxhighlight.en.md
index b6db6875c3..50d741d3bc 100644
--- a/exampleSite/content/cont/syntaxhighlight.en.md
+++ b/exampleSite/content/cont/syntaxhighlight.en.md
@@ -56,6 +56,11 @@ You can choose a color theme from the [list of supported themes](https://xyproto
 ````toml
 [markup]
   [markup.highlight]
-    style = "base16-snazzy" # choose a color theme or create your own
-    guessSyntax = false     # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
+    # if set to `guessSyntax = true`, there will be no unstyled code even if no language
+    # was given BUT mermaid code fences will not work anymore! So this is a mandatory
+    # setting for your site
+    guessSyntax = false
+
+    # choose a color theme or create your own
+    style = "base16-snazzy"
 ````
diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index 55ee672205..ea9b789906 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -215,7 +215,10 @@ Also, if you want to use mermaid codefences, you have to turn off `guessSyntax`
 
 [markup]
   [markup.highlight]
-    guessSyntax = false     # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
+    # if set to `guessSyntax = true`, there will be no unstyled code even if no language
+    # was given BUT mermaid code fences will not work anymore! So this is a mandatory
+    # setting for your site
+    guessSyntax = false
 ````
 
 or pages frontmatter
diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
index 2bdcc23b14..9d15859f4d 100644
--- a/exampleSite/content/shortcodes/notice.en.md
+++ b/exampleSite/content/shortcodes/notice.en.md
@@ -195,17 +195,17 @@ You can add:
 ````
 {{% /expand %}}
 
-### Notice with Custom Title
+### Notice with custom title and default color
 
 You can customize the title of the notice by passing it as a second parameter.
 
-{{% notice note "Pay Attention to this Note!" %}}
+{{% notice default "Pay Attention to this Note!" %}}
 The title is now the parameter that was provided.
 {{% /notice %}}
 
 {{% expand "Show markup" %}}
 ````go
-{{%/* notice note "Pay Attention to this Note!" */%}}
+{{%/* notice default "Pay Attention to this Note!" */%}}
 The title is now the parameter that was provided.
 {{%/* /notice */%}}
 ````
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b423e04c47..1c7e8e9107 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -30,7 +30,7 @@
       <div id="overlay"></div>
       <div class="padding highlightable">
         {{- if not .IsHome }}
-        <div id="top-bar">
+        <div id="top-bar"><div>
         {{- if and (or .IsPage .IsSection) .Site.Params.editURL }}
           {{- $File := .File }}
           {{- $Site := .Site }}
@@ -70,7 +70,7 @@
         {{- if $toc }}
           {{- partial "toc.html" . }}
         {{- end }}
-        </div>
+        </div></div>
       {{- end }}
         <div id="head-tags">
 {{- partial "tags.html" . }}
diff --git a/static/css/chroma-relearn-dark.css b/static/css/chroma-relearn-dark.css
new file mode 100644
index 0000000000..0ecb3c7b4b
--- /dev/null
+++ b/static/css/chroma-relearn-dark.css
@@ -0,0 +1,83 @@
+/* based on monokai
+/* Background */ .chroma { color: #f8f8f8; background-color: #2b2b2b }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #960050; }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #66d9ef }
+/* KeywordConstant */ .chroma .kc { color: #66d9ef }
+/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+/* KeywordReserved */ .chroma .kr { color: #66d9ef }
+/* KeywordType */ .chroma .kt { color: #66d9ef }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #a6e22e }
+/* NameBuiltin */ .chroma .nb {  }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #a6e22e }
+/* NameConstant */ .chroma .no { color: #66d9ef }
+/* NameDecorator */ .chroma .nd { color: #a6e22e }
+/* NameEntity */ .chroma .ni {  }
+/* NameException */ .chroma .ne { color: #a6e22e }
+/* NameFunction */ .chroma .nf { color: #a6e22e }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl {  }
+/* NameNamespace */ .chroma .nn {  }
+/* NameOther */ .chroma .nx { color: #a6e22e }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* NameVariable */ .chroma .nv {  }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #e6db74 }
+/* LiteralString */ .chroma .s { color: #e6db74 }
+/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #7c7c7c }
+/* CommentHashbang */ .chroma .ch { color: #7c7c7c }
+/* CommentMultiline */ .chroma .cm { color: #7c7c7c }
+/* CommentSingle */ .chroma .c1 { color: #7c7c7c }
+/* CommentSpecial */ .chroma .cs { color: #7c7c7c }
+/* CommentPreproc */ .chroma .cp { color: #7c7c7c }
+/* CommentPreprocFile */ .chroma .cpf { color: #7c7c7c }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #7c7c7c }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/static/css/chroma-relearn-light.css b/static/css/chroma-relearn-light.css
new file mode 100644
index 0000000000..44bc9890ef
--- /dev/null
+++ b/static/css/chroma-relearn-light.css
@@ -0,0 +1,83 @@
+/* based on tango
+/* Background */ .chroma { background-color: #f8f8f8 }
+/* Other */ .chroma .x { color: #000000 }
+/* Error */ .chroma .err { color: #a40000 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #204a87; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold }
+/* Name */ .chroma .n { color: #000000 }
+/* NameAttribute */ .chroma .na { color: #c4a000 }
+/* NameBuiltin */ .chroma .nb { color: #204a87 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
+/* NameClass */ .chroma .nc { color: #000000 }
+/* NameConstant */ .chroma .no { color: #000000 }
+/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ce5c00 }
+/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #000000 }
+/* NameFunctionMagic */ .chroma .fm { color: #000000 }
+/* NameLabel */ .chroma .nl { color: #f57900 }
+/* NameNamespace */ .chroma .nn { color: #000000 }
+/* NameOther */ .chroma .nx { color: #000000 }
+/* NameProperty */ .chroma .py { color: #000000 }
+/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold }
+/* NameVariable */ .chroma .nv { color: #000000 }
+/* NameVariableClass */ .chroma .vc { color: #000000 }
+/* NameVariableGlobal */ .chroma .vg { color: #000000 }
+/* NameVariableInstance */ .chroma .vi { color: #000000 }
+/* NameVariableMagic */ .chroma .vm { color: #000000 }
+/* Literal */ .chroma .l { color: #000000 }
+/* LiteralDate */ .chroma .ld { color: #000000 }
+/* LiteralString */ .chroma .s { color: #4e9a06 }
+/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 }
+/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 }
+/* LiteralStringChar */ .chroma .sc { color: #4e9a06 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 }
+/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic }
+/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 }
+/* LiteralStringEscape */ .chroma .se { color: #4e9a06 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 }
+/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 }
+/* LiteralStringOther */ .chroma .sx { color: #4e9a06 }
+/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 }
+/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 }
+/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 }
+/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold }
+/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold }
+/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold }
+/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold }
+/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold }
+/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold }
+/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold }
+/* Punctuation */ .chroma .p { color: #000000; font-weight: bold }
+/* Comment */ .chroma .c { color: #8f5902; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic }
+/* Generic */ .chroma .g { color: #000000 }
+/* GenericDeleted */ .chroma .gd { color: #a40000 }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #ef2929 }
+/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #00a000 }
+/* GenericOutput */ .chroma .go { color: #000000; font-style: italic }
+/* GenericPrompt */ .chroma .gp { color: #8f5902 }
+/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold }
+/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }
diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css
index 76f8ea5fb8..5c964cb8cc 100644
--- a/static/css/theme-blue.css
+++ b/static/css/theme-blue.css
@@ -4,10 +4,16 @@
     --MAIN-LINK-color: #1C90F3; /* Color of links */
     --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
     --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
 
-    /* adjusted to monokai chroma style */
-    --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */
-    --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */
+    /* adjusted to base16-snazzy chroma style */
+    --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
+    --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */
+    --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
 
     --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
     --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
@@ -15,9 +21,9 @@
     --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */
     --MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */
 
+    --MENU-SEARCH-color: #ffffff; /* Color of search field text */
     --MENU-SEARCH-BG-color: #167ad0; /* Search field background color (by default borders + icons) */
     --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
 
     --MENU-SECTIONS-ACTIVE-BG-color: #20272b; /* Background color of the active section and its children */
     --MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */
diff --git a/static/css/theme-green.css b/static/css/theme-green.css
index df948dd791..ac99752c9c 100644
--- a/static/css/theme-green.css
+++ b/static/css/theme-green.css
@@ -4,10 +4,16 @@
     --MAIN-LINK-color: #599a3e; /* Color of links */
     --MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */
     --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
 
-    /* adjusted to monokai chroma style */
-    --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */
-    --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */
+    /* adjusted to base16-snazzy chroma style */
+    --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
+    --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */
+    --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
 
     --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
     --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
@@ -15,9 +21,9 @@
     --MENU-HEADER-BG-color: #74b559; /* Background color of menu header */
     --MENU-HEADER-BORDER-color: #9cd484; /*Color of menu header border */
 
+    --MENU-SEARCH-color: #ffffff; /* Color of search field text */
     --MENU-SEARCH-BG-color: #599a3e; /* Search field background color (by default borders + icons) */
     --MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #c7f7c4; /* Override search field icons color */
 
     --MENU-SECTIONS-ACTIVE-BG-color: #1b211c; /* Background color of the active section and its children */
     --MENU-SECTIONS-BG-color: #222723; /* Background color of other sections */
diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css
new file mode 100644
index 0000000000..7d1789e6c0
--- /dev/null
+++ b/static/css/theme-learn.css
@@ -0,0 +1,37 @@
+:root {
+    --MAIN-TEXT-color: #323232; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
+    --MAIN-LINK-color: #00bdf3; /* Color of links */
+    --MAIN-LINK-HOVER-color: #0082a7; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #00bdf3; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
+
+    /* adjusted to base16-snazzy chroma style */
+    --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
+    --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */
+    --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fff7dd; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #fbf0cb; /* color of inline code border */
+
+    --MENU-HOME-LINK-color: #cccccc; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color: #8451a1; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color: #9c6fb6; /*Color of menu header border */
+
+    --MENU-SEARCH-color: #ffffff; /* Color of search field text */
+    --MENU-SEARCH-BG-color: #764890; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #915eae; /* Override search field border color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color: #251f29; /* Background color of the active section and its children */
+    --MENU-SECTIONS-BG-color: #322a38; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #cccccc; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #777777; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #00bdf3; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #2a232f; /* Color of <hr> separator in menu */
+}
diff --git a/static/css/theme-red.css b/static/css/theme-red.css
index 1c1790d8f2..38239570c1 100644
--- a/static/css/theme-red.css
+++ b/static/css/theme-red.css
@@ -4,10 +4,16 @@
     --MAIN-LINK-color: #f31c1c; /* Color of links */
     --MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */
     --MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
 
-    /* adjusted to monokai chroma style */
-    --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */
-    --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */
+    /* adjusted to base16-snazzy chroma style */
+    --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
+    --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */
+    --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
 
     --MENU-HOME-LINK-color: #ccc; /* Color of the home button text */
     --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */
@@ -15,9 +21,9 @@
     --MENU-HEADER-BG-color: #dc1010; /* Background color of menu header */
     --MENU-HEADER-BORDER-color: #e23131; /*Color of menu header border */
 
+    --MENU-SEARCH-color: #ffffff; /* Color of search field text */
     --MENU-SEARCH-BG-color: #b90000; /* Search field background color (by default borders + icons) */
     --MENU-SEARCH-BOX-color: #ef2020; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #fda1a1; /* Override search field icons color */
 
     --MENU-SECTIONS-ACTIVE-BG-color: #2b2020; /* Background color of the active section and its children */
     --MENU-SECTIONS-BG-color: #312525; /* Background color of other sections */
diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css
new file mode 100644
index 0000000000..edfaf3f12a
--- /dev/null
+++ b/static/css/theme-relearn-dark.css
@@ -0,0 +1,44 @@
+/* here in this showcase we use our own modified chroma syntax highlightning style;
+   if you want to use a predefined style instead:
+   - remove `markup.highlight.noClasses` from your config.toml
+   - set `markup.highlight.style` to a predefined style name in your config.toml
+   - remove the following `@import` of the self-defined chroma stylesheet */
+@import "chroma-relearn-dark.css";
+
+:root {
+    --MAIN-TEXT-color: #ffffff; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #7c7c7c; /* Color of titles h2-h3-h4-h5-h6 */
+    --MAIN-LINK-color: #1c90f3; /* Color of links */
+    --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
+    --MAIN-BG-color: #202020; /* color for code background */
+
+    /* adjusted to relearn-dark chroma style */
+    --CODE-BLOCK-color: #f8f8f8; /* fallback color for block code text */
+    --CODE-BLOCK-BG-color: #2b2b2b; /* fallback color for block code background */
+    --CODE-BLOCK-BORDER-color: #2b2b2b; /* color of block code border */
+
+    --CODE-INLINE-color: #82e550; /* color for inline code text */
+    --CODE-INLINE-BG-color: #282a36; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #464646; /* color of inline code border */
+
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
+
+    --MENU-SEARCH-color: #e0e0e0; /* Color of search field text */
+    --MENU-SEARCH-BG-color: #323232; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #e0e0e0; /* Override search field border color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color: #323232; /* Background color of the active section and its children */
+    --MENU-SECTIONS-BG-color: #2b2b2b; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #82e550; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
+}
diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css
new file mode 100644
index 0000000000..99d54baa1d
--- /dev/null
+++ b/static/css/theme-relearn-light.css
@@ -0,0 +1,44 @@
+/* here in this showcase we use our own modified chroma syntax highlightning style;
+   if you want to use a predefined style instead:
+   - remove `markup.highlight.noClasses` from your config.toml
+   - set `markup.highlight.style` to a predefined style name in your config.toml
+   - remove the following `@import` of the self-defined chroma stylesheet */
+@import "chroma-relearn-light.css";
+
+:root {
+    --MAIN-TEXT-color: #101010; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
+    --MAIN-LINK-color: #486ac9; /* Color of links */
+    --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
+    --MAIN-BG-color: #ffffff; /* color of text by default */
+
+    /* adjusted to relearn-light chroma style */
+    --CODE-BLOCK-color: #000000; /* fallback color for block code text */
+    --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */
+    --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */
+
+    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
+    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
+    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
+
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
+
+    --MENU-SEARCH-color: #efefef; /* Color of search field text */
+    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
+    --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
+}
diff --git a/static/css/theme-relearn.css b/static/css/theme-relearn.css
index b21789a673..36aae7a570 100644
--- a/static/css/theme-relearn.css
+++ b/static/css/theme-relearn.css
@@ -1,31 +1,3 @@
-:root {
-    --MAIN-TEXT-color: #323232; /* Color of text by default */
-    --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #486ac9; /* Color of links */
-    --MAIN-LINK-HOVER-color: #0044ff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
-
-    /* adjusted to tango chroma style */
-    --MAIN-CODE-color: #000000; /* fallback color for code text */
-    --MAIN-CODE-BG-color: #f8f8f8; /* fallback color for code background */
-
-    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
-    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
-
-    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
-    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
-
-    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #ddd; /* Override search field icons color */
-
-    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
-    --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
-    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #fff;  /* Color of links in menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #444; /* Color of active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
-
-    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #28292e; /* Color of <hr> separator in menu */
-}
+/* this file is here for compatiblity with older installations
+   use theme-relearn-light instead */
+@import "theme-relearn-light.css";
diff --git a/static/css/theme.css b/static/css/theme.css
index 5b60557a86..589ac77e10 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -3,56 +3,46 @@
 @import "tags.css";
 @import "tabs.css";
 
-#top-github-link, #body #breadcrumbs {
-    position: relative;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    -moz-transform: translateY(-50%);
-    -o-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-}
-.button, .button-secondary {
-    display: inline-block;
-    padding: 7px 12px;
-}
-.button:active, .button-secondary:active {
-    margin: 2px 0 -2px 0;
-}
 @font-face {
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 200;
     src: url("../fonts/WorkSans-ExtraLight.woff") format("woff2"), url("../fonts/WorkSans-ExtraLight.woff") format("woff");
 }
+
 @font-face {
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 300;
     src: url("../fonts/WorkSans-Light.woff2") format("woff2"), url("../fonts/WorkSans-Light.woff") format("woff");
 }
+
 @font-face {
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 400;
     src: url("../fonts/WorkSans-Regular.woff2") format("woff2"), url("../fonts/WorkSans-Regular.woff") format("woff");
 }
+
 @font-face {
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 500;
     src: url("../fonts/WorkSans-Medium.woff2") format("woff2"), url("../fonts/WorkSans-Medium.woff") format("woff");
 }
+
 @font-face {
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 600;
     src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff");
 }
+
 body {
-    background: #fff;
-    color: #777;
+    background-color: #ffffff; /* var(--MAIN-BG-color) */
+    color: #777777; /* var(--MAIN-TEXT-color) */
 }
+
 body #chapter h1 {
     font-size: 3.5rem;
 }
@@ -66,82 +56,81 @@ body #chapter h1 {
         font-size: 2rem;
     }
 }
-a {
-    color: #00bdf3;
+
+a,
+#toc-menu {
+    color: #00bdf3; /* var(--MAIN-LINK-color) */
 }
-a:hover {
-    color: #0082a7;
+
+a:hover,
+#toc-menu:hover {
+    color: #0082a7; /* var(--MAIN-LINK-HOVER-color) */
 }
+
 pre {
     position: relative;
 }
-.bg {
-    background: #fff;
-    border: 1px solid #eaeaea;
-}
-b, strong, label, th {
+
+b,
+strong,
+label,
+th {
     font-weight: 600;
 }
-.default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
+
+.default-animation,
+#sidebar,
+#sidebar ul,
+#body,
+#body .padding,
+#body .nav {
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }
-fieldset {
-    border: 1px solid #ddd;
-}
-textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
-    background-color: white;
-    border: 1px solid #ddd;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
-}
-textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
-    border-color: #c4c4c4;
-}
+
 #header-wrapper {
-    background: #8451a1;
-    color: #fff;
+    background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */
+    color: #ffffff; /* var(--MENU-SEARCH-color) */
     text-align: center;
-    border-bottom: 4px solid #9c6fb6;
+    border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */
     padding: 1rem;
     position: relative;
 }
+
 #header a {
     display: inline-block;
 }
-#header #logo-svg {
-    width: 8rem;
-    height: 2rem;
-}
-#header #logo-svg path {
-    fill: #fff;
-}
+
 .searchbox {
-    margin-top: 1rem;
-    position: relative;
-    border: 1px solid #915eae;
-    background: #764890;
+    border: 1px solid #915eae; /* var(--MENU-SEARCH-BOX-color) */
     border-radius: 4px;
+    background-color: #764890; /* var(--MENU-SEARCH-BG-color) */
+    position: relative;
+    margin-top: 1rem;
 }
+
 .searchbox label {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba( 255, 255, 255, .8 );
     position: absolute;
     left: 10px;
     top: 3px;
 }
+
 .searchbox span {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba( 255, 255, 255, .6 );
     position: absolute;
     right: 10px;
     top: 3px;
     cursor: pointer;
 }
+
 .searchbox span:hover {
-    color: rgba(255, 255, 255, 0.9);
+    color: rgba( 255, 255, 255, .9 );
 }
+
 .searchbox input {
     display: inline-block;
-    color: #fff;
     width: 100%;
     height: 30px;
     background: transparent;
@@ -150,18 +139,15 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ
     margin: 0;
     font-weight: 300;
 }
-.searchbox input::-webkit-input-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-}
-.searchbox input::-moz-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-}
-.searchbox input:-moz-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-}
+
 .searchbox input:-ms-input-placeholder {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba( 255, 255, 255, .4 );
 }
+
+.searchbox input::placeholder {
+    color: rgba( 255, 255, 255, .4 );
+}
+
 #sidebar-toggle-span {
     display: none;
 }
@@ -170,146 +156,196 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ
         display: inline;
     }
 }
+
 #sidebar {
-    background-color: #322A38;
+    background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */
+    bottom: 0;
+    font-size: 15.25px;
+    left: 0;
+    line-height: 1.574;
     position: fixed;
     top: 0;
     width: 300px;
-    bottom: 0;
-    left: 0;
-    font-size: 15.25px;
-    line-height: 1.574;
 }
+
 #sidebar a {
-    color: #ccc;
+    color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */
 }
+
 #sidebar a:hover {
-    color: #e6e6e6;
-}
-#sidebar a.subtitle {
-    color: rgba(204, 204, 204, 0.6);
+    color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
 }
+
 #sidebar hr {
-    border-bottom: 1px solid #2a232f;
+    border-bottom: 1px solid #2a232f; /* var(--MENU-SECTION-HR-color) */
 }
+
 #sidebar a.padding {
     padding: 0 1rem;
 }
+
 #sidebar ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
-#sidebar ul.searched a {
-    color: #999999;
-}
-#sidebar ul.searched .search-match a {
-    color: #e6e6e6;
-}
-#sidebar ul.searched .search-match a:hover {
-    color: white;
-}
+
 #sidebar ul.topics {
     margin: 0 1rem;
 }
+
 #sidebar ul.topics.searched ul {
     display: block;
 }
+
 #sidebar ul.topics ul {
     display: none;
 }
+
 #sidebar ul.topics > li > ul > li:last-child {
     padding-bottom: 1rem;
 }
+
 #sidebar ul.topics ul ul {
     padding-bottom: 0;
 }
+
 #sidebar ul.topics li.parent > ul,
 #sidebar ul.topics li.active > ul,
 #sidebar ul.topics li.alwaysopen > ul {
     display: block;
 }
+
 #sidebar ul.topics > li > a {
-    line-height: 2rem;
     font-size: 1.1rem;
+    line-height: 2rem;
 }
+
 #sidebar ul.topics > li > a b {
-    opacity: 0.5;
     font-weight: 400;
+    opacity: 0.5;
 }
+
 #sidebar ul.topics > li > a .fa {
     margin-top: 9px;
 }
+
 #sidebar ul.topics > li.parent {
-    background: #251f29;
+    background-color: #251f29; /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
     margin-left: -1rem;
     margin-right: -1rem;
     padding-left: 1rem;
     padding-right: 1rem;
 }
+
 #sidebar ul li.active > a {
-    background: #fff;
-    color: #777 !important;
+    background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
+    color: #777 !important; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
     margin-left: -1rem;
     margin-right: -1rem;
     padding-left: 1rem;
     padding-right: 1rem;
 }
+
 #sidebar ul li {
     padding: 0;
 }
+
 #sidebar ul li.visited + span {
     margin-right: 16px;
 }
+
 #sidebar ul li a {
     display: block;
     padding: 2px 0;
 }
+
 #sidebar ul li a span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
 #sidebar ul li > a {
     padding: 4px 0;
 }
-#sidebar ul li.visited > a .read-icon {
-    color: #9c6fb6;
-    display: inline;
-}
+
 #sidebar ul li li {
     padding-left: 1rem;
 }
-#main {
-    background: #f7f7f7;
-    margin: 0 0 1.563rem 0;
+
+#sidebar ul.topics > li > a .read-icon {
+    margin-top: 9px;
 }
+
+#sidebar ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar #shortcuts li {
+    list-style: none;
+    padding: 2px 0;
+}
+
+#sidebar ul li .read-icon {
+    display: none;
+    float: right;
+    font-size: 13px;
+    margin: 4px 0 0 0;
+    min-width: 16px;
+    text-align: right;
+}
+
+#sidebar ul li.visited > a .read-icon {
+    color: #00bdf3; /* var(--MENU-VISITED-color) */
+    display: inline;
+}
+
+#sidebar .nav-title {
+    color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
+    font-size: 2rem;
+    font-weight: 200;
+    letter-spacing: -1px;
+    line-height: 110% !important;
+    margin: 1rem 0 1rem 0;
+    padding-left: 1rem;
+    text-rendering: optimizeLegibility;
+    text-transform: uppercase;
+}
+
 #body {
-    position: relative;
     margin-left: 300px;
     min-height: 100%;
+    position: relative;
 }
-#body img, #body .video-container {
-    margin: 1.5rem auto;
+
+#body img,
+#body .video-container {
     display: block;
+    margin: 1.5rem auto;
     text-align: center;
 }
-#body img.border, #body .video-container.border {
+
+#body img.border,
+#body .video-container.border {
     border: 2px solid #e6e6e6 !important;
     padding: 2px;
 }
-#body img.shadow, #body .video-container.shadow {
+
+#body img.shadow,
+#body .video-container.shadow {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
+
 #body img.inline {
     display: inline !important;
     margin: 0 !important;
     vertical-align: bottom;
 }
-#body .bordered {
-    border: 1px solid #ccc;
-}
+
 #body .padding {
     padding: 3rem 6rem;
 }
@@ -324,55 +360,61 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ
         padding: 5px 1rem;
     }
 }
+
 #body h1 + hr {
-    margin-top: -1rem;
     margin-bottom: 2rem;
+    margin-top: -1rem;
 }
+
 @media only all and (max-width: 59.938em) {
     #body #navigation {
-        position: static;
-        margin-right: 0 !important;
-        width: 100%;
         display: table;
+        margin-right: 0 !important;
+        position: static;
+        width: 100%;
     }
 }
+
 #body .nav {
-    position: fixed;
-    top: 0;
     bottom: 0;
-    width: 4rem;
-    font-size: 50px;
-    height: 100%;
     cursor: pointer;
     display: table;
+    font-size: 50px;
+    height: 100%;
+    position: fixed;
     text-align: center;
+    top: 0;
+    width: 4rem;
 }
 #body .nav > i {
     display: table-cell;
-    vertical-align: middle;
     text-align: center;
+    vertical-align: middle;
 }
 @media only all and (max-width: 59.938em) {
     #body .nav {
         display: table-cell;
-        position: static;
-        top: auto;
-        width: 50%;
-        text-align: center;
         height: 100px;
         line-height: 100px;
         padding-top: 0;
+        position: static;
+        text-align: center;
+        top: auto;
+        width: 50%;
     }
     #body .nav > i {
         display: inline-block;
     }
 }
+
 #body .nav:hover {
-    background: #F6F6F6;
+    background-color: rgba( 134, 134, 134, .066 );
 }
+
 #body .nav.nav-pref {
     left: 0;
 }
+
 #body .nav.nav-next {
     margin-right: 0px;
     right: 0;
@@ -381,81 +423,95 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ
 /* we limit width if we have large screens */
 @media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
   #body #body-inner {
-      max-width: 1000px;
       margin: auto;
+      max-width: 1000px;
   }
 }
 
 #chapter {
-    display: flex;
     align-items: center;
-    justify-content: center;
+    display: flex;
     height: 100%;
+    justify-content: center;
     padding: 2rem 0;
 }
+
 #chapter #body-inner {
     max-width: 80%;
 }
+
 #chapter #body-inner h3:first-child {
     font-weight: 200;
     text-align: center;
 }
+
 #chapter h1 {
+    border-bottom: 4px solid rgba( 134, 134, 134, .125 );
     font-size: 5rem;
-    border-bottom: 4px solid #F0F2F4;
 }
+
 #chapter p {
-    text-align: justify;
     font-size: 1.2rem;
+    text-align: justify;
 }
+
 #footer {
-    padding: 3rem 1rem;
-    color: #b3b3b3;
+    color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */
     font-size: 13px;
+    padding: 3rem 1rem;
     text-align: center;
 }
+
 #footer p {
     margin: 0;
 }
+
 body {
-    color: #323232 !important;
     font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-size: 16.25px !important;
     font-weight: 300;
     line-height: 1.574;
-    font-size: 16.25px !important;
 }
+
 h2, h3, h4, h5, h6 {
+    color: #5e5e5e; /* var(--MAIN-TITLES-TEXT-color) */
     font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
-    text-rendering: optimizeLegibility;
-    color: #5e5e5e;
     letter-spacing: -1px;
+    text-rendering: optimizeLegibility;
 }
+
 h1 {
     font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
     font-weight: 200;
     text-align: center;
     text-transform: uppercase;
-    color: #222;
 }
+
 blockquote {
-    border-left: 10px solid rgba(0, 8, 16, 0.2);
+    border-left: 10px solid rgba( 134, 134, 134, .4 );
 }
+
 blockquote p {
-    font-size: 1.1rem;
-    color: #56585d;
+    font-size: 105%;
+    font-style: italic;
+    opacity: .75;
+    text-align: justify;
 }
+
 blockquote cite {
     display: block;
+    font-weight: bold;
+    opacity: .5;
+    padding-top: .5em;
     text-align: right;
-    color: #222;
-    font-size: 1.2rem;
 }
+
 div.notices {
-    border-color: #505050;
     background-color: #eaeaea;
-    border-top-width: 2rem;
+    border-color: rgba( 80, 80, 80, .8 );
     border-top-style: solid;
-    color: #505050;
+    border-top-width: 2rem;
+    color: #323232;
 	-webkit-print-color-adjust: exact;
 	color-adjust: exact;
     margin: 1.5rem 0;
@@ -463,140 +519,162 @@ div.notices {
     padding-left: 1rem;
     padding-right: 1rem;
 }
+
 div.notices > div.label:first-child:before {
     content: "";
 }
+
 div.notices > div.label {
-    color: #fff;
+    color: #ffffff;
     font-weight: 500;
     margin-bottom: 1rem;
     margin-top: -1.75rem;
 }
+
 div.notices > div.label:first-child:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
-    margin-left: -.35rem;
-    margin-right: .35rem;
 }
+
 div.notices.info {
-    border-color: #3075e5;
     background-color: #e5f0ff;
+    border-color: rgba( 48, 117, 229, .8 );
 }
+
 div.notices.info > div.label:first-child:before {
     content: "\f05a";
+    margin-left: -.15rem;
+    margin-right: .35rem;
 }
+
 div.notices.warning {
-    border-color: #e03e3e;
     background-color: #ffe5e5;
+    border-color: rgba( 224, 62, 62, .8 );
 }
+
 div.notices.warning > div.label:first-child:before {
     content: "\f071";
+    margin-left: -.15rem;
+    margin-right: .35rem;
 }
+
 div.notices.note {
-    border-color: #ed9909;
     background-color: #ffedd5;
+    border-color: rgba( 237, 153, 9, .8 );
 }
+
 div.notices.note > div.label:first-child:before {
     content: "\f06a";
+    margin-left: -.15rem;
+    margin-right: .35rem;
 }
+
 div.notices.tip {
-    border-color: #2ab218;
     background-color: #e2fce0;
+    border-color: rgba( 42, 178, 24, .8 );
 }
+
 div.notices.tip > div.label:first-child:before {
     content: "\f0eb";
+    margin-left: -.15rem;
+    margin-right: .35rem;
 }
 
 /* attachments shortcode */
 
 div.attachments {
-    border-top-width: 2rem;
     border-top-style: solid;
-    color: #505050;
+    border-top-width: 2rem;
+    color: #323232;
 	-webkit-print-color-adjust: exact;
 	color-adjust: exact;
     margin: 1.5rem 0;
+    padding-bottom: .1px;
     padding-left: 1rem;
     padding-right: 1rem;
-    padding-bottom: .1px;
 }
 
 div.attachments > div.label {
-    color: #fff;
+    color: #ffffff;
     font-weight: 500;
     margin-bottom: 1rem;
     margin-top: -1.75rem;
 }
 
 div.attachments > div.label:first-child:before {
+    content: "\f0c6";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     margin-left: -.35rem;
     margin-right: .35rem;
-    content: "\f0c6";
 }
 
 div.attachments .attachments-files {
-    padding: 1rem;
     display: block;
     font-size: 1rem;
-    margin-top: -1rem;
     margin-bottom: 0rem;
+    margin-top: -1rem;
+    padding: 1rem;
 }
 
 div.attachments.orange {
-    border-color: #ed9909;
     background-color: #ffedd5;
+    border-color: rgba( 237, 153, 9, .8 );
 }
 
 div.attachments.green {
-    border-color: #2ab218;
     background-color: #e2fce0;
+    border-color: rgba( 42, 178, 24, .8 );
 }
 
 div.attachments.red {
-    border-color: #e03e3e;
     background-color: #ffe5e5;
+    border-color: rgba( 224, 62, 62, .8 );
 }
 
 div.attachments.blue {
-    border-color: #3075e5;
     background-color: #e5f0ff;
+    border-color: rgba( 48, 117, 229, .8 );
 }
 
 div.attachments.grey {
-    border-color: #505050;
     background-color: #eaeaea;
+    border-color: rgba( 80, 80, 80, .8 );
 }
 
 div.attachments.neutral {
-    border-color: transparent;
     background-color: transparent;
+    border-color: transparent;
 }
+
 div.attachments.neutral > div.label {
-    color: var(--MAIN-TITLES-TEXT-color);
+    color: #5e5e5e;
 }
 
 /* Children shortcode */
+
 .children p {
     font-size: small;
-    margin-top: 0px;
-    padding-top: 0px;
     margin-bottom:  0px;
+    margin-top: 0px;
     padding-bottom: 0px;
+    padding-top: 0px;
 }
+
 .children-li p {
     font-size: small;
     font-style: italic;
+}
 
-}
-.children-h2 p, .children-h3 p {
+.children-h2 p,
+.children-h3 p {
     font-size: small;
-    margin-top: 0px;
-    padding-top: 0px;
     margin-bottom:  0px;
+    margin-top: 0px;
     padding-bottom: 0px;
+    padding-top: 0px;
 }
+
 #body-inner .children h2,
 #body-inner .children h3,
 #body-inner .children h4,
@@ -616,37 +694,44 @@ div.attachments.neutral > div.label {
     padding-inline-start: 0;
 }
 
-code, kbd, pre, samp {
+code,
+kbd,
+pre,
+samp {
     font-family: "Consolas", menlo, monospace;
     font-size: 92%;
     vertical-align: baseline;
 }
+
 code {
-    background-color: #FFFAE9;
-    border: 1px solid #F8E8C8;
+    background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+    border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
     border-radius: 2px;
-    color: #5E5E5E;
+    color: #5e5e5e; /* var(--CODE-INLINE-color) */
 	-webkit-print-color-adjust: economy;
 	color-adjust: economy;
     padding-left: 2px;
     padding-right: 2px;
     white-space: nowrap;
 }
+
 code.copy-to-clipboard-inline {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-width: 0;
 }
+
 pre {
-    background-color: #272822;
-    border: 0;
+    background-color: #272822; /* var(--CODE-BLOCK-BG-color) */
+    border: 1px solid #272822; /* var(--CODE-BLOCK-BORDER-color) */
     border-radius: 2px;
-    color: #f8f8f2;
+    color: #f8f8f2; /* var(--CODE-BLOCK-color) */
     -webkit-print-color-adjust: economy;
 	color-adjust: economy;
     line-height: 1.15;
     padding: 1rem;
 }
+
 pre code {
     background-color: inherit;
     color: inherit;
@@ -658,26 +743,15 @@ pre code {
     padding: 0;
     white-space: inherit;
 }
+
 hr {
-    border-bottom: 4px solid #F0F2F4;
-}
-.page-title {
-    margin-top: -25px;
-    padding: 25px;
-    float: left;
-    clear: both;
-    background: #9c6fb6;
-    color: #fff;
-}
-#body a.anchor-link {
-    color: #ccc;
-}
-#body a.anchor-link:hover {
-    color: #9c6fb6;
+    border-bottom: 4px solid rgba( 134, 134, 134, .125 );
 }
+
 #body-inner pre {
     white-space: pre-wrap;
 }
+
 #body-inner h1,
 #body-inner h2,
 #body-inner h3,
@@ -685,53 +759,31 @@ hr {
 #body-inner h5,
 #body-inner h6 {
     /* big titles cause a horizontal scrollbar - fixing this by wrapping text */
-    overflow-x: hidden;
     overflow-wrap: break-word;
+    overflow-x: hidden;
 }
 
 table {
-    border: 1px solid #ccc;
+    border: 1px solid rgba( 134, 134, 134, .333 );
     margin-bottom: 1rem;
     margin-top: 1rem;
     table-layout: auto;
 }
-th, thead td {
-    background: #eaeaea;
-    border: 1px solid #ccc;
+
+th,
+thead td {
+    background-color: rgba( 134, 134, 134, .166 );
+    border: 1px solid rgba( 134, 134, 134, .333 );
     -webkit-print-color-adjust: exact;
 	color-adjust: exact;
     padding: 0.5rem;
 }
+
 td {
-    border: 1px solid #ccc;
+    border: 1px solid rgba( 134, 134, 134, .333 );
     padding: 0.5rem;
 }
-.button {
-    background: #9c6fb6;
-    color: #fff;
-    box-shadow: 0 3px 0 #00a5d4;
-}
-.button:hover {
-    background: #00a5d4;
-    box-shadow: 0 3px 0 #008db6;
-    color: #fff;
-}
-.button:active {
-    box-shadow: 0 1px 0 #008db6;
-}
-.button-secondary {
-    background: #F8B450;
-    color: #fff;
-    box-shadow: 0 3px 0 #f7a733;
-}
-.button-secondary:hover {
-    background: #f7a733;
-    box-shadow: 0 3px 0 #f69b15;
-    color: #fff;
-}
-.button-secondary:active {
-    box-shadow: 0 1px 0 #f69b15;
-}
+
 .tooltipped {
     position: relative;
 }
@@ -840,53 +892,83 @@ td {
     margin-top: -5px;
     border-right-color: rgba(0, 0, 0, 0.8);
 }
+
 .highlightable {
     padding: 1rem 0 1rem;
     position: relative;
 }
+
 #sidebar .highlightable {
     overflow: auto;
 }
+
 .lightbox-active #body {
     overflow: visible;
 }
+
 .lightbox-active #body .padding {
     overflow: visible;
 }
-#github-contrib i {
-    vertical-align: middle;
-}
+
 .featherlight img {
     margin: 0 !important;
 }
+
 #top-bar {
-    background: #F6F6F6;
+    background-color: #ffffff; /* var(--MAIN-BG-color) */
     border-radius: 2px;
-    padding: 0 1rem;
     height: 0;
     min-height: 3rem;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 999;
 }
+
+#top-bar > div {
+    background-color: rgba( 134, 134, 134, .066 );
+    padding: 0 1rem;
+    height: 100%;
+}
+
+#top-bar.is-sticky {
+    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
+}
+
 #top-github-link {
-    position: relative;
-    z-index: 1;
-    float: right;
     display: block;
+    float: right;
+    z-index: 1;
 }
+
+#top-github-link,
+#body #breadcrumbs {
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
 #body #breadcrumbs {
-    height: auto;
-    margin-bottom: 0;
-    padding-left: 0;
-    line-height: 1.4;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 70%;
     display: inline-block;
     float: left;
+    height: auto;
+    line-height: 1.4;
+    margin-bottom: 0;
+    overflow: hidden;
+    padding-left: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 70%;
 }
+
 #body #breadcrumbs span {
     padding: 0 0.1rem;
 }
+
 #body #breadcrumbs .links {
     display: inline;
     padding: 0 0.1rem;
@@ -896,17 +978,21 @@ td {
     display: inline-block;
     padding: 0;
 }
+
 #body #breadcrumbs .links meta {
     display: none;
 }
+
 #body #breadcrumbs .links li:last-of-type {
     cursor: text;
 }
+
 a[aria-disabled="true"] {
     color: inherit;
     pointer-events: none;
     text-decoration: none;
 }
+
 @media only all and (max-width: 59.938em) {
     #sidebar {
         width: 230px;
@@ -917,8 +1003,8 @@ a[aria-disabled="true"] {
 }
 @media only all and (max-width: 47.938em) {
     #sidebar {
-        width: 230px;
         left: -230px;
+        width: 230px;
     }
     #body {
         margin-left: 0;
@@ -935,93 +1021,78 @@ a[aria-disabled="true"] {
         overflow: hidden;
     }
     .sidebar-hidden #overlay {
-        position: absolute;
+        background-color: rgba(255, 255, 255, 0.5);
+        bottom: 0;
+        cursor: pointer;
         left: 0;
+        position: absolute;
         right: 0;
         top: 0;
-        bottom: 0;
         z-index: 10;
-        background: rgba(255, 255, 255, 0.5);
-        cursor: pointer;
     }
 }
+
 .copy-to-clipboard {
-    background-color: #FFFAE9;
-    background-image: url(../images/clippy.svg);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 14px 16px;
-    border: 1px solid #F8E8C8;
+    background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+    border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
     border-radius: 0 2px 2px 0;
-    color: #5E5E5E;
+    color: #5e5e5e; /* var(--CODE-INLINE-color) */
     cursor: pointer;
     font-family: "Consolas", menlo, monospace;
     font-size: 92%;
     padding-left: 22px;
 }
-.copy-to-clipboard:hover {
-    background-color: #FCEBB4;
-    border-color: #B19F7A;
+
+.copy-to-clipboard:before {
+    content: "\f0c5";
+    font-family: "Font Awesome 5 Free";
+    font-size: 92%;
+    font-weight: 500;
+    margin-left: -22px;
 }
+
+.copy-to-clipboard-inline + .copy-to-clipboard:before {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.copy-to-clipboard:hover {
+    background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
+    color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+}
+
+/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */
 pre .copy-to-clipboard {
-    background-color: rgba( 204, 204, 204, .666 );
-    border-color: #000;
+    background-color: #ffffff; /* var(--MAIN-BG-color) */
+    border-color: #272822; /* var(--MAIN-TEXT-color) */
     border-radius: 2px;
-    padding: 10.5px 12.5px;
+    color: #777777; /* var(--MAIN-TEXT-color) */
+    font-size: 120%;
+    opacity: .5;
+    padding: 5px 3px 5px 25px;
     position: absolute;
     right: 4px;
     top: 4px;
 }
+
 pre .copy-to-clipboard:hover {
-    border-color: #505050;
-    background-color: rgba( 236, 236, 236, .9 );
-}
-
-#sidebar ul.topics > li > a .read-icon {
-    margin-top: 9px;
-}
-
-#sidebar ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-#sidebar #shortcuts li {
-    padding: 2px 0;
-    list-style: none;
-}
-
-#sidebar ul li .read-icon {
-    display: none;
-    float: right;
-    font-size: 13px;
-    min-width: 16px;
-    margin: 4px 0 0 0;
-    text-align: right;
-}
-#sidebar ul li.visited > a .read-icon {
-    color: #00bdf3;
-    display: inline;
-}
-
-#sidebar .nav-title {
-    color: white ;
-    font-size: 2rem;
-    font-weight: 200;
-    letter-spacing: -1px;
-    line-height: 110% !important;
-    margin: 1rem 0 1rem 0;
-    padding-left: 1rem;
-    text-rendering: optimizeLegibility;
-    text-transform: uppercase;
+    background-color: #777777; /* var(--MAIN-TEXT-color) */
+    color: #ffffff; /* var(--MAIN-BG-color) */
+    opacity: .5;
 }
 
 #homelinks {
-  background-color: #9c6fb6;
-  color: #fff;
-  padding: 7px 0;
-  border-bottom: 4px solid #9c6fb6;
+    background-color: #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */
+    border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */
+    padding: 7px 0;
+}
+
+#homelinks a {
+    color: #cccccc /* var(--MENU-HOME-LINK-color) */
+}
+
+#homelinks a:hover {
+    color: #e6e6e6 /* var(--MENU-HOME-LINK-HOVER-color) */;
 }
 
 option {
@@ -1085,11 +1156,11 @@ option {
     /* remove inline height from generated diagram */
     height: initial !important;
 }
+
 .mermaid > svg:hover {
     border-color: #ccc;
 }
 
-
 .include.hide-first-heading h1:first-of-type,
 .include.hide-first-heading h2:first-of-type,
 .include.hide-first-heading h3:first-of-type,
@@ -1120,9 +1191,9 @@ option {
 /* Table of contents */
 
 .progress ul {
-  list-style: none;
-  margin: 0;
-  padding: 0 15px;
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
 }
 
 #TableOfContents {
@@ -1133,53 +1204,58 @@ option {
 }
 
 #TableOfContents > ul > li > a {
-  font-weight: 500;
+    font-weight: 500;
 }
 
-#body a.highlight, #body a.highlight:hover, #body a.highlight:focus {
+#body a.highlight,
+#body a.highlight:hover,
+#body a.highlight:focus {
+    outline-style: none;
     text-decoration: none;
-    outline: none;
-    outline: 0;
 }
+
 #body a.highlight {
-    line-height: 1.1;
     display: inline-block;
+    line-height: 1.1;
 }
+
 #body a.highlight:after {
-    display: block;
+    background-color: #0082a7; /*#CE3B2F*/
     content: "";
+    display: block;
     height: 1px;
     width: 0%;
-    background-color: #0082a7; /*#CE3B2F*/
     -webkit-transition: width 0.5s ease;
     -moz-transition: width 0.5s ease;
     -ms-transition: width 0.5s ease;
     transition: width 0.5s ease;
 }
-#body a.highlight:hover:after, #body a.highlight:focus:after {
+
+#body a.highlight:hover:after,
+#body a.highlight:focus:after {
     width: 100%;
 }
 
 .progress {
-    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
-    position:absolute;
     background-color: rgba(246, 246, 246, 0.97);
-    width: auto;
     border: thin solid #ECECEC;
+    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
     display:none;
-    z-index:200;
+    position:absolute;
+    width: auto;
+    z-index: 200;
 }
 
 #toc-menu {
   border-right: thin solid #DAD8D8 !important;
-  padding-right: 1rem !important;
   margin-right: 0.5rem !important;
+  padding-right: 1rem !important;
 }
 
 #sidebar-toggle-span {
   border-right: thin solid #DAD8D8 !important;
-  padding-right: 0.5rem !important;
   margin-right: 1rem !important;
+  padding-right: 0.5rem !important;
 }
 
 .btn {
@@ -1236,7 +1312,7 @@ option {
 
 /* anchors */
 .anchor {
-  color: #00bdf3;
+  color: #00bdf3; /* var(--MAIN-ANCHOR-color) */
   cursor: pointer;
   font-size: .5em;
   margin-left: .66em;
@@ -1245,13 +1321,22 @@ option {
   visibility: hidden;
 }
 
-h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
   visibility:visible;
 }
 
 /* Redfines headers style */
 
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
   font-weight: inherit;
 }
 
@@ -1305,18 +1390,18 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
 .select-style {
     border: 0;
-    width: 150px;
     border-radius: 0px;
-    overflow: hidden;
     display: inline-flex;
+    overflow: hidden;
+    width: 150px;
 }
 
 .select-style svg {
     fill: #ccc;
-    width: 14px;
     height: 14px;
-    pointer-events: none;
     margin: auto;
+    pointer-events: none;
+    width: 14px;
 }
 
 .select-style svg:hover {
@@ -1324,16 +1409,16 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 }
 
 .select-style select {
-    padding: 0;
-    width: 130%;
+    -webkit-appearance: none;
     border: none;
     box-shadow: none;
     background: transparent;
     background-image: none;
-    -webkit-appearance: none;
     margin: auto;
     margin-left: 0px;
     margin-right: -20px;
+    padding: 0;
+    width: 130%;
 }
 
 .select-style select:focus {
@@ -1349,14 +1434,3 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
       display: none;
   }
 }
-
-#top-bar {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 999;
-}
-
-#top-bar.is-sticky {
-  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
-}
diff --git a/static/css/variant.css b/static/css/variant.css
index 1426a50c32..76ba83705a 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -1,57 +1,32 @@
 body {
-    color: var(--MAIN-TEXT-color) !important;
+    background-color: var(--MAIN-BG-color, #ffffff);
+    color: var(--MAIN-TEXT-color);
 }
 
-h2, h3, h4, h5, h6 {
-    color: var(--MAIN-TITLES-TEXT-color) !important;
-}
-
-a {
+a,
+#toc-menu {
     color: var(--MAIN-LINK-color);
 }
 
-pre {
-    background-color: var(--MAIN-CODE-BG-color);
-    color: var(--MAIN-CODE-color);
-}
-
-.anchor {
-    color: var(--MAIN-ANCHOR-color);
-}
-
-a:hover {
+a:hover,
+#toc-menu:hover,
+#body a.highlight:after {
     color: var(--MAIN-LINK-HOVER-color);
 }
 
-#sidebar ul li.visited > a .read-icon {
-    color: var(--MENU-VISITED-color);
-}
-
-#body a.highlight:after {
-    background-color: var(--MAIN-LINK-HOVER-color);
-}
-
-#sidebar {
-    background-color: var(--MENU-SECTIONS-BG-color);
-}
-
-#sidebar #header-wrapper {
+#header-wrapper {
     background-color: var(--MENU-HEADER-BG-color);
-    color: var(--MENU-SEARCH-BOX-color);
+    color: var(--MENU-SEARCH-color, #ffffff);
     border-color: var(--MENU-HEADER-BORDER-color);
 }
 
-#sidebar .searchbox {
+.searchbox {
     border-color: var(--MENU-SEARCH-BOX-color);
     background-color: var(--MENU-SEARCH-BG-color);
 }
 
-#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
-    background-color: var(--MENU-SECTIONS-ACTIVE-BG-color);
-}
-
-#sidebar .searchbox * {
-    color: var(--MENU-SEARCH-BOX-ICONS-color);
+#sidebar {
+    background-color: var(--MENU-SECTIONS-BG-color);
 }
 
 #sidebar a {
@@ -62,25 +37,97 @@ a:hover {
     color: var(--MENU-SECTIONS-LINK-HOVER-color);
 }
 
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+
+#sidebar ul.topics > li.parent,
+#sidebar ul.topics > li.active {
+    background-color: var(--MENU-SECTIONS-ACTIVE-BG-color);
+}
+
 #sidebar ul li.active > a {
     background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
     color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
 }
 
-#sidebar hr {
-    border-color: var(--MENU-SECTION-HR-color);
+#sidebar ul li.visited > a .read-icon {
+    color: var(--MENU-VISITED-color);
 }
 
-#body .tags a.tag-link {
-    background-color: var(--MENU-HEADER-BG-color);
+#sidebar .nav-title {
+    color: var(--MENU-SECTIONS-LINK-HOVER-color);
 }
 
-#body .tags a.tag-link:before {
-    border-right-color: var(--MENU-HEADER-BG-color);
+#footer {
+    color: var(--MENU-SECTIONS-LINK-color);
+}
+
+h2, h3, h4, h5, h6 {
+    color: var(--MAIN-TITLES-TEXT-color);
+}
+
+div.notices > div.label {
+    color: var(--MAIN-BG-color, #ffffff);
+}
+
+div.attachments > div.label {
+    color: var(--MAIN-BG-color, #ffffff);
+}
+
+div.attachments.neutral {
+    color: var(--MAIN-TEXT-color);
+}
+
+div.attachments.neutral > div.label {
+    color: var(--MAIN-TITLES-TEXT-color);
+}
+
+code {
+    background-color: var(--CODE-INLINE-BG-color, #fff7dd);
+    border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb);
+    color: var(--CODE-INLINE-color, #5e5e5e);
+}
+
+pre {
+    background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color));
+    border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color));
+    color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color));
+}
+
+div.featherlight .featherlight-content{
+    background-color: var(--MAIN-BG-color, #ffffff);
+}
+
+#top-bar {
+    background-color: var(--MAIN-BG-color, #ffffff);
+}
+
+.copy-to-clipboard {
+    background-color: var(--CODE-INLINE-BG-color, #fff7dd);
+    border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb);
+    color: var(--CODE-INLINE-color, #5e5e5e);
+}
+
+.copy-to-clipboard:hover {
+    background-color: var(--CODE-INLINE-color, #5e5e5e);
+    color: var(--CODE-INLINE-BG-color, #fff7dd);
+}
+
+/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */
+pre .copy-to-clipboard {
+    background-color: var(--MAIN-BG-color, #ffffff);
+    border-color: var(--MAIN-TEXT-color);
+    color: var(--MAIN-TEXT-color);
+}
+
+pre .copy-to-clipboard:hover {
+    background-color: var(--MAIN-TEXT-color);
+    color: var(--MAIN-BG-color, #ffffff);
 }
 
 #homelinks {
-    background-color: var(--MENU-HEADER-BG-color);
+    background-color: var(--MENU-HEADER-BORDER-color);
     border-bottom-color: var(--MENU-HEADER-BORDER-color);
 }
 
@@ -92,6 +139,19 @@ a:hover {
     color: var(--MENU-HOME-LINK-HOVER-color);
 }
 
-#sidebar .nav-title {
-    color: var(--MENU-SECTIONS-LINK-HOVER-color) !important;
+.anchor {
+    color: var(--MAIN-ANCHOR-color);
+}
+
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);
+    color: var(--MAIN-BG-color, #ffffff);
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}
+
+#body .tags a.tag-link:after {
+    background-color: var(--MAIN-BG-color, #ffffff);
 }
diff --git a/static/images/clippy.svg b/static/images/clippy.svg
deleted file mode 100644
index f4551735e1..0000000000
--- a/static/images/clippy.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="896" height="1024"><path d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/></svg>
\ No newline at end of file