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

Add a theme toggle

Browse source
This commit is contained in:
Djordje Atlialp 2021-04-07 19:10:40 +02:00
parent 128e1be607
commit a64d27b8fc
11 changed files with 278 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

52
assets/js/main.js
View file

@ -1 +1,51 @@
// Some code could be here ...
/**
* Theming.
*
* Supports the preferred color scheme of the operation system as well as
* the theme choice of the user.
*
*/
const themeToggle = document.querySelector(".theme-toggle");
const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
const chosenThemeIsDark = chosenTheme == "dark";
const chosenThemeIsLight = chosenTheme == "light";
// Detect the color scheme the operating system prefers.
function detectOSColorTheme() {
if (chosenThemeIsDark) {
document.documentElement.setAttribute("data-theme", "dark");
} else if (chosenThemeIsLight) {
document.documentElement.setAttribute("data-theme", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
// Switch the theme.
function switchTheme(e) {
if (chosenThemeIsDark) {
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", "dark");
}
detectOSColorTheme();
window.location.reload();
}
// Event listener
if (themeToggle) {
themeToggle.addEventListener("click", switchTheme, false);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
window
.matchMedia("(prefers-color-scheme: light)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
detectOSColorTheme();
} else {
localStorage.removeItem("theme");
}

44
assets/scss/_buttons.scss
View file

@ -13,7 +13,6 @@ a.button {
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-weight: 500;
@ -24,13 +23,25 @@ a.button {
outline: none;
@media (prefers-color-scheme: dark) {
background: $dark-background-secondary;
background: $dark-background-header;
color: inherit;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
color: inherit;
}
[data-theme=light] & {
background: $light-background-header;
}
&.outline {
background: transparent;
border-color: $light-background-secondary;
box-shadow: none;
padding: 8px 18px;
@ -38,6 +49,19 @@ a.button {
border-color: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
border-color: $light-background-secondary;
}
[data-theme=dark] & {
border-color: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
border-color: $light-background-secondary;
}
:hover {
transform: none;
@ -78,7 +102,6 @@ a.button {
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-size: 13px;
@ -93,5 +116,18 @@ a.button {
background: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
background: $light-background-secondary;
}
}
}

15
assets/scss/_header.scss
View file

@ -1,5 +1,4 @@
.header {
background: $light-background-header;
display: flex;
align-items: center;
justify-content: center;
@ -10,6 +9,18 @@
background: $dark-background-header;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
&__right {
display: flex;
flex-direction: row;
@ -42,7 +53,7 @@
fill: currentColor;
}
.unselectable {
.not-selectable {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

16
assets/scss/_list.scss
View file

@ -10,10 +10,20 @@
}
&:not(:last-of-type) {
border-bottom: 1px solid $light-border-color;
@media (prefers-color-scheme: dark) {
border-color: $dark-border-color;
border-bottom: 1px solid $dark-border-color;
}
@media (prefers-color-scheme: light) {
border-bottom: 1px solid $light-border-color;
}
[data-theme=dark] & {
border-bottom: 1px solid $dark-border-color;
}
[data-theme=light] & {
border-bottom: 1px solid $light-border-color;
}
}

70
assets/scss/_main.scss
View file

@ -19,8 +19,6 @@ body {
font-display: auto;
font-size: 1rem;
line-height: 1.54;
background-color: $light-background;
color: $light-color;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
@ -39,6 +37,21 @@ body {
background-color: $dark-background;
color: $dark-color;
}
@media (prefers-color-scheme: light) {
background-color: $light-background;
color: $light-color;
}
[data-theme=dark] & {
background-color: $dark-background;
color: $dark-color;
}
[data-theme=light] & {
background-color: $light-background;
color: $light-color;
}
}
h2,
@ -173,18 +186,27 @@ figure {
}
em, i, strong {
color: black;
@media (prefers-color-scheme: dark) {
color: white;
}
@media (prefers-color-scheme: light) {
color: black;
}
[data-theme=dark] & {
color: white;
}
[data-theme=light] & {
color: black;
}
}
code {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-display: auto;
font-feature-settings: normal;
background: $light-background-secondary;
padding: 1px 6px;
margin: 0 2px;
border-radius: 5px;
@ -193,6 +215,18 @@ code {
@media (prefers-color-scheme: dark) {
background: $dark-background-secondary;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
}
[data-theme=light] & {
background: $light-background-secondary;
}
}
pre {
@ -209,7 +243,6 @@ pre {
code {
background: none !important;
color: #ccc;
margin: 0;
padding: 0;
font-size: inherit;
@ -217,6 +250,18 @@ pre {
@media (prefers-color-scheme: dark) {
color: inherit;
}
@media (prefers-color-scheme: light) {
color: #ccc;
}
[data-theme=dark] & {
color: inherit;
}
[data-theme=light] & {
color: #ccc;
}
}
}
@ -287,12 +332,23 @@ ol ol {
hr {
width: 100%;
border: none;
background: $light-border-color;
height: 1px;
@media (prefers-color-scheme: dark) {
background: $dark-border-color;
}
@media (prefers-color-scheme: light) {
background: $light-border-color;
}
[data-theme=dark] & {
background: $dark-border-color;
}
[data-theme=light] & {
background: $light-border-color;
}
}
.hidden {

13
assets/scss/_menu.scss
View file

@ -1,11 +1,22 @@
.menu {
background: $light-background-header;
z-index: 9999;
@media (prefers-color-scheme: dark) {
background: $dark-background-header;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
@media #{$media-size-phone} {
position: absolute;
top: 50px;

30
assets/scss/_single.scss
View file

@ -110,8 +110,6 @@
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: $light-background;
color: $light-color-secondary;
font-size: 0.8rem;
text-transform: uppercase;
text-decoration: none;
@ -122,6 +120,21 @@
background: $dark-background;
color: $dark-color-secondary;
}
@media (prefers-color-scheme: light) {
background: $light-background;
color: $light-color-secondary;
}
[data-theme=dark] & {
background: $dark-background;
color: $dark-color-secondary;
}
[data-theme=light] & {
background: $light-background;
color: $light-color-secondary;
}
}
hr {
@ -151,7 +164,6 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: $light-background-secondary;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
@ -164,6 +176,18 @@
background: $dark-background-secondary;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
}
[data-theme=light] & {
background: $light-background-secondary;
}
+ .button {
margin-left: 10px;
}

46
assets/scss/_tables.scss
View file

@ -9,33 +9,67 @@
th,
td {
padding: 12px 15px;
border: 1px solid $light-table-color;
@media (prefers-color-scheme: dark) {
border: 1px solid $dark-table-color;
}
@media (prefers-color-scheme: light) {
border: 1px solid $light-table-color;
}
[data-theme=dark] & {
border: 1px solid $dark-table-color;
}
[data-theme=light] & {
border: 1px solid $light-table-color;
}
}
thead {
tr {
background-color: $light-table-color;
color: $light-color;
text-align: left;
@media (prefers-color-scheme: dark) {
background-color: $dark-table-color;
color: $dark-color;
}
@media (prefers-color-scheme: light) {
background-color: $light-table-color;
color: $light-color;
}
[data-theme=dark] & {
background-color: $dark-table-color;
color: $dark-color;
}
[data-theme=light] & {
background-color: $light-table-color;
color: $light-color;
}
}
}
tbody {
tr {
border: 1px solid $light-table-color;
@media (prefers-color-scheme: dark) {
border: 1px solid $dark-table-color;
}
@media (prefers-color-scheme: light) {
border: 1px solid $light-table-color;
}
[data-theme=dark] & {
border: 1px solid $dark-table-color;
}
[data-theme=light] & {
border: 1px solid $light-table-color;
}
}
}
}