diff --git a/locales/en.json b/locales/en.json
index 1bd4453..29d9d4d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -35,5 +35,6 @@
"Among with no break line": "Among with ",
"Type to search": "Type to search",
"No results for your search, try something different.": "No results for your search, try something different.",
- "JavaScript license information": "JavaScript license information"
+ "JavaScript license information": "JavaScript license information",
+ "Toggle dark mode": "Toggle dark mode"
}
diff --git a/locales/es.json b/locales/es.json
index b76de60..15e9103 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -35,5 +35,6 @@
"Among with no break line": "Junto con ",
"Type to search": "Escribe para buscar",
"No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
- "JavaScript license information": "Información de licencia JavaScript"
+ "JavaScript license information": "Información de licencia JavaScript",
+ "Toggle dark mode": "Cambiar modo oscuro"
}
diff --git a/package.json b/package.json
index 53a8497..7b1cf9a 100644
--- a/package.json
+++ b/package.json
@@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg"
},
- "version": "0.5.8"
+ "version": "0.5.9"
}
diff --git a/partials/header.hbs b/partials/header.hbs
index e99ea9e..d343fcb 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -99,9 +99,15 @@ This header template is shared across all the pages.
-
-
-
+
diff --git a/src/js/app.js b/src/js/app.js
index 51647eb..6bcda92 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -33,6 +33,8 @@ $(document).ready(() => {
const $inputSearch = $('.js-input-search')
const $searchResults = $('.js-search-results')
const $searchNoResults = $('.js-no-results')
+ const $toggleDarkMode = $('.js-toggle-darkmode')
+ const currentTheme = localStorage.getItem('theme')
let fuse = null
let submenuIsOpen = false
@@ -163,6 +165,16 @@ $(document).ready(() => {
}
})
+ $toggleDarkMode.change(() => {
+ if ($toggleDarkMode.is(':checked')) {
+ $('html').attr('data-theme', 'dark')
+ localStorage.setItem('theme', 'dark')
+ } else {
+ $('html').attr('data-theme', 'light')
+ localStorage.setItem('theme', 'light')
+ }
+ })
+
$(window).click((e) => {
if (submenuIsOpen) {
if ($submenuOption && !$submenuOption.contains(e.target)) {
@@ -172,6 +184,14 @@ $(document).ready(() => {
}
})
+ if (currentTheme) {
+ $('html').attr('data-theme', currentTheme)
+
+ if (currentTheme === 'dark') {
+ $toggleDarkMode.attr('checked', true)
+ }
+ }
+
var headerElement = document.querySelector('.js-header')
if (headerElement) {
@@ -192,7 +212,7 @@ $(document).ready(() => {
infinite: false,
mobileFirst: true,
variableWidth: true,
- rtl: isRTL
+ rtl: isRTL()
})
}
diff --git a/src/sass/app.scss b/src/sass/app.scss
index eadbfa2..4cfb853 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -33,6 +33,7 @@
@import "components/header/recent-articles";
@import "components/header/recent-article";
@import "components/header/tags";
+@import "components/header/toggle-darkmode";
@import "components/hero/hero";
@import "components/hero/avatar";
@import "components/hero/title";
diff --git a/src/sass/common/_themes.scss b/src/sass/common/_themes.scss
index 62a0aad..57c0273 100644
--- a/src/sass/common/_themes.scss
+++ b/src/sass/common/_themes.scss
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
--background-color: #fff;
--primary-foreground-color: #4a4a4a;
--secondary-foreground-color: #000;
@@ -15,10 +16,31 @@
--submenu-shadow-color-opacity: 0.25;
--button-shadow-color-normal: rgba(108, 108, 108, 0.2);
--button-shadow-color-hover: rgba(108, 108, 108, 0.3);
+ --toggle-darkmode-button-color: #fff;
+}
+
+[data-theme="dark"] {
+ --background-color: #111;
+ --primary-foreground-color: #ccc;
+ --secondary-foreground-color: #fff;
+ --primary-subtle-color: #2c2fe6;
+ --secondary-subtle-color: #141920;
+ --titles-color: #b4b4b4;
+ --link-color: #2c2fe6;
+ --primary-border-color: #1d1d1d;
+ --secondary-border-color: #0f0f0f;
+ --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
+ --article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
+ --transparent-background-color: rgba(0,0,0,0.99);
+ --footer-background-color: #080808;
+ --submenu-shadow-color-opacity: 0.55;
+ --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
+ --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
+ --toggle-darkmode-button-color: #efd114;
}
@media (prefers-color-scheme: dark) {
- :root {
+ :root:not([data-theme="light"]) {
--background-color: #111;
--primary-foreground-color: #ccc;
--secondary-foreground-color: #fff;
@@ -35,5 +57,6 @@
--submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
+ --toggle-darkmode-button-color: #efd114;
}
}
diff --git a/src/sass/components/header/_menu.scss b/src/sass/components/header/_menu.scss
index e287e99..1461e0b 100644
--- a/src/sass/components/header/_menu.scss
+++ b/src/sass/components/header/_menu.scss
@@ -35,9 +35,11 @@
.m-menu__main {
padding: 50px 0 5px;
+ min-height: 100%;
@include respond-to('medium') {
padding: 0;
+ min-height: 0;
}
}
diff --git a/src/sass/components/header/_nav.scss b/src/sass/components/header/_nav.scss
index bb99bed..23fffe8 100644
--- a/src/sass/components/header/_nav.scss
+++ b/src/sass/components/header/_nav.scss
@@ -53,6 +53,12 @@
}
}
+.m-nav__right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
.rtl {
.m-nav__left ul li {
@include respond-to('medium') {
diff --git a/src/sass/components/header/_toggle-darkmode.scss b/src/sass/components/header/_toggle-darkmode.scss
new file mode 100644
index 0000000..d73082e
--- /dev/null
+++ b/src/sass/components/header/_toggle-darkmode.scss
@@ -0,0 +1,58 @@
+.m-toggle-darkmode {
+ position: fixed;
+ right: $mobile-space;
+ bottom: $mobile-space;
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ overflow: hidden;
+
+ @include respond-to('medium') {
+ position: relative;
+ right: auto;
+ bottom: auto;
+ margin-left: 20px;
+ }
+
+ input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ outline: 0;
+ border: 0;
+ opacity: 0;
+ cursor: pointer;
+ z-index: 2;
+ @extend .no-appearance;
+ }
+
+ input::-moz-focus-inner {
+ border: 0;
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+ background-color: $titles;
+ z-index: 1;
+
+ &:after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: var(--toggle-darkmode-button-color);
+ @include transition(background-color linear 0.2s);
+ }
+ }
+}