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 - -![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png) + Light theme + +![tabi-light](https://user-images.githubusercontent.com/6399341/216767537-94c431bb-10f9-48c3-942b-e64b27d98c7d.png)
- Light theme - -![tabi-light](https://user-images.githubusercontent.com/6399341/216767537-94c431bb-10f9-48c3-942b-e64b27d98c7d.png) + Dark theme + +![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png)
## 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);