Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dark color scheme

Browse Source
This commit is contained in:
Will Faught
2022-12-31 21:24:23 -08:00
parent 9dafe06a94
commit 3a01f1866c
9 changed files with 219 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -38,10 +38,12 @@ Search page:
- Accessibility - Accessibility
- Analytics - Analytics
- Automatic switching between light and dark color schemes
- Blog - Blog
- Bootstrap - Bootstrap
- Comments - Comments
- Customizable - Customizable
- Dark color scheme
- E-mail protection - E-mail protection
- Facebook sharing - Facebook sharing
- Header links - Header links
@@ -64,8 +66,6 @@ Search page:
- Table of contents - Table of contents
- Twitter sharing - Twitter sharing
Soon: Dark color scheme and dynamic color schemes, when Bootstrap 5.3 releases.
## Get started with Hugo ## Get started with Hugo
1. [Install Hugo](https://gohugo.io/installation/). 1. [Install Hugo](https://gohugo.io/installation/).
@@ -218,6 +218,7 @@ paige:
link_href: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" # Local or remote file link_href: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" # Local or remote file
link_integrity: "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" # File integrity hash link_integrity: "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" # File integrity hash
color: "#123456" # Theme color for Safari and Windows color: "#123456" # Theme color for Safari and Windows
color_scheme: "light" # Use the "light" or "dark" color scheme without automatic switching
content_max_width: 66ch # Page table of contents and content max width content_max_width: 66ch # Page table of contents and content max width
comments: comments:
cactus: # cactus.chat cactus: # cactus.chat
@@ -539,7 +540,7 @@ The page title is displayed in an `h1` tag, so page content headers must start w
The page date is the publish date, if any. The page date is the publish date, if any.
Bootstrap 5.2.3 CSS and JavaScript and Bootstrap Icons 1.10.3 are loaded from the Bootstrap CDN for every page unless local Bootstrap assets are used instead. Bootstrap 5.3.0-alpha1 CSS and JavaScript and Bootstrap Icons 1.10.3 are loaded from the Bootstrap CDN for every page unless local Bootstrap assets are used instead.
Map keys, CSS names, JavaScript names, and file names under the layout directory Map keys, CSS names, JavaScript names, and file names under the layout directory
that begin with "paige" capitalized in any way are reserved. that begin with "paige" capitalized in any way are reserved.

2
exampleSite/config.yaml
View File

@@ -37,7 +37,7 @@ markup:
renderer: renderer:
unsafe: true unsafe: true
highlight: highlight:
style: vs noclasses: false
tableofcontents: tableofcontents:
endlevel: 6 endlevel: 6
ordered: true ordered: true

2
layouts/_default/baseof.html
View File

@@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
{{ $rtl := eq .Language.LanguageDirection "rtl" }} {{ $rtl := eq .Language.LanguageDirection "rtl" }}
{{ $lang := .Site.LanguageCode | default .Site.Language.Lang }} {{ $lang := .Site.LanguageCode | default .Site.Language.Lang }}
<html{{ if $rtl }} dir="rtl"{{ end }}{{ with $lang }} lang="{{ . }}"{{ end }}> <html{{ if eq .Site.Params.paige.color_scheme `dark` }} data-bs-theme="dark"{{ end }}{{ if $rtl }} dir="rtl"{{ end }}{{ with $lang }} lang="{{ . }}"{{ end }}>
{{ partial "paige/head" . }} {{ partial "paige/head" . }}
<body class="d-flex flex-column"> <body class="d-flex flex-column">
<div class="container flex-fill"> <div class="container flex-fill">

86
layouts/partials/paige/dark.css Normal file
View File

@@ -0,0 +1,86 @@
/* Background */ .bg { color: #c9d1d9; background-color: var(--bs-body-bg); }
/* PreWrapper */ .chroma { color: #c9d1d9; background-color: var(--bs-body-bg); }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #f85149 }
/* 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: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #ff7b72 }
/* KeywordConstant */ .chroma .kc { color: #79c0ff }
/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
/* KeywordType */ .chroma .kt { color: #ff7b72 }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { }
/* NameBuiltin */ .chroma .nb { }
/* NameBuiltinPseudo */ .chroma .bp { }
/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #ffa657 }
/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #ff7b72 }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { color: #79c0ff }
/* NameTag */ .chroma .nt { color: #7ee787 }
/* NameVariable */ .chroma .nv { color: #79c0ff }
/* NameVariableClass */ .chroma .vc { }
/* NameVariableGlobal */ .chroma .vg { }
/* NameVariableInstance */ .chroma .vi { }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { color: #a5d6ff }
/* LiteralDate */ .chroma .ld { color: #79c0ff }
/* LiteralString */ .chroma .s { color: #a5d6ff }
/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
/* LiteralNumber */ .chroma .m { color: #a5d6ff }
/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ffa198 }
/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ .chroma .go { color: #8b949e }
/* GenericPrompt */ .chroma .gp { color: #8b949e }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #79c0ff }
/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #6e7681 }

86
layouts/partials/paige/light.css Normal file
View File

@@ -0,0 +1,86 @@
/* Background */ .bg { background-color: #ffffff; }
/* PreWrapper */ .chroma { background-color: #ffffff; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
/* 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: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; 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: #000000; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #008080 }
/* NameBuiltin */ .chroma .nb { color: #0086b3 }
/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
/* NameConstant */ .chroma .no { color: #008080 }
/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #800080 }
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #555555 }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #000080 }
/* NameVariable */ .chroma .nv { color: #008080 }
/* NameVariableClass */ .chroma .vc { color: #008080 }
/* NameVariableGlobal */ .chroma .vg { color: #008080 }
/* NameVariableInstance */ .chroma .vi { color: #008080 }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #dd1144 }
/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
/* LiteralStringRegex */ .chroma .sr { color: #009926 }
/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
/* LiteralNumber */ .chroma .m { color: #009999 }
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
/* Operator */ .chroma .o { color: #000000; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #999988; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
/* GenericError */ .chroma .gr { color: #aa0000 }
/* GenericHeading */ .chroma .gh { color: #999999 }
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #555555 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }

4
layouts/partials/paige/links.html
View File

@@ -13,8 +13,8 @@
"integrity" (.Site.Params.paige.bootstrap.icons.link_integrity | default "sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e") "integrity" (.Site.Params.paige.bootstrap.icons.link_integrity | default "sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e")
) }} ) }}
{{ partial "paige/link" (dict {{ partial "paige/link" (dict
"href" (.Site.Params.paige.bootstrap.style.link_href | default "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") "href" (.Site.Params.paige.bootstrap.style.link_href | default "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css")
"integrity" (.Site.Params.paige.bootstrap.style.link_integrity | default "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi") "integrity" (.Site.Params.paige.bootstrap.style.link_integrity | default "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD")
) }} ) }}
{{ if or .Params.paige.math (and .Params.paige.show_full_pages (where .Pages "Params.paige.math" "eq" true)) }} {{ if or .Params.paige.math (and .Params.paige.show_full_pages (where .Pages "Params.paige.math" "eq" true)) }}
{{ partial "paige/link" (dict {{ partial "paige/link" (dict

24
layouts/partials/paige/scripts.html
View File

@@ -1,7 +1,10 @@
<script> <script>
function paigeResize() { function paigeResize() {
var s = document.querySelector('section[class="paige-content"]'); var e = document.querySelector('section[class="paige-content"]');
var mw = getComputedStyle(s).maxWidth; if (!e) {
return;
}
var mw = getComputedStyle(e).maxWidth;
var w; var w;
if (mw === "none") { if (mw === "none") {
var e = document.querySelector("body > div.container"); var e = document.querySelector("body > div.container");
@@ -22,11 +25,24 @@ function paigeResize() {
} }
paigeResize(); paigeResize();
addEventListener("resize", paigeResize); addEventListener("resize", paigeResize);
{{ if not .Site.Params.paige.color_scheme }}
var paigeQuery = matchMedia("(prefers-color-scheme: dark)");
if (paigeQuery.matches) {
document.documentElement.setAttribute("data-bs-theme", "dark")
}
paigeQuery.addEventListener("change", function (e) {
if (e.matches) {
document.documentElement.setAttribute("data-bs-theme", "dark");
} else {
document.documentElement.removeAttribute("data-bs-theme");
}
});
{{ end }}
</script> </script>
<noscript>{{ i18n "paige_noscript" }}</noscript> <noscript>{{ i18n "paige_noscript" }}</noscript>
{{ partial "paige/script" (dict {{ partial "paige/script" (dict
"integrity" (.Site.Params.paige.bootstrap.script.script_integrity | default "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3") "integrity" (.Site.Params.paige.bootstrap.script.script_integrity | default "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN")
"src" (.Site.Params.paige.bootstrap.script.script_src | default "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js") "src" (.Site.Params.paige.bootstrap.script.script_src | default "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js")
) }} ) }}
{{ if or .Params.paige.math (and .Params.paige.show_full_pages (where .Pages "Params.paige.math" "eq" true)) }} {{ if or .Params.paige.math (and .Params.paige.show_full_pages (where .Pages "Params.paige.math" "eq" true)) }}
{{ partial "paige/script" (dict {{ partial "paige/script" (dict

20
layouts/partials/paige/style.html
View File

@@ -5,8 +5,8 @@ body, html {
blockquote { blockquote {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-left: 0.25rem solid #e9ecef; border-left: 0.25rem solid var(--bs-border-color);
border-right: 0.25rem solid white; padding-right: 0.25rem;
} }
blockquote p:last-of-type { blockquote p:last-of-type {
@@ -38,4 +38,20 @@ section[class="paige-metadata"] {
margin-left: 0.5ch; margin-left: 0.5ch;
position: absolute; position: absolute;
} }
{{ with .Site.Params.paige.color_scheme }}
{{ if eq . "dark" }}
{{ partial "paige/dark.css" . | safeCSS }}
{{ else if eq . "light" }}
{{ partial "paige/light.css" . | safeCSS }}
{{ end }}
{{ else }}
@media (prefers-color-scheme: dark) {
{{ partial "paige/dark.css" . | safeCSS }}
}
@media (prefers-color-scheme: light) {
{{ partial "paige/light.css" . | safeCSS }}
}
{{ end }}
</style> </style>

1
theme.toml
View File

@@ -30,6 +30,7 @@ tags = [
"blog", "blog",
"bootstrap", "bootstrap",
"contact", "contact",
"dark",
"hero", "hero",
"landing", "landing",
"light", "light",