diff --git a/README.md b/README.md
index 47a0f3a..ffa0ba4 100644
--- a/README.md
+++ b/README.md
@@ -6,15 +6,15 @@ A simple blog theme powered by [Zola](getzola.org). See a live preview [here](ht
- Dark theme
-
-
+ Light theme
+
+
- Light theme
-
-
+ Dark theme
+
+
## Features
diff --git a/sass/main.scss b/sass/main.scss
index ec2417d..81185d9 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -23,26 +23,6 @@
font-family: 'Inter', Arial, Helvetica, sans-serif;
line-height: 190%;
- --bg-0: #818181;
- --bg-1: rgba(133, 133, 133, 0.5);
- --bg-2: rgba(23, 23, 23, 100%);
- --primary-color: #ef5350;
- --hover-color: white;
- --background-color: #1f1f1f;
- --secondary-color: #696969;
- --highlights: #b35a5a;
- --links: #d35d6e;
- --text-color: #e1e1e1;
- --code: #ef476f;
- --border-color: rgb(0, 0, 0);
- --light-border-color: rgba(255, 255, 255, 0.1);
- --input-back: #4b4a4a;
- --input-color: #294797;
- --meta-color: rgb(198, 197, 197);
- --accent-color: #ff9a8c;
-}
-
-[data-theme='light'] {
--bg-0: #fff;
--bg-1: #e7e7e7;
--bg-2: #fefefe;
@@ -62,6 +42,25 @@
--accent-color: #aacb73;
}
+[data-theme='dark'] {
+ --bg-0: #818181;
+ --bg-1: rgba(133, 133, 133, 0.5);
+ --bg-2: rgba(23, 23, 23, 100%);
+ --primary-color: #ef5350;
+ --hover-color: white;
+ --background-color: #1f1f1f;
+ --secondary-color: #696969;
+ --highlights: #b35a5a;
+ --links: #d35d6e;
+ --text-color: #e1e1e1;
+ --code: #ef476f;
+ --border-color: rgb(0, 0, 0);
+ --light-border-color: rgba(255, 255, 255, 0.1);
+ --input-back: #4b4a4a;
+ --input-color: #294797;
+ --meta-color: rgb(198, 197, 197);
+ --accent-color: #ff9a8c;
+}
html {
background-color: var(--background-color);
color: var(--text-color);
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
index f5befc3..e848ca8 100644
--- a/sass/parts/_footer.scss
+++ b/sass/parts/_footer.scss
@@ -40,10 +40,18 @@ footer {
width: 32px;
height: 32px;
padding: 18px;
+ filter: invert(0);
+ }
+
+.social {
+ &:hover {
+ &>img {
filter: invert(1);
}
-
-[data-theme="light"] {
+ }
+}
+
+[data-theme="dark"] {
.social {
&:hover {
&>img {
@@ -52,7 +60,7 @@ footer {
}
&>img {
- filter: none;
+ filter: invert(1);
}
}
}
diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss
index 770d385..7379cf7 100644
--- a/sass/parts/_theme-switch.scss
+++ b/sass/parts/_theme-switch.scss
@@ -23,20 +23,20 @@
border: none;
}
.sun {
- opacity: 1;
+ opacity: 0;
}
.moon {
- opacity: 0;
+ opacity: 1;
}
}
input {
display: none;
&:checked + .switch {
.sun {
- opacity: 0;
+ opacity: 1;
}
.moon {
- opacity: 1;
+ opacity: 0;
}
}
}
diff --git a/sass/syntax/syntax-ayu-dark.scss b/sass/syntax/syntax-ayu-dark.scss
index f14e80b..71405c9 100644
--- a/sass/syntax/syntax-ayu-dark.scss
+++ b/sass/syntax/syntax-ayu-dark.scss
@@ -1,9 +1,9 @@
.z-code {
color: #bfbab0;
- background-color: #151515;
+ background-color: #272430;
}
-[data-theme="light"] .z-code {
- background-color: #272430
+[data-theme="dark"] .z-code {
+ background-color: #151515;
}
.z-comment,
.z-punctuation.z-definition.z-comment {
diff --git a/static/js/main.js b/static/js/main.js
index def90cd..946380e 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -6,7 +6,7 @@ var currentTheme = localStorage.getItem('theme');
// check what is current theme right now and activate it
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
- if (currentTheme === 'light') {
+ if (currentTheme === 'dark') {
themeSwitcher.checked = true;
}
}
@@ -14,14 +14,14 @@ if (currentTheme) {
// switch between themes
function switchTheme(e) {
if (e.target.checked) {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ localStorage.setItem('theme', 'dark');
+ }
+ else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
- else {
- document.documentElement.setAttribute('data-theme', 'dark');
- localStorage.setItem('theme', 'dark');
- }
}
// event listener on checkbox change
-themeSwitcher.addEventListener('change', switchTheme, false);
\ No newline at end of file
+themeSwitcher.addEventListener('change', switchTheme, false);