nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 19:00:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: support for dark mode #175

Browse source
This commit is contained in:
Sören Weber 2022-02-11 00:59:40 +01:00
parent f32eb1af93
commit 9ea06563be
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
18 changed files with 932 additions and 471 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
exampleSite/config.toml
View file

@ -19,20 +19,48 @@ themesdir = "../.."
disableLandingPageButton = true disableLandingPageButton = true
disableMermaid = false disableMermaid = false
titleSeparator = "::" titleSeparator = "::"
themeVariant = "relearn" themeVariant = "relearn-light"
disableSeoHiddenPages = true disableSeoHiddenPages = true
[outputs] [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]
[markup.highlight] [markup.highlight]
style = "tango" # choose a color theme or create your own # if set to `guessSyntax = true`, there will be no unstyled code even if no language
guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore # was given BUT mermaid code fences will not work anymore! So this is a mandatory
# setting for your site
guessSyntax = false
[markup.goldmark.renderer] # here in this showcase we use our own modified chroma syntax highlightning style
unsafe= true # 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]
[Languages.en] [Languages.en]
title = "Documentation for Hugo Relearn Theme" title = "Documentation for Hugo Relearn Theme"
@ -68,6 +96,11 @@ themesdir = "../.."
url = "tags/" url = "tags/"
weight = 40 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] [Languages.pir]
title = "Documentat'n fer Cap'n Hugo Relearrrn Theme" title = "Documentat'n fer Cap'n Hugo Relearrrn Theme"
weight = 1 weight = 1

50
exampleSite/content/basics/customization/_index.en.md
View file

@ -95,35 +95,41 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them
```css ```css
:root { :root {
--MAIN-TEXT-color: #323232; /* Color of text by default */ --MAIN-TEXT-color: #101010; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-LINK-color: #1C90F3; /* Color of links */ --MAIN-LINK-color: #486ac9; /* Color of links */
--MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
--MAIN-BG-color: #ffffff; /* color of text by default */
/* adjusted to monokai chroma style */ /* adjusted to relearn-light chroma style */
--MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ --CODE-BLOCK-color: #000000; /* fallback color for block code text */
--MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ --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-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-BG-color: #7dc903; /* Background color of menu header */
--MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */ --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-color: #efefef; /* Color of search field text */
--MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */ --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-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
--MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */ --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
--MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */ --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */ --MENU-SECTIONS-LINK-HOVER-color: #ffffff; /* Color of links in menu, when hovered */
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */ --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */ --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-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
} }
``` ```

9
exampleSite/content/cont/syntaxhighlight.en.md
View file

