FIX theme toggle
This commit is contained in:
parent
bfccca3b45
commit
553285c04b
GPG key ID:
37591FAF4E6D3462
9 changed files with 111 additions and 34 deletions
|
|
@ -1,6 +1,35 @@
|
|||
$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
$width: 680px;
|
||||
|
||||
$lightBg: white;
|
||||
$lightText: black;
|
||||
$darkBg: #383838;
|
||||
$darkText: white;
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $darkBg;
|
||||
color: $darkText;
|
||||
}
|
||||
body.light {
|
||||
background-color: $lightBg;
|
||||
color: $lightText;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: $lightBg;
|
||||
color: $lightText;
|
||||
}
|
||||
body.dark {
|
||||
background-color: $darkBg;
|
||||
color: $darkText;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
|
|
@ -10,6 +39,11 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -18,7 +52,6 @@ body {
|
|||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #333;
|
||||
font-family: $font;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -76,6 +109,10 @@ a {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.rotate-45 {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
|
||||
.rotate-90 {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
|
||||
.rotate-180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -195,7 +232,7 @@ a {
|
|||
}
|
||||
|
||||
.section-even {
|
||||
background-color: #eee;
|
||||
// background-color: #eee;
|
||||
}
|
||||
|
||||
.section-highlight {
|
||||
|
|
@ -243,7 +280,7 @@ a {
|
|||
border-bottom: 3px solid {{ .Site.Params.color.primary }};
|
||||
}
|
||||
|
||||
.hero-content div {
|
||||
.hero-content > div {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -251,6 +288,21 @@ a {
|
|||
padding-inline-start: 25px;
|
||||
}
|
||||
|
||||
.hero-content .social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-content .social i {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.hero-content .social a {
|
||||
padding-inline: 6px;
|
||||
color: {{ .Site.Params.color.primary }};
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
button {
|
||||
|
|
@ -304,6 +356,5 @@ img {
|
|||
border-radius: 50%;
|
||||
border: 3px solid {{ .Site.Params.color.primary }};
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
}
|
||||
6
layouts/partials/components/icon.html
Normal file
6
layouts/partials/components/icon.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<!--
|
||||
type: string - default: link
|
||||
text: string (optional)
|
||||
url: string
|
||||
-->
|
||||
<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>
|
||||
|
|
@ -3,5 +3,8 @@ type: string - default
|
|||
url: string
|
||||
alt: string
|
||||
-->
|
||||
|
||||
{{ $avatar := "avatar"}}
|
||||
<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
|
||||
|
||||
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
{{ if .social }}
|
||||
<div class="social">
|
||||
{{ range .social }}
|
||||
<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }}{{ .text }}{{ end }}</a>
|
||||
{{ partial "components/icon.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
|
||||
{{ block "opengraph" . }}
|
||||
<meta property="og:type" content="website" />
|
||||
|
|
@ -39,6 +40,6 @@
|
|||
{{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
|
||||
{{ end }}
|
||||
<link id="dark-mode-theme" rel="stylesheet" href="/css/dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
|
||||
<script src="/js/theme.js"></script>
|
||||
</head>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{{ with .Site.Params.header }}
|
||||
<header id="header" class="header">
|
||||
<header id="header">
|
||||
<div class="header">
|
||||
<a class="home" href="/#"><i class="icon-home"></i></a>
|
||||
<div class="items">
|
||||
{{ if .links }}
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<a href="/#"><i class="icon-adjust"></i></a>
|
||||
<a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
|
@ -4,7 +4,7 @@ odd: 0 or 1
|
|||
hero:
|
||||
avatar: image
|
||||
greeting: string
|
||||
social: array
|
||||
social: icon
|
||||
type: string
|
||||
url: string
|
||||
content: string
|
||||
|
|
@ -19,6 +19,13 @@ content: string
|
|||
<div>
|
||||
<h1>{{ .greeting }}</h1>
|
||||
<h3>{{ .introduction }}</h3>
|
||||
{{ if .social }}
|
||||
<div class="social">
|
||||
{{ range .social }}
|
||||
{{ partial "components/icon.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
html {
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
html {
|
||||
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
|
||||
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
|
||||
}
|
||||
body {
|
||||
background-color: #FFF !important;
|
||||
}
|
||||
img,
|
||||
video,
|
||||
body * [style*="background-image"] {
|
||||
filter: hue-rotate(180deg) contrast(100%) invert(100%);
|
||||
-webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
|
||||
}
|
||||
|
||||
/* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ */
|
||||
25
static/js/theme.js
Normal file
25
static/js/theme.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
window.onload = (event) => {
|
||||
const btn = document.getElementById("theme-toggler");
|
||||
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const currentTheme = localStorage.getItem("theme");
|
||||
|
||||
if (currentTheme == "dark") {
|
||||
document.body.classList.toggle("dark");
|
||||
} else if (currentTheme == "light") {
|
||||
document.body.classList.toggle("light");
|
||||
btn.classList.toggle("rotate-180");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
btn.classList.toggle("rotate-180");
|
||||
var theme = "dark";
|
||||
if (darkTheme.matches) {
|
||||
document.body.classList.toggle("light");
|
||||
theme = document.body.classList.contains("light") ? "light" : "dark";
|
||||
} else {
|
||||
document.body.classList.toggle("dark");
|
||||
theme = document.body.classList.contains("dark") ? "dark" : "light";
|
||||
}
|
||||
localStorage.setItem("theme", theme);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue