Added themes
This commit is contained in:
parent
076a4ec391
commit
627f1f5d32
GPG key ID:
F92E51B86E07177E
12 changed files with 213 additions and 108 deletions
122
assets/base.css
122
assets/base.css
|
|
@ -1,19 +1,109 @@
|
|||
.black-theme {
|
||||
/* Black mode */
|
||||
--bg-0: #181818;
|
||||
--bg-1: #252525;
|
||||
--bg-2: #3b3b3b;
|
||||
--dim: #777777;
|
||||
--fg-0: #b9b9b9;
|
||||
--fg-1: #dedede;
|
||||
--red: #ed4a46;
|
||||
--green: #70b433;
|
||||
--yellow: #dbb32d;
|
||||
--blue: #368aeb;
|
||||
--magenta: #eb6eb7;
|
||||
--cyan: #3fc5b7;
|
||||
--orange: #e67f43;
|
||||
--violet: #a580e2;
|
||||
--br_red: #ff5e56;
|
||||
--br_green: #83c746;
|
||||
--br_yellow: #efc541;
|
||||
--br_blue: #4f9cfe;
|
||||
--br_magenta: #ff81ca;
|
||||
--br_cyan: #56d8c9;
|
||||
--br_orange: #fa9153;
|
||||
--br_violet: #b891f5;
|
||||
}
|
||||
.dark-theme {
|
||||
/* Dark mode */
|
||||
--bg-0: #103c48;
|
||||
--bg-1: #184956;
|
||||
--bg-2: #2d5b69;
|
||||
--dim: #72898f;
|
||||
--fg-0: #adbcbc;
|
||||
--fg-1: #cad8d9;
|
||||
--red: #fa5750;
|
||||
--green: #75b938;
|
||||
--yellow: #dbb32d;
|
||||
--blue: #4695f7;
|
||||
--magenta: #f275be;
|
||||
--cyan: #41c7b9;
|
||||
--orange: #ed8649;
|
||||
--violet: #af88eb;
|
||||
--br_red: #ff665c;
|
||||
--br_green: #84c747;
|
||||
--br_yellow: #ebc13d;
|
||||
--br_blue: #58a3ff;
|
||||
--br_magenta: #ff84cd;
|
||||
--br_cyan: #53d6c7;
|
||||
--br_orange: #fd9456;
|
||||
--br_violet: #bd96fa;
|
||||
}
|
||||
.light-theme {
|
||||
/* Light mode */
|
||||
--bg-0: #fbf3db;
|
||||
--bg-1: #ece3cc;
|
||||
--bg-2: #d5cdb6;
|
||||
--dim: #909995;
|
||||
--fg-0: #53676d;
|
||||
--fg-1: #3a4d53;
|
||||
--red: #d2212d;
|
||||
--green: #489100;
|
||||
--yellow: #ad8900;
|
||||
--blue: #0072d4;
|
||||
--magenta: #ca4898;
|
||||
--cyan: #009c8f;
|
||||
--orange: #c25d1e;
|
||||
--violet: #8762c6;
|
||||
--br_red: #cc1729;
|
||||
--br_green: #428b00;
|
||||
--br_yellow: #a78300;
|
||||
--br_blue: #006dce;
|
||||
--br_magenta: #c44392;
|
||||
--br_cyan: #00978a;
|
||||
--br_orange: #bc5819;
|
||||
--br_violet: #825dc0;
|
||||
}
|
||||
|
||||
#themes {
|
||||
background-color: var(--bg-0);
|
||||
border: none;
|
||||
color: var(--fg-1);
|
||||
font-size: 0.9em;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
background-color: var(--bg-0);
|
||||
color: var(--fg-0);
|
||||
}
|
||||
body {
|
||||
background-color: var(--bg-1);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
|
||||
"Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
|
||||
"Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
|
||||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
}
|
||||
main {
|
||||
background-color: var(--bg-1);
|
||||
padding-left:1em;
|
||||
padding-right:1em;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
|
|
@ -25,6 +115,8 @@ p {
|
|||
overflow-wrap: anywhere;
|
||||
}
|
||||
pre,code {
|
||||
background-color: var(--bg-0);
|
||||
color: var(--fg-0);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
nav#TableOfContents ul {
|
||||
|
|
@ -53,7 +145,25 @@ h1, h2, h3, h4, h5 {
|
|||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
img[src*='#center'] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
img[src*='#center'] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--yellow);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--orange);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
h1,
|
||||
body header nav ul li a,
|
||||
body header nav ul li a:visited {
|
||||
color: var(--red);
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: var(--green);
|
||||
}
|
||||
|
|
|
|||
112
assets/code.css
112
assets/code.css
|
|
@ -1,86 +1,86 @@
|
|||
/* Background */ .bg { color: #b9b9b9; background-color: #181818; }
|
||||
/* PreWrapper */ .chroma { color: #b9b9b9; background-color: #181818; }
|
||||
/* Other */ .chroma .x { color: #e67f43 }
|
||||
/* Background */ .bg { color: var(--fg-0); background-color: var(--bg-0); }
|
||||
/* PreWrapper */ .chroma { color: var(--fg-0); background-color: var(--bg-0); }
|
||||
/* Other */ .chroma .x { color: var(--orange) }
|
||||
/* Error */ .chroma .err { }
|
||||
/* 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: #dedede }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 }
|
||||
/* LineHighlight */ .chroma .hl { background-color: var(--fg-1) }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--fg-1) }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--fg-1) }
|
||||
/* Line */ .chroma .line { display: flex; }
|
||||
/* Keyword */ .chroma .k { color: #70b443 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #e67f43 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #368aeb }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #70b443 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #70b443 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #368aeb }
|
||||
/* KeywordType */ .chroma .kt { color: #ed4a46 }
|
||||
/* Keyword */ .chroma .k { color: var(--green) }
|
||||
/* KeywordConstant */ .chroma .kc { color: var(--orange) }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: var(--blue) }
|
||||
/* KeywordNamespace */ .chroma .kn { color: var(--green) }
|
||||
/* KeywordPseudo */ .chroma .kp { color: var(--green) }
|
||||
/* KeywordReserved */ .chroma .kr { color: var(--blue) }
|
||||
/* KeywordType */ .chroma .kt { color: var(--red) }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { }
|
||||
/* NameBuiltin */ .chroma .nb { color: #dbb32d }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color: #368aeb }
|
||||
/* NameClass */ .chroma .nc { color: #368aeb }
|
||||
/* NameConstant */ .chroma .no { color: #e67f43 }
|
||||
/* NameDecorator */ .chroma .nd { color: #368aeb }
|
||||
/* NameEntity */ .chroma .ni { color: #e67f43 }
|
||||
/* NameException */ .chroma .ne { color: #e67f43 }
|
||||
/* NameFunction */ .chroma .nf { color: #368aeb }
|
||||
/* NameBuiltin */ .chroma .nb { color: var(--yellow) }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color: var(--blue) }
|
||||
/* NameClass */ .chroma .nc { color: var(--blue) }
|
||||
/* NameConstant */ .chroma .no { color: var(--orange) }
|
||||
/* NameDecorator */ .chroma .nd { color: var(--blue) }
|
||||
/* NameEntity */ .chroma .ni { color: var(--orange) }
|
||||
/* NameException */ .chroma .ne { color: var(--orange) }
|
||||
/* NameFunction */ .chroma .nf { color: var(--blue) }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { }
|
||||
/* NameNamespace */ .chroma .nn { }
|
||||
/* NameOther */ .chroma .nx { }
|
||||
/* NameProperty */ .chroma .py { }
|
||||
/* NameTag */ .chroma .nt { color: #368aeb }
|
||||
/* NameVariable */ .chroma .nv { color: #368aeb }
|
||||
/* NameTag */ .chroma .nt { color: var(--blue) }
|
||||
/* NameVariable */ .chroma .nv { color: var(--blue) }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { }
|
||||
/* LiteralDate */ .chroma .ld { }
|
||||
/* LiteralString */ .chroma .s { color: #3fc5b7 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #3fc5b7 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #777777 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #3fc5b7 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #3fc5b7 }
|
||||
/* LiteralString */ .chroma .s { color: var(--cyan) }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: var(--cyan) }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: var(--dim) }
|
||||
/* LiteralStringChar */ .chroma .sc { color: var(--cyan) }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: var(--cyan) }
|
||||
/* LiteralStringDoc */ .chroma .sd { }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #3fc5b7 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #e67f43 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: var(--cyan) }
|
||||
/* LiteralStringEscape */ .chroma .se { color: var(--orange) }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #3fc5b7 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #3fc5b7 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #ed4a46 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #3fc5b7 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #3fc5b7 }
|
||||
/* LiteralNumber */ .chroma .m { color: #3fc5b7 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #3fc5b7 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #3fc5b7 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #3fc5b7 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #3fc5b7 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #3fc5b7 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #3fc5b7 }
|
||||
/* Operator */ .chroma .o { color: #70b443 }
|
||||
/* OperatorWord */ .chroma .ow { color: #70b443 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: var(--cyan) }
|
||||
/* LiteralStringOther */ .chroma .sx { color: var(--cyan) }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: var(--red) }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: var(--cyan) }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: var(--cyan) }
|
||||
/* LiteralNumber */ .chroma .m { color: var(--cyan) }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: var(--cyan) }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: var(--cyan) }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: var(--cyan) }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: var(--cyan) }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--cyan) }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: var(--cyan) }
|
||||
/* Operator */ .chroma .o { color: var(--green) }
|
||||
/* OperatorWord */ .chroma .ow { color: var(--green) }
|
||||
/* Punctuation */ .chroma .p { }
|
||||
/* Comment */ .chroma .c { color: #777777 }
|
||||
/* CommentHashbang */ .chroma .ch { color: #777777 }
|
||||
/* CommentMultiline */ .chroma .cm { color: #777777 }
|
||||
/* CommentSingle */ .chroma .c1 { color: #777777 }
|
||||
/* CommentSpecial */ .chroma .cs { color: #70b443 }
|
||||
/* CommentPreproc */ .chroma .cp { color: #70b443 }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #70b443 }
|
||||
/* Comment */ .chroma .c { color: var(--dim) }
|
||||
/* CommentHashbang */ .chroma .ch { color: var(--dim) }
|
||||
/* CommentMultiline */ .chroma .cm { color: var(--dim) }
|
||||
/* CommentSingle */ .chroma .c1 { color: var(--dim) }
|
||||
/* CommentSpecial */ .chroma .cs { color: var(--green) }
|
||||
/* CommentPreproc */ .chroma .cp { color: var(--green) }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: var(--green) }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #ed4a46 }
|
||||
/* GenericDeleted */ .chroma .gd { color: var(--red) }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { color: #ed4a46; font-weight: bold }
|
||||
/* GenericHeading */ .chroma .gh { color: #e67f43 }
|
||||
/* GenericInserted */ .chroma .gi { color: #70b443 }
|
||||
/* GenericError */ .chroma .gr { color: var(--red); font-weight: bold }
|
||||
/* GenericHeading */ .chroma .gh { color: var(--orange) }
|
||||
/* GenericInserted */ .chroma .gi { color: var(--green) }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #368aeb }
|
||||
/* GenericSubheading */ .chroma .gu { color: var(--blue) }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
footer {
|
||||
background-color: #181818;
|
||||
background-color: var(--bg-0);
|
||||
padding: 10px;
|
||||
}
|
||||
footer p {
|
||||
color: #70b443;
|
||||
color: var(--green);
|
||||
text-align: center;
|
||||
}
|
||||
footer a {
|
||||
color: #70b443;
|
||||
color: var(--green);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
header {
|
||||
background-color: #181818;
|
||||
background-color: var(--bg-0);
|
||||
}
|
||||
header nav ul {
|
||||
list-style-type: none;
|
||||
|
|
@ -19,10 +19,10 @@ header nav ul li a {
|
|||
text-decoration: none;
|
||||
}
|
||||
header nav ul li a:hover {
|
||||
background-color: #252525;
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
.nav-menu-active {
|
||||
background-color: #252525;
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
.nav-menu-title {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
border-radius:.25rem;
|
||||
}
|
||||
.pagination li {
|
||||
background-color: #181818;
|
||||
background-color: var(--bg-0);
|
||||
}
|
||||
.pagination li a {
|
||||
border:1px solid rgba(0,0,0,.1);
|
||||
|
|
@ -23,16 +23,16 @@
|
|||
border-bottom-right-radius:.25rem
|
||||
}
|
||||
.pagination .pagination-enabled a:hover {
|
||||
background-color: #252525;
|
||||
background-color: var(--bg-1);
|
||||
z-index: 999;
|
||||
}
|
||||
.pagination-disabled a {
|
||||
color: #dedede;
|
||||
color: var(--dim);
|
||||
}
|
||||
.pagination-disabled a:hover {
|
||||
color: #dedede;
|
||||
color: var(--dim);
|
||||
}
|
||||
.pagination-active a {
|
||||
color: b9b9b9;
|
||||
background-color: #252525;
|
||||
color: var(--fg-0);
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
html {
|
||||
background-color: #181818;
|
||||
color: #b9b9b9;
|
||||
}
|
||||
body, main {
|
||||
background-color: #252525;
|
||||
}
|
||||
a {
|
||||
color: #dbb32d;
|
||||
}
|
||||
a:visited {
|
||||
color: #e67f43;
|
||||
}
|
||||
a:hover {
|
||||
color: #ed4a46;
|
||||
}
|
||||
h1,
|
||||
body header nav ul li a,
|
||||
body header nav ul li a:visited {
|
||||
color: #ed4a46;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: #70b443;
|
||||
}
|
||||
pre, code {
|
||||
background-color: #181818;
|
||||
color: #b9b9b9;
|
||||
}
|
||||
|
|
@ -18,7 +18,6 @@ lineNoStart = 1
|
|||
lineNos = false
|
||||
lineNumbersInTable = true
|
||||
noClasses = false
|
||||
style = 'solarized-dark'
|
||||
tabWidth = 2
|
||||
|
||||
[permalinks]
|
||||
|
|
|
|||
|
|
@ -89,6 +89,9 @@ spec:
|
|||
apiVersion: networking.k8s.io/v1
|
||||
kind: Ingress
|
||||
metadata:
|
||||
annotations:
|
||||
nginx.ingress.kubernetes.io/configuration-snippet: |
|
||||
more_set_headers "Content-Security-Policy: script-src 'unsafe-inline'";
|
||||
namespace: www
|
||||
name: www
|
||||
spec:
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
{{- $header := resources.Get "header.css" -}}
|
||||
{{- $home := resources.Get "home.css" -}}
|
||||
{{- $pagination := resources.Get "pagination.css" -}}
|
||||
{{- $selenized := resources.Get "selenized.css" -}}
|
||||
{{- $allCss := slice $base $code $footer $header $home $pagination $selenized | resources.Concat "static/all.css" | fingerprint | minify -}}
|
||||
{{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}}
|
||||
<link rel="stylesheet" href="{{ $allCss.Permalink }}">
|
||||
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
|
|
@ -33,5 +32,6 @@
|
|||
<p>Sorry, but the page you were trying to view does not exist. Please refer to the menu above to resume your navigation.</p>
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
{{- partial "themeSwitcher.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ $title := print .Title " | " .Site.Title }}
|
||||
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<html class="black-theme" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -15,8 +15,7 @@
|
|||
{{- $header := resources.Get "header.css" -}}
|
||||
{{- $home := resources.Get "home.css" -}}
|
||||
{{- $pagination := resources.Get "pagination.css" -}}
|
||||
{{- $selenized := resources.Get "selenized.css" -}}
|
||||
{{- $allCss := slice $base $code $footer $header $home $pagination $selenized | resources.Concat "static/all.css" | fingerprint | minify -}}
|
||||
{{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}}
|
||||
<link rel="stylesheet" href="{{ $allCss.Permalink }}">
|
||||
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
|
|
@ -32,5 +31,6 @@
|
|||
{{- block "main" . }}{{ end -}}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
{{- partial "themeSwitcher.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li class="nav-menu-title{{if .IsHome}} nav-menu-active{{end}}"><a href="/">{{ .Site.Title }}</a></li>
|
||||
<li>
|
||||
<select id="themes" class="nav-menu-magin-left" onchange="setTheme()">
|
||||
<option value="black-theme">Black</option>
|
||||
<option value="dark-theme">Dark</option>
|
||||
<option value="light-theme">Light</option>
|
||||
</select>
|
||||
</li>
|
||||
{{- $p := . -}}
|
||||
|
||||
{{- range first 1 .Site.Menus.main.ByWeight -}}
|
||||
|
|
|
|||
14
layouts/partials/themeSwitcher.html
Normal file
14
layouts/partials/themeSwitcher.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
function setTheme() {
|
||||
const themeName = document.getElementById('themes').value;
|
||||
localStorage.setItem('theme', themeName);
|
||||
document.documentElement.className = themeName;
|
||||
}
|
||||
(function () { // Set the theme on page load
|
||||
const themeName = localStorage.getItem('theme');
|
||||
if (themeName) {
|
||||
document.documentElement.className = themeName;
|
||||
document.getElementById('themes').value = themeName;
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue