fix: adjust colors to improve accessibility (#159)
parent
564b30aa56
commit
9682ef999b
|
@ -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"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
@mixin chroma_base {
|
||||
.chroma {
|
||||
color: #999;
|
||||
color: var(--code-font-color);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue