Add automatic dark/light theme switching based on os
This commit is contained in:
Djordje Atlialp
parent
8035db5c05
commit
79d0488087
16 changed files with 28 additions and 72 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Hello Friend NG
|
||||
|
||||
|
||||
|
||||
|
||||
## General informations
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ This theme was highly inspired by the [hello-friend](https://github.com/panr/hug
|
|||
---
|
||||
## Features
|
||||
|
||||
- Theming: **dark/light mode**, depending on your preferences (dark is default, but you can change it)
|
||||
- Theming: **dark/light mode**, depending on your system preferences
|
||||
- Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
|
||||
- Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
|
||||
- An easy way to modify the theme with Hugo tooling
|
||||
|
|
@ -86,9 +86,6 @@ paginate = 10
|
|||
keywords = "homepage, blog"
|
||||
images = [""]
|
||||
|
||||
# Default theme "light" or "dark"
|
||||
defaultTheme = "dark"
|
||||
|
||||
[taxonomies]
|
||||
category = "blog"
|
||||
tag = "tags"
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
// Toggle theme
|
||||
|
||||
const theme = window.localStorage && window.localStorage.getItem("theme");
|
||||
const themeToggle = document.querySelector(".theme-toggle");
|
||||
const isDark = theme === "dark";
|
||||
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
|
||||
if (theme !== null) {
|
||||
document.body.classList.toggle("dark-theme", isDark);
|
||||
isDark
|
||||
? metaThemeColor.setAttribute("content", "#1b1c1d")
|
||||
: metaThemeColor.setAttribute("content", "#fafafa");
|
||||
}
|
||||
|
||||
themeToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-theme");
|
||||
|
||||
window.localStorage &&
|
||||
window.localStorage.setItem(
|
||||
"theme",
|
||||
document.body.classList.contains("dark-theme") ? "dark" : "light"
|
||||
);
|
||||
|
||||
document.body.classList.contains("dark-theme")
|
||||
? metaThemeColor.setAttribute("content", "#1b1c1d")
|
||||
: metaThemeColor.setAttribute("content", "#fafafa");
|
||||
});
|
||||
|
|
@ -23,20 +23,18 @@ a.button {
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* variants */
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
border-color: $light-background-secondary;
|
||||
box-shadow: none;
|
||||
padding: 8px 18px;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -91,7 +89,7 @@ a.button {
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.header {
|
||||
background: #fafafa;
|
||||
background: $light-background-header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
|
||||
.dark-theme & {
|
||||
background: #1b1c1d;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
&__right {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid $light-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ body {
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.dark-theme {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $dark-background;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@ figure {
|
|||
em, i, strong {
|
||||
color: black;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -190,7 +190,7 @@ code {
|
|||
border-radius: 5px;
|
||||
font-size: 0.95rem;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
}
|
||||
|
|
@ -214,7 +214,7 @@ pre {
|
|||
padding: 0;
|
||||
font-size: inherit;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -290,7 +290,7 @@ hr {
|
|||
background: $light-border-color;
|
||||
height: 1px;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
.menu {
|
||||
background: #fafafa;
|
||||
border-right: 1px solid;
|
||||
margin-right: 18px;
|
||||
background: $light-background-header;
|
||||
z-index: 9999;
|
||||
|
||||
.dark-theme & {
|
||||
background: #1b1c1d;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
@media #{$media-size-phone} {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
letter-spacing: 0.1em;
|
||||
z-index: 1;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background;
|
||||
color: $dark-color-secondary;
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
cursor: pointer;
|
||||
appearance: none;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
padding: 12px 15px;
|
||||
border: 1px solid $light-table-color;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
color: $light-color;
|
||||
text-align: left;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $dark-table-color;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
|
@ -32,7 +32,8 @@
|
|||
tbody {
|
||||
tr {
|
||||
border: 1px solid $light-table-color;
|
||||
.dark-theme & {
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
/* Light theme color */
|
||||
$light-background: #fff;
|
||||
$light-background-secondary: #eaeaea;
|
||||
$light-background-header: #fafafa;
|
||||
$light-color: #222;
|
||||
$light-color-secondary: #999;
|
||||
$light-border-color: #dcdcdc;
|
||||
|
|
@ -11,6 +12,7 @@ $light-table-color: #dcdcdc;
|
|||
/* Dark theme colors */
|
||||
$dark-background: #232425;
|
||||
$dark-background-secondary: #3b3d42;
|
||||
$dark-background-header: #1b1c1d;
|
||||
$dark-color: #a9a9b3;
|
||||
$dark-color-secondary: #b3b3bd;
|
||||
$dark-border-color: #4e4e57;
|
||||
|
|
|
|||
|
|
@ -100,11 +100,6 @@ disableHugoGeneratorInject = false
|
|||
#
|
||||
justifyContent = false # Set "text-align: justify" to .post-content.
|
||||
|
||||
# Default theme "light" or "dark"
|
||||
#
|
||||
defaultTheme = "dark"
|
||||
themeColor = "#1b1c1d"
|
||||
|
||||
# Custom footer
|
||||
# If you want, you can easily override the default footer with your own content.
|
||||
#
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</head>
|
||||
|
||||
{{ block "body" . }}
|
||||
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
|
||||
<body>
|
||||
{{ end }}
|
||||
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "body" }}
|
||||
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}} {{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
|
||||
<body class="{{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
</svg>
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<span class="theme-toggle unselectable">{{ partial "theme-icon.html" . }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
{{ $main := resources.Get "js/main.js" }}
|
||||
{{ $menu := resources.Get "js/menu.js" }}
|
||||
{{ $prism := resources.Get "js/prism.js" }}
|
||||
{{ $theme := resources.Get "js/theme.js" }}
|
||||
{{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
{{ $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
|
||||
|
||||
{{- if .Site.GoogleAnalytics }}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
|
||||
3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
|
||||
13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 317 B |
Loading…
Add table
Add a link
Reference in a new issue