kaholaz/hello-friend-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add automatic dark/light theme switching based on os

Browse source
This commit is contained in:
Djordje Atlialp 2021-01-14 10:55:00 +01:00
parent 8035db5c05
commit 79d0488087
16 changed files with 28 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/js/theme.js
View file

@ -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");
});

8
assets/scss/_buttons.scss
View file

@ -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;
}

6
assets/scss/_header.scss
View file

@ -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 {

2
assets/scss/_list.scss
View file

@ -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;
}
}

10
assets/scss/_main.scss
View file

@ -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;
}
}

8
assets/scss/_menu.scss
View file

@ -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} {

4
assets/scss/_single.scss
View file

@ -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;
}

7
assets/scss/_tables.scss
View file

@ -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;
}
}

2
assets/scss/_variables.scss
View file

@ -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;