Introduce dark theme backed by prefers-color-scheme (#12)
Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
Harsh Shandilya
GitHub
parent
693515f586
commit
7d22ee3399
|
|
@ -0,0 +1,75 @@
|
|||
:root {
|
||||
--background-color: white;
|
||||
--text-color: #515151;
|
||||
--heading-color: #313131;
|
||||
--tag-background: #202020;
|
||||
--tag-text-color: white;
|
||||
--blockquote-color: #7a7a7a;
|
||||
--post-time-color: #757575;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #121212;
|
||||
--text-color: #f0f0f0;
|
||||
--heading-color: white;
|
||||
--tag-background: white;
|
||||
--tag-text-color: #121212;
|
||||
--blockquote-color: #bababa;
|
||||
--post-time-color: #bababa;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0091ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--background-color: #121212;
|
||||
--text-color: #f0f0f0;
|
||||
--heading-color: white;
|
||||
--tag-background: white;
|
||||
--tag-text-color: #121212;
|
||||
--blockquote-color: #bababa;
|
||||
--post-time-color: #bababa;
|
||||
}
|
||||
|
||||
div.image-caption {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 2px solid #cccccc;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: var(--tag-text-color);
|
||||
}
|
||||
|
||||
div.tag-container {
|
||||
width: fit-content(300px);
|
||||
margin-bottom: 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: 0rem;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-button {
|
||||
background-color: var(--tag-background);
|
||||
border: none;
|
||||
color: var(--tag-text-color);
|
||||
padding: 7px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="image_caption">
|
||||
<div class="image-caption">
|
||||
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
|
||||
<p>{{ .Text }}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>
|
||||
<a class="link" href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,32 @@
|
|||
<main class="content container">
|
||||
{{ block "main" . -}}{{- end }}
|
||||
</main>
|
||||
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
</body>
|
||||
<!--
|
||||
<script>
|
||||
function switchTheme(e) {
|
||||
if (e.target.checked) {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSwitch = document.querySelector(
|
||||
'.switch input[type="checkbox"]'
|
||||
);
|
||||
|
||||
if (currentTheme) {
|
||||
document.documentElement.setAttribute("data-theme", currentTheme);
|
||||
|
||||
if (currentTheme === "dark") {
|
||||
toggleSwitch.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleSwitch.addEventListener("change", switchTheme, false);
|
||||
</script>
|
||||
-->
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<p class="post-date">
|
||||
<span><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read </span>
|
||||
{{- with .Params.devLink -}}
|
||||
| Also available on <a href="{{ . }}">dev.to</a>
|
||||
| Also available on <a class="link" href="{{ . }}">dev.to</a>
|
||||
{{- end -}}
|
||||
</p>
|
||||
<div class="tag-container">
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<p class="post-date"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read</p>
|
||||
{{ .Description }}
|
||||
{{ if .Truncated }}
|
||||
<div class="read-more-link">
|
||||
<a href="{{ .RelPermalink }}">Read More…</a>
|
||||
<div>
|
||||
<a class="link" href="{{ .RelPermalink }}">Read More…</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"{{with .Site.LanguageCode}} xml:lang="{{.}}" lang="{{.}}"{{end}}>
|
||||
<head>
|
||||
<!--
|
||||
<script>
|
||||
const currentTheme = localStorage.getItem("theme")
|
||||
? localStorage.getItem("theme")
|
||||
: null;
|
||||
|
||||
if (currentTheme) {
|
||||
document.documentElement.setAttribute("data-theme", currentTheme);
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
<link href="https://gmpg.org/xfn/11" rel="profile">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
{{ hugo.Generator }}
|
||||
|
|
@ -16,7 +27,8 @@
|
|||
{{ $hyde := resources.Get "css/hyde.css" | resources.ExecuteAsTemplate "hyde.css" . }}
|
||||
{{ $print := resources.Get "css/print.css" | resources.ExecuteAsTemplate "css/print.css" . | minify | fingerprint }}
|
||||
{{ $syntax := resources.Get "css/syntax.css" | resources.ExecuteAsTemplate "syntax.css" . }}
|
||||
{{ $styles := slice $poole $hyde $syntax | resources.Concat "css/styles.css" | minify | fingerprint }}
|
||||
{{ $custom := resources.Get "css/custom.css" | resources.ExecuteAsTemplate "custom.css" . }}
|
||||
{{ $styles := slice $poole $hyde $syntax $custom | resources.Concat "css/styles.css" | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" {{ printf "integrity=%q" $styles.Data.Integrity | safeHTMLAttr }}>
|
||||
<link rel="stylesheet" href="{{ $print.RelPermalink }}" {{ printf "integrity=%q" $print.Data.Integrity | safeHTMLAttr }} media="print">
|
||||
{{ partialCached "head_fonts.html" . }}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Body resets
|
||||
*
|
||||
|
|
@ -59,8 +58,8 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
color: #515151;
|
||||
background-color: #fff;
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
|
|
@ -82,51 +81,12 @@ a:focus {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div.image_caption {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 2px solid #cccccc;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
div.tag-container {
|
||||
width: fit-content(300px);
|
||||
margin-bottom: 1rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: 0rem;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-button {
|
||||
background-color: #202020;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 7px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
color: #313131;
|
||||
color: var(--heading-color);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
h1 {
|
||||
|
|
@ -232,7 +192,7 @@ pre code {
|
|||
blockquote {
|
||||
padding: .5rem 1rem;
|
||||
margin: .8rem 0;
|
||||
color: #7a7a7a;
|
||||
color: var(--blockquote-color);
|
||||
border-left: .25rem solid #e5e5e5;
|
||||
}
|
||||
blockquote p:last-child {
|
||||
|
|
@ -355,7 +315,7 @@ tbody tr:nth-child(odd) th {
|
|||
.page-title,
|
||||
.post-title,
|
||||
.post-title a {
|
||||
color: #303030;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
.page-title,
|
||||
.post-title {
|
||||
|
|
@ -367,7 +327,7 @@ tbody tr:nth-child(odd) th {
|
|||
display: block;
|
||||
margin-top: -.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #757575;
|
||||
color: var(--post-time-color);
|
||||
}
|
||||
|
||||
/* Related posts */
|
||||
|
|
|
|||
|
|
@ -1,59 +1,60 @@
|
|||
/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
|
||||
/* 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 }
|
||||
/* NameAttribute */ .chroma .na { color: #a6e22e }
|
||||
/* NameClass */ .chroma .nc { color: #a6e22e }
|
||||
/* NameConstant */ .chroma .no { color: #66d9ef }
|
||||
/* NameDecorator */ .chroma .nd { color: #a6e22e }
|
||||
/* NameException */ .chroma .ne { color: #a6e22e }
|
||||
/* NameFunction */ .chroma .nf { color: #a6e22e }
|
||||
/* NameOther */ .chroma .nx { color: #a6e22e }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* 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 }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* GenericDeleted */ .chroma .gd { color: #f92672 }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericInserted */ .chroma .gi { color: #a6e22e }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #75715e }
|
||||
/* Keyword */ .chroma .k { color: #ff79c6 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
|
||||
/* KeywordType */ .chroma .kt { color: #8be9fd }
|
||||
/* NameAttribute */ .chroma .na { color: #50fa7b }
|
||||
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
|
||||
/* NameClass */ .chroma .nc { color: #50fa7b }
|
||||
/* NameFunction */ .chroma .nf { color: #50fa7b }
|
||||
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
|
||||
/* NameTag */ .chroma .nt { color: #ff79c6 }
|
||||
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
|
||||
/* LiteralString */ .chroma .s { color: #f1fa8c }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
|
||||
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
|
||||
/* Operator */ .chroma .o { color: #ff79c6 }
|
||||
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
|
||||
/* Comment */ .chroma .c { color: #6272a4 }
|
||||
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
|
||||
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
|
||||
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
|
||||
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
|
||||
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
|
||||
/* GenericDeleted */ .chroma .gd { color: #8b080b }
|
||||
/* GenericEmph */ .chroma .ge { text-decoration: underline }
|
||||
/* GenericHeading */ .chroma .gh { font-weight: bold }
|
||||
/* GenericInserted */ .chroma .gi { font-weight: bold }
|
||||
/* GenericOutput */ .chroma .go { color: #44475a }
|
||||
/* GenericSubheading */ .chroma .gu { font-weight: bold }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||
|
|
|
|||
Loading…
Reference in New Issue