From 9682ef999b553b586013ba71d018710be47b0994 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Mon, 5 Jul 2021 08:42:48 +0200
Subject: [PATCH] fix: adjust colors to improve accessibility (#159)

---
 exampleSite/content/usage/getting-started.md |  2 +-
 src/sass/_chroma_base.scss                   |  2 +-
 src/sass/_chroma_dark.scss                   | 41 ++++++++++---
 src/sass/_chroma_light.scss                  | 60 ++++++++++++--------
 src/sass/_color_mode.scss                    |  2 +
 src/sass/_defaults.scss                      |  7 ++-
 src/sass/_markdown.scss                      |  2 +
 7 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/exampleSite/content/usage/getting-started.md b/exampleSite/content/usage/getting-started.md
index 69b0190..fefd9f4 100644
--- a/exampleSite/content/usage/getting-started.md
+++ b/exampleSite/content/usage/getting-started.md
@@ -41,7 +41,7 @@ To prepare your new site environment just a few steps are required:
 
 3. Install the Geekdoc theme from a [release bundle](#option-1-download-pre-build-release-bundle) (recommended) or from [Git branch](#option-2-clone-the-github-repository).
 
-4. Create the minimal required Hugo configuration `config.toml`. For all configuration options see [here](/usage/configuration/).
+4. Create the minimal required Hugo configuration `config.toml`. For all configuration options take a look at the [configuration](/usage/configuration/) page.
 
    ```Toml
    baseURL = "http://localhost"
diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
index 111751c..053c453 100644
--- a/src/sass/_chroma_base.scss
+++ b/src/sass/_chroma_base.scss
@@ -1,6 +1,6 @@
 @mixin chroma_base {
   .chroma {
-    color: #999;
+    color: var(--code-font-color);
     margin: 1rem 0;
   }
   .chroma code {
diff --git a/src/sass/_chroma_dark.scss b/src/sass/_chroma_dark.scss
index 4bb3bea..4275b11 100644
--- a/src/sass/_chroma_dark.scss
+++ b/src/sass/_chroma_dark.scss
@@ -5,9 +5,11 @@
 
   /* Other */
   .chroma .x {
+    color: inherit;
   }
   /* Error */
   .chroma .err {
+    color: inherit;
   }
   /* LineTableTD */
   .chroma .lntd {
@@ -42,7 +44,7 @@
   .chroma .hl {
     display: block;
     width: 100%;
-    background-color: #ffffcc;
+    background-color: #4f1605;
   }
   /* LineNumbersTable */
   .chroma .lnt {
@@ -52,7 +54,7 @@
   .chroma .ln {
     margin-right: 0.4em;
     padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
+    color: #b3b3b3;
   }
   /* Keyword */
   .chroma .k {
@@ -85,6 +87,7 @@
   }
   /* Name */
   .chroma .n {
+    color: inherit;
   }
   /* NameAttribute */
   .chroma .na {
@@ -97,6 +100,7 @@
   }
   /* NameBuiltinPseudo */
   .chroma .bp {
+    color: inherit;
   }
   /* NameClass */
   .chroma .nc {
@@ -104,15 +108,19 @@
   }
   /* NameConstant */
   .chroma .no {
+    color: inherit;
   }
   /* NameDecorator */
   .chroma .nd {
+    color: inherit;
   }
   /* NameEntity */
   .chroma .ni {
+    color: inherit;
   }
   /* NameException */
   .chroma .ne {
+    color: inherit;
   }
   /* NameFunction */
   .chroma .nf {
@@ -120,6 +128,7 @@
   }
   /* NameFunctionMagic */
   .chroma .fm {
+    color: inherit;
   }
   /* NameLabel */
   .chroma .nl {
@@ -128,12 +137,15 @@
   }
   /* NameNamespace */
   .chroma .nn {
+    color: inherit;
   }
   /* NameOther */
   .chroma .nx {
+    color: inherit;
   }
   /* NameProperty */
   .chroma .py {
+    color: inherit;
   }
   /* NameTag */
   .chroma .nt {
@@ -161,12 +173,15 @@
   }
   /* NameVariableMagic */
   .chroma .vm {
+    color: inherit;
   }
   /* Literal */
   .chroma .l {
+    color: inherit;
   }
   /* LiteralDate */
   .chroma .ld {
+    color: inherit;
   }
   /* LiteralString */
   .chroma .s {
@@ -262,26 +277,27 @@
   }
   /* Punctuation */
   .chroma .p {
+    color: inherit;
   }
   /* Comment */
   .chroma .c {
-    color: #6272a4;
+    color: #96a6d8;
   }
   /* CommentHashbang */
   .chroma .ch {
-    color: #6272a4;
+    color: #96a6d8;
   }
   /* CommentMultiline */
   .chroma .cm {
-    color: #6272a4;
+    color: #96a6d8;
   }
   /* CommentSingle */
   .chroma .c1 {
-    color: #6272a4;
+    color: #96a6d8;
   }
   /* CommentSpecial */
   .chroma .cs {
-    color: #6272a4;
+    color: #96a6d8;
   }
   /* CommentPreproc */
   .chroma .cp {
@@ -293,10 +309,11 @@
   }
   /* Generic */
   .chroma .g {
+    color: inherit;
   }
   /* GenericDeleted */
   .chroma .gd {
-    color: #8b080b;
+    color: #d98f90;
   }
   /* GenericEmph */
   .chroma .ge {
@@ -304,10 +321,12 @@
   }
   /* GenericError */
   .chroma .gr {
+    color: inherit;
   }
   /* GenericHeading */
   .chroma .gh {
     font-weight: bold;
+    color: inherit;
   }
   /* GenericInserted */
   .chroma .gi {
@@ -315,13 +334,15 @@
   }
   /* GenericOutput */
   .chroma .go {
-    color: #44475a;
+    color: #8f9ea8;
   }
   /* GenericPrompt */
   .chroma .gp {
+    color: inherit;
   }
   /* GenericStrong */
   .chroma .gs {
+    color: inherit;
   }
   /* GenericSubheading */
   .chroma .gu {
@@ -329,6 +350,7 @@
   }
   /* GenericTraceback */
   .chroma .gt {
+    color: inherit;
   }
   /* GenericUnderline */
   .chroma .gl {
@@ -336,5 +358,6 @@
   }
   /* TextWhitespace */
   .chroma .w {
+    color: inherit;
   }
 }
diff --git a/src/sass/_chroma_light.scss b/src/sass/_chroma_light.scss
index ea1b252..49d5662 100644
--- a/src/sass/_chroma_light.scss
+++ b/src/sass/_chroma_light.scss
@@ -5,6 +5,7 @@
 
   /* Other */
   .chroma .x {
+    color: inherit;
   }
   /* Error */
   .chroma .err {
@@ -92,18 +93,19 @@
   }
   /* Name */
   .chroma .n {
+    color: inherit;
   }
   /* NameAttribute */
   .chroma .na {
-    color: #008080;
+    color: #006767;
   }
   /* NameBuiltin */
   .chroma .nb {
-    color: #0086b3;
+    color: #556165;
   }
   /* NameBuiltinPseudo */
   .chroma .bp {
-    color: #999999;
+    color: #676767;
   }
   /* NameClass */
   .chroma .nc {
@@ -112,7 +114,7 @@
   }
   /* NameConstant */
   .chroma .no {
-    color: #008080;
+    color: #006767;
   }
   /* NameDecorator */
   .chroma .nd {
@@ -135,6 +137,7 @@
   }
   /* NameFunctionMagic */
   .chroma .fm {
+    color: inherit;
   }
   /* NameLabel */
   .chroma .nl {
@@ -147,9 +150,11 @@
   }
   /* NameOther */
   .chroma .nx {
+    color: inherit;
   }
   /* NameProperty */
   .chroma .py {
+    color: inherit;
   }
   /* NameTag */
   .chroma .nt {
@@ -157,28 +162,31 @@
   }
   /* NameVariable */
   .chroma .nv {
-    color: #008080;
+    color: #006767;
   }
   /* NameVariableClass */
   .chroma .vc {
-    color: #008080;
+    color: #006767;
   }
   /* NameVariableGlobal */
   .chroma .vg {
-    color: #008080;
+    color: #006767;
   }
   /* NameVariableInstance */
   .chroma .vi {
-    color: #008080;
+    color: #006767;
   }
   /* NameVariableMagic */
   .chroma .vm {
+    color: inherit;
   }
   /* Literal */
   .chroma .l {
+    color: inherit;
   }
   /* LiteralDate */
   .chroma .ld {
+    color: inherit;
   }
   /* LiteralString */
   .chroma .s {
@@ -238,31 +246,31 @@
   }
   /* LiteralNumber */
   .chroma .m {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberBin */
   .chroma .mb {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberFloat */
   .chroma .mf {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberHex */
   .chroma .mh {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberInteger */
   .chroma .mi {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberIntegerLong */
   .chroma .il {
-    color: #009999;
+    color: #027e83;
   }
   /* LiteralNumberOct */
   .chroma .mo {
-    color: #009999;
+    color: #027e83;
   }
   /* Operator */
   .chroma .o {
@@ -276,47 +284,49 @@
   }
   /* Punctuation */
   .chroma .p {
+    color: inherit;
   }
   /* Comment */
   .chroma .c {
-    color: #999988;
+    color: #676765;
     font-style: italic;
   }
   /* CommentHashbang */
   .chroma .ch {
-    color: #999988;
+    color: #676765;
     font-style: italic;
   }
   /* CommentMultiline */
   .chroma .cm {
-    color: #999988;
+    color: #676765;
     font-style: italic;
   }
   /* CommentSingle */
   .chroma .c1 {
-    color: #999988;
+    color: #676765;
     font-style: italic;
   }
   /* CommentSpecial */
   .chroma .cs {
-    color: #999999;
+    color: #676767;
     font-weight: bold;
     font-style: italic;
   }
   /* CommentPreproc */
   .chroma .cp {
-    color: #999999;
+    color: #676767;
     font-weight: bold;
     font-style: italic;
   }
   /* CommentPreprocFile */
   .chroma .cpf {
-    color: #999999;
+    color: #676767;
     font-weight: bold;
     font-style: italic;
   }
   /* Generic */
   .chroma .g {
+    color: inherit;
   }
   /* GenericDeleted */
   .chroma .gd {
@@ -334,7 +344,7 @@
   }
   /* GenericHeading */
   .chroma .gh {
-    color: #999999;
+    color: #676767;
   }
   /* GenericInserted */
   .chroma .gi {
@@ -343,7 +353,7 @@
   }
   /* GenericOutput */
   .chroma .go {
-    color: #888888;
+    color: #6f6f6f;
   }
   /* GenericPrompt */
   .chroma .gp {
@@ -355,7 +365,7 @@
   }
   /* GenericSubheading */
   .chroma .gu {
-    color: #aaaaaa;
+    color: #5f5f5f;
   }
   /* GenericTraceback */
   .chroma .gt {
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index bd4c51d..89312e0 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -16,6 +16,7 @@
   --code-background: #{$code-background};
   --code-accent-color: #{darken($code-background, 6)};
   --code-accent-color-lite: #{darken($code-background, 2)};
+  --code-font-color: #{$code-font-color};
 
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
@@ -58,6 +59,7 @@
   --code-background: #{$code-background-dark};
   --code-accent-color: #{darken($code-background-dark, 4)};
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
+  --code-font-color: #{$code-font-color-dark};
 
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index 9e2c7c8..09d069a 100644
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@@ -44,6 +44,9 @@ $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 $body-min-width: 20rem !default;
 
+$code-font-color: rgba(95, 95, 95, 1) !default;
+$code-font-color-dark: rgba(185, 185, 185, 1) !default;
+
 $body-background-dark: $gray-800 !default;
 $body-font-color-dark: $gray-100 !default;
 
@@ -56,8 +59,8 @@ $body-background-dark: mix(
   invert($body-background, 75%),
   $second-color
 ) !default;
-$link-color-dark: lighten(desaturate($link-color, 40), 25) !default;
-$link-color-visited-dark: lighten($link-color-visited, 10) !default;
+$link-color-dark: rgba(110, 168, 212, 1) !default;
+$link-color-visited-dark: rgba(186, 142, 240) !default;
 
 $code-background: lighten($gray-200, 4) !default;
 $code-background-dark: darken($body-background-dark, 2) !default;
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index 10da821..0a8bd90 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -166,6 +166,8 @@
 
   code {
     background-color: var(--code-background);
+    border-radius: $border-radius;
+    color: var(--code-font-color);
     font-size: 0.85em;
     line-height: 1.45em;
     padding: 0.2em 0.4em;