@ -56,6 +56,11 @@ You can choose a color theme from the [list of supported themes](https://xyproto
````toml ````toml
[markup] [markup]
[markup.highlight] [markup.highlight]
style = "base16-snazzy" # choose a color theme or create your own # if set to `guessSyntax = true`, there will be no unstyled code even if no language
guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore # 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"
```` ````

5
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -215,7 +215,10 @@ Also, if you want to use mermaid codefences, you have to turn off `guessSyntax`
[markup] [markup]
[markup.highlight] [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 or pages frontmatter

6
exampleSite/content/shortcodes/notice.en.md
View file

@ -195,17 +195,17 @@ You can add:
```` ````
{{% /expand %}} {{% /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. 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. The title is now the parameter that was provided.
{{% /notice %}} {{% /notice %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
````go ````go
{{%/* notice note "Pay Attention to this Note!" */%}} {{%/* notice default "Pay Attention to this Note!" */%}}
The title is now the parameter that was provided. The title is now the parameter that was provided.
{{%/* /notice */%}} {{%/* /notice */%}}
```` ````

4
layouts/partials/header.html
View file

@ -30,7 +30,7 @@
<div id="overlay"></div> <div id="overlay"></div>
<div class="padding highlightable"> <div class="padding highlightable">
{{- if not .IsHome }} {{- if not .IsHome }}
<div id="top-bar"> <div id="top-bar"><div>
{{- if and (or .IsPage .IsSection) .Site.Params.editURL }} {{- if and (or .IsPage .IsSection) .Site.Params.editURL }}
{{- $File := .File }} {{- $File := .File }}
{{- $Site := .Site }} {{- $Site := .Site }}
@ -70,7 +70,7 @@
{{- if $toc }} {{- if $toc }}
{{- partial "toc.html" . }} {{- partial "toc.html" . }}
{{- end }} {{- end }}
</div> </div></div>
{{- end }} {{- end }}
<div id="head-tags"> <div id="head-tags">
{{- partial "tags.html" . }} {{- partial "tags.html" . }}

83
static/css/chroma-relearn-dark.css Normal file
View file

@ -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 { }

83
static/css/chroma-relearn-light.css Normal file
View file

@ -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 }

14
static/css/theme-blue.css
View file

@ -4,10 +4,16 @@
--MAIN-LINK-color: #1C90F3; /* Color of links */ --MAIN-LINK-color: #1C90F3; /* Color of links */
--MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
--MAIN-BG-color: #ffffff; /* color of text by default */
/* adjusted to monokai chroma style */ /* adjusted to base16-snazzy chroma style */
--MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
--MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ --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-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: #5e5e5e; /* Color of the hovered home button text */
@ -15,9 +21,9 @@
--MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */ --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */
--MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */ --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-BG-color: #167ad0; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ --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-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-BG-color: #252c31; /* Background color of other sections */

14
static/css/theme-green.css
View file

@ -4,10 +4,16 @@
--MAIN-LINK-color: #599a3e; /* Color of links */ --MAIN-LINK-color: #599a3e; /* Color of links */
--MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */
--MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */ --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */
--MAIN-BG-color: #ffffff; /* color of text by default */
/* adjusted to monokai chroma style */ /* adjusted to base16-snazzy chroma style */
--MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
--MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ --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-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: #5e5e5e; /* Color of the hovered home button text */
@ -15,9 +21,9 @@
--MENU-HEADER-BG-color: #74b559; /* Background color of menu header */ --MENU-HEADER-BG-color: #74b559; /* Background color of menu header */
--MENU-HEADER-BORDER-color: #9cd484; /*Color of menu header border */ --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-BG-color: #599a3e; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */ --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-ACTIVE-BG-color: #1b211c; /* Background color of the active section and its children */
--MENU-SECTIONS-BG-color: #222723; /* Background color of other sections */ --MENU-SECTIONS-BG-color: #222723; /* Background color of other sections */

37
static/css/theme-learn.css Normal file
View file

@ -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 */
}

14
static/css/theme-red.css
View file

@ -4,10 +4,16 @@
--MAIN-LINK-color: #f31c1c; /* Color of links */ --MAIN-LINK-color: #f31c1c; /* Color of links */
--MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */
--MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */ --MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */
--MAIN-BG-color: #ffffff; /* color of text by default */
/* adjusted to monokai chroma style */ /* adjusted to base16-snazzy chroma style */
--MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */
--MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ --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-color: #ccc; /* Color of the home button text */
--MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered 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-BG-color: #dc1010; /* Background color of menu header */
--MENU-HEADER-BORDER-color: #e23131; /*Color of menu header border */ --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-BG-color: #b90000; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #ef2020; /* Override search field border color */ --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-ACTIVE-BG-color: #2b2020; /* Background color of the active section and its children */
--MENU-SECTIONS-BG-color: #312525; /* Background color of other sections */ --MENU-SECTIONS-BG-color: #312525; /* Background color of other sections */

44
static/css/theme-relearn-dark.css Normal file
View file

@ -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 */
}

44
static/css/theme-relearn-light.css Normal file
View file

@ -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 */
}

34
static/css/theme-relearn.css
View file

@ -1,31 +1,3 @@
:root { /* this file is here for compatiblity with older installations
--MAIN-TEXT-color: #323232; /* Color of text by default */ use theme-relearn-light instead */
--MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */ @import "theme-relearn-light.css";
--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 */
}

764
static/css/theme.css
View file

File diff suppressed because it is too large Load diff

152
static/css/variant.css
View file

@ -1,57 +1,32 @@
body { body {
color: var(--MAIN-TEXT-color) !important; background-color: var(--MAIN-BG-color, #ffffff);
color: var(--MAIN-TEXT-color);
} }
h2, h3, h4, h5, h6 { a,
color: var(--MAIN-TITLES-TEXT-color) !important; #toc-menu {
}
a {
color: var(--MAIN-LINK-color); color: var(--MAIN-LINK-color);
} }
pre { a:hover,
background-color: var(--MAIN-CODE-BG-color); #toc-menu:hover,
color: var(--MAIN-CODE-color); #body a.highlight:after {
}
.anchor {
color: var(--MAIN-ANCHOR-color);
}
a:hover {
color: var(--MAIN-LINK-HOVER-color); color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar ul li.visited > a .read-icon { #header-wrapper {
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 {
background-color: var(--MENU-HEADER-BG-color); 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); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background-color: var(--MENU-SEARCH-BG-color); background-color: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar {
background-color: var(--MENU-SECTIONS-ACTIVE-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
}
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
#sidebar a { #sidebar a {
@ -62,25 +37,97 @@ a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color); 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 { #sidebar ul li.active > a {
background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
} }
#sidebar hr { #sidebar ul li.visited > a .read-icon {
border-color: var(--MENU-SECTION-HR-color); color: var(--MENU-VISITED-color);
} }
#body .tags a.tag-link { #sidebar .nav-title {
background-color: var(--MENU-HEADER-BG-color); color: var(--MENU-SECTIONS-LINK-HOVER-color);
} }
#body .tags a.tag-link:before { #footer {
border-right-color: var(--MENU-HEADER-BG-color); 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 { #homelinks {
background-color: var(--MENU-HEADER-BG-color); background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-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); color: var(--MENU-HOME-LINK-HOVER-color);
} }
#sidebar .nav-title { .anchor {
color: var(--MENU-SECTIONS-LINK-HOVER-color) !important; 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);
} }

1
static/images/clippy.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 509 B