From 0f6620a9ff73b57eae8e1323b3ef53a790182ad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 16 Nov 2023 22:19:20 +0100 Subject: [PATCH] variant: increase contrast for light themes #722 --- .../content/basics/migration/_index.en.md | 6 + static/css/chroma-relearn-light.css | 160 +++++++++--------- static/css/ie.css | 44 ++--- static/css/theme-relearn-bright.css | 8 +- static/css/theme-relearn-dark.css | 2 +- static/css/theme-relearn-light.css | 8 +- static/css/theme-zen-dark.css | 2 +- static/css/theme-zen-light.css | 8 +- static/css/variant-internal.css | 4 +- 9 files changed, 124 insertions(+), 118 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index d53924e665..38eaaf1611 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,6 +18,12 @@ This document shows you what's new in the latest release and flags it with one o --- +## 5.24.0.beta {#5240} + +- {{% badge style="note" title=" " %}}Change{{% /badge %}} The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai. + +--- + ## 5.23.0 (2023-11-03) {#5230} - {{% badge style="note" title=" " %}}Change{{% /badge %}} With {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.120.0{{% /badge %}} the author settings move into the `[params]` array in your `config.toml`. Because this collides with the previous way, the theme expected author information, it now adheres to Hugo standards and prints out a warning during built if something is wrong. diff --git a/static/css/chroma-relearn-light.css b/static/css/chroma-relearn-light.css index c6fada0188..cd99436c75 100644 --- a/static/css/chroma-relearn-light.css +++ b/static/css/chroma-relearn-light.css @@ -1,87 +1,87 @@ -/* based on tango */ -/* Background */ .bg { background-color: #f8f8f8; } -/* PreWrapper */ .chroma { background-color: #f8f8f8; } -/* Other */ .chroma .x { color: #000000 } -/* Error */ .chroma .err { color: #a40000 } +/* based on monokailight */ +/* Background */ .bg { color: #272822; background-color: #fafafa; } +/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #960050; } /* CodeLine */ .chroma .cl { } /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #fbf1d0 } +/* LineHighlight */ .chroma .hl { background-color: #e1e1e1 } /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } /* Line */ .chroma .line { display: flex; } -/* 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 } +/* Keyword */ .chroma .k { color: #00a8c8 } +/* KeywordConstant */ .chroma .kc { color: #00a8c8 } +/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #00a8c8 } +/* KeywordReserved */ .chroma .kr { color: #00a8c8 } +/* KeywordType */ .chroma .kt { color: #00a8c8 } +/* Name */ .chroma .n { color: #111111 } +/* NameAttribute */ .chroma .na { color: #75af00 } +/* NameBuiltin */ .chroma .nb { color: #111111 } +/* NameBuiltinPseudo */ .chroma .bp { color: #111111 } +/* NameClass */ .chroma .nc { color: #75af00 } +/* NameConstant */ .chroma .no { color: #00a8c8 } +/* NameDecorator */ .chroma .nd { color: #75af00 } +/* NameEntity */ .chroma .ni { color: #111111 } +/* NameException */ .chroma .ne { color: #75af00 } +/* NameFunction */ .chroma .nf { color: #75af00 } +/* NameFunctionMagic */ .chroma .fm { color: #111111 } +/* NameLabel */ .chroma .nl { color: #111111 } +/* NameNamespace */ .chroma .nn { color: #111111 } +/* NameOther */ .chroma .nx { color: #75af00 } +/* NameProperty */ .chroma .py { color: #111111 } +/* NameTag */ .chroma .nt { color: #f92672 } +/* NameVariable */ .chroma .nv { color: #111111 } +/* NameVariableClass */ .chroma .vc { color: #111111 } +/* NameVariableGlobal */ .chroma .vg { color: #111111 } +/* NameVariableInstance */ .chroma .vi { color: #111111 } +/* NameVariableMagic */ .chroma .vm { color: #111111 } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #d88200 } +/* LiteralString */ .chroma .s { color: #d88200 } +/* LiteralStringAffix */ .chroma .sa { color: #d88200 } +/* LiteralStringBacktick */ .chroma .sb { color: #d88200 } +/* LiteralStringChar */ .chroma .sc { color: #d88200 } +/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } +/* LiteralStringDoc */ .chroma .sd { color: #d88200 } +/* LiteralStringDouble */ .chroma .s2 { color: #d88200 } +/* LiteralStringEscape */ .chroma .se { color: #8045ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } +/* LiteralStringInterpol */ .chroma .si { color: #d88200 } +/* LiteralStringOther */ .chroma .sx { color: #d88200 } +/* LiteralStringRegex */ .chroma .sr { color: #d88200 } +/* LiteralStringSingle */ .chroma .s1 { color: #d88200 } +/* LiteralStringSymbol */ .chroma .ss { color: #d88200 } +/* 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 { color: #111111 } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/static/css/ie.css b/static/css/ie.css index fe90e48483..8794962928 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -243,7 +243,7 @@ } body { background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ - color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ } @@ -353,18 +353,18 @@ } h1 { - color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ } h2, h3, .article-subheading, h4, h5, h6 { - color: rgba( 74, 74, 74, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ + color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */ } .expand > input:active, .expand > input:focus { - outline-color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) */ + outline-color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */ } .expand > label { @@ -431,7 +431,7 @@ } div.box.primary > .box-content { - color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ } div.box.secondary { @@ -440,7 +440,7 @@ } div.box.secondary > .box-content { - color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ } div.box.accent { @@ -449,7 +449,7 @@ } div.box.accent > .box-content { - color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ } div.box.blue { @@ -503,12 +503,12 @@ } div.box.transparent > .box-label { - color: rgba( 74, 74, 74, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ + color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ } div.box.transparent > .box-content { background-color: transparent; - color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */ } code, @@ -525,13 +525,13 @@ } pre:not(.mermaid) { - background-color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */ + background-color: rgba( 250, 250, 250, 1 ); /* var(--CODE-BLOCK-BG-color) */ border-color: rgba( 216, 216, 216, 1 ); /* var(--CODE-BLOCK-BORDER-color) */ - color: rgba( 0, 0, 0, 1 ); /* var(--CODE-BLOCK-color) */ + color: rgba( 39, 40, 34, 1 ); /* var(--CODE-BLOCK-color) */ } div.highlight > div { - background-color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */ + background-color: rgba( 250, 250, 250, 1 ); /* var(--CODE-BLOCK-BG-color) */ border-color: rgba( 216, 216, 216, 1 ); /* var(--CODE-BLOCK-BORDER-color) */ } @@ -549,7 +549,7 @@ #R-body a[aria-disabled="true"], #R-searchresults .autocomplete-suggestion > .context { - color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */ + color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */ } #R-searchresults .autocomplete-suggestion > .breadcrumbs { @@ -579,8 +579,8 @@ div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover, pre:not(.mermaid) .copy-to-clipboard-button:hover { background-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ - border-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ - color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */ + border-color: #486ac9; /* var(--MAIN-LINK-color) */ + color: rgba( 250, 250, 250, 1 ); /* var(--CODE-BLOCK-BG-color) */ } .svg-reset-button { @@ -589,8 +589,8 @@ } .svg-reset-button:hover { background-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ - border-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ - color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */ + border-color: #486ac9; /* var(--MAIN-LINK-color) */ + color: rgba( 250, 250, 250, 1 ); /* var(--CODE-BLOCK-BG-color) */ } #R-homelinks { @@ -727,7 +727,7 @@ .btn.cstyle.transparent { background-color: transparent; - color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */ } .btn.cstyle.transparent:hover, @@ -737,7 +737,7 @@ } .btn.cstyle.transparent > * { - color: rgba( 74, 74, 74, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ + color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ } #R-body .tags a.term-link { @@ -813,12 +813,12 @@ .badge.transparent > .badge-content { background-color: transparent; - color: rgba( 74, 74, 74, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ + color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ } article ul > li > input[type="checkbox"] { background-color: rgba( 255, 255, 255, 1 ); /* var(--INTERNAL-MAIN-BG-color); */ - color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ } article ul > li > input[type="checkbox"]::before { @@ -827,7 +827,7 @@ /* no style support for tabs in IE11; all styled as default */ #R-body .tab-nav-button { - color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ + color: rgba( 0, 0, 0, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */ } #R-body .tab-nav-button.active { diff --git a/static/css/theme-relearn-bright.css b/static/css/theme-relearn-bright.css index b07f3e03e4..711b231953 100644 --- a/static/css/theme-relearn-bright.css +++ b/static/css/theme-relearn-bright.css @@ -10,14 +10,14 @@ --SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */ --ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of content and h1 titles */ + --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TITLES-TEXT-color: rgba( 74, 74, 74, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-light chroma style */ - --CODE-BLOCK-color: rgba( 0, 0, 0, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 248, 248, 248, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css index 077ae06b54..7aad593fd8 100644 --- a/static/css/theme-relearn-dark.css +++ b/static/css/theme-relearn-dark.css @@ -16,7 +16,7 @@ --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-dark chroma style */ - --CODE-BLOCK-color: rgba( 248, 248, 248, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css index dcf107d6a2..3303c0992c 100644 --- a/static/css/theme-relearn-light.css +++ b/static/css/theme-relearn-light.css @@ -10,14 +10,14 @@ --SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */ --ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of content and h1 titles */ + --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TITLES-TEXT-color: rgba( 74, 74, 74, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-light chroma style */ - --CODE-BLOCK-color: rgba( 0, 0, 0, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 248, 248, 248, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ diff --git a/static/css/theme-zen-dark.css b/static/css/theme-zen-dark.css index 1974a70a18..1c44c427b5 100644 --- a/static/css/theme-zen-dark.css +++ b/static/css/theme-zen-dark.css @@ -16,7 +16,7 @@ --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-dark chroma style */ - --CODE-BLOCK-color: rgba( 248, 248, 248, 1 ); /* fallback text color of block code; should be adjusted in your selected chroma style */ + --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ diff --git a/static/css/theme-zen-light.css b/static/css/theme-zen-light.css index d765916db7..56ac4d5771 100644 --- a/static/css/theme-zen-light.css +++ b/static/css/theme-zen-light.css @@ -12,12 +12,12 @@ --MAIN-TOPBAR-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color between topbar and content */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hoverd link color of content */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of content and h1 titles */ - --MAIN-TITLES-TEXT-color: rgba( 74, 74, 74, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ + --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-light chroma style */ - --CODE-BLOCK-color: rgba( 0, 0, 0, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 248, 248, 248, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color of block code */ --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css index ec118de686..d8ed642113 100644 --- a/static/css/variant-internal.css +++ b/static/css/variant-internal.css @@ -30,8 +30,8 @@ --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); - --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, rgba( 0, 0, 0, 1 ))); - --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, rgba( 248, 248, 248, 1 ))); + --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, rgba( 39, 40, 34, 1 ))); + --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, rgba( 250, 250, 250, 1 ))); --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); --INTERNAL-CODE-INLINE-color: var(--CODE-INLINE-color, rgba( 94, 94, 94, 1 ));