diff --git a/README.md b/README.md index e249f68e..bfd5284e 100644 --- a/README.md +++ b/README.md @@ -38,10 +38,12 @@ Search page: - Accessibility - Analytics +- Automatic switching between light and dark color schemes - Blog - Bootstrap - Comments - Customizable +- Dark color scheme - E-mail protection - Facebook sharing - Header links @@ -64,8 +66,6 @@ Search page: - Table of contents - Twitter sharing -Soon: Dark color scheme and dynamic color schemes, when Bootstrap 5.3 releases. - ## Get started with Hugo 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_integrity: "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" # File integrity hash 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 comments: 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. -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 that begin with "paige" capitalized in any way are reserved. diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 5bdad943..43971c51 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -37,7 +37,7 @@ markup: renderer: unsafe: true highlight: - style: vs + noclasses: false tableofcontents: endlevel: 6 ordered: true diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 13d76db8..93f39ee9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,7 @@ {{ $rtl := eq .Language.LanguageDirection "rtl" }} {{ $lang := .Site.LanguageCode | default .Site.Language.Lang }} - + {{ partial "paige/head" . }}
diff --git a/layouts/partials/paige/dark.css b/layouts/partials/paige/dark.css new file mode 100644 index 00000000..02e3ac29 --- /dev/null +++ b/layouts/partials/paige/dark.css @@ -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 } diff --git a/layouts/partials/paige/light.css b/layouts/partials/paige/light.css new file mode 100644 index 00000000..e5121ac4 --- /dev/null +++ b/layouts/partials/paige/light.css @@ -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 } diff --git a/layouts/partials/paige/links.html b/layouts/partials/paige/links.html index ba6d499c..ade7697e 100644 --- a/layouts/partials/paige/links.html +++ b/layouts/partials/paige/links.html @@ -13,8 +13,8 @@ "integrity" (.Site.Params.paige.bootstrap.icons.link_integrity | default "sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e") ) }} {{ 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") - "integrity" (.Site.Params.paige.bootstrap.style.link_integrity | default "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi") + "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-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD") ) }} {{ if or .Params.paige.math (and .Params.paige.show_full_pages (where .Pages "Params.paige.math" "eq" true)) }} {{ partial "paige/link" (dict diff --git a/layouts/partials/paige/scripts.html b/layouts/partials/paige/scripts.html index 44d9bb37..6d00a5c6 100644 --- a/layouts/partials/paige/scripts.html +++ b/layouts/partials/paige/scripts.html @@ -1,7 +1,10 @@ {{ partial "paige/script" (dict - "integrity" (.Site.Params.paige.bootstrap.script.script_integrity | default "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3") - "src" (.Site.Params.paige.bootstrap.script.script_src | default "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js") + "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.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)) }} {{ partial "paige/script" (dict diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html index 50cbdc88..5e0ba907 100644 --- a/layouts/partials/paige/style.html +++ b/layouts/partials/paige/style.html @@ -5,8 +5,8 @@ body, html { blockquote { padding: 0.5rem 1rem; - border-left: 0.25rem solid #e9ecef; - border-right: 0.25rem solid white; + border-left: 0.25rem solid var(--bs-border-color); + padding-right: 0.25rem; } blockquote p:last-of-type { @@ -38,4 +38,20 @@ section[class="paige-metadata"] { margin-left: 0.5ch; 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 }} diff --git a/theme.toml b/theme.toml index dd3068b6..725ef8fc 100644 --- a/theme.toml +++ b/theme.toml @@ -30,6 +30,7 @@ tags = [ "blog", "bootstrap", "contact", + "dark", "hero", "landing", "light",