Add dark-theme

This commit is contained in:
DangerousFreedom 2022-03-30 17:21:26 +02:00
parent 5f2a2f2187
commit 4c00b94a36
9 changed files with 296 additions and 9 deletions

72
Gemfile.lock Normal file
View File

@ -0,0 +1,72 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.9)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
ffi (1.15.5)
forwardable-extended (2.6.0)
http_parser.rb (0.8.0)
i18n (1.10.0)
concurrent-ruby (~> 1.0)
jekyll (4.2.1)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.3)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 2.0)
jekyll-feed (0.16.0)
jekyll (>= 3.7, < 5.0)
jekyll-paginate (1.1.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.3.1)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.7.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
rb-fsevent (0.11.1)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.5)
rouge (3.28.0)
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
unicode-display_width (1.8.0)
PLATFORMS
ruby
DEPENDENCIES
jekyll (~> 4.0)
jekyll-feed
jekyll-paginate
BUNDLED WITH
2.1.2

View File

@ -31,7 +31,7 @@ version: "1.1.0"
excerpt_separator: <!--more--> excerpt_separator: <!--more-->
# Options # Options
custom_header: false custom_header: true
custom_nav_footer: false custom_nav_footer: false
reverse: false reverse: false

View File

@ -1,5 +1,113 @@
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 0px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
table {
margin-top: 34px;
}
td {
height: 50px;
vertical-align: middle;
}
</style>
<!--<label class="switch">-->
<!--<input type="checkbox" checked>-->
<!--<span class="slider round"></span>-->
<!--</label>-->
<header id="header"> <header id="header">
<!-- Your custom header here --> <!-- Your custom header here -->
<div>
<a href="{{ site.baseurl }}">
<img src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo"-->
</a>
</div>
<div class="revuo-classes">
<a href="{{ site.baseurl }}" class="wk">Weekly</a>
<a href="/periodicals/" class="pd">Periodical</a>
</div>
<!--Add dark mode here-->
<div>
<table align="center">
<tr>
<td>
<img src="{{ "/img/dark-theme-icon2.png" | prepend: site.baseurl | replace: '//', '/' }}" height="50px" width="50px" alt="Dark Theme"-->
</td>
<td>
<label class="switch">
<input type="checkbox" onclick="toggledark(this)">
<span class="slider round"></span>
</label>
</td>
</tr>
</table>
</div>
<!--Finish dark mode-->
</header> </header>

View File

@ -18,9 +18,9 @@ html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
/*- Base color -*/ /*- Base color -*/
$main-color: #45494f; $main-color: #999999;
$background-color: #FDFDFD; $background-color: #0F0F0F;
$text-color: #222222; $text-color: #888888;
/*- Base settings -*/ /*- Base settings -*/
@ -50,8 +50,8 @@ a {
transition: all .3s ease; transition: all .3s ease;
&:hover, &:hover,
&:focus { &:focus {
color: #d26e2b; color: #999999;
border-bottom: 2px dotted #d26e2b; border-bottom: 2px dotted #333333;
} }
} }

4
assets/css/main.css Normal file
View File

@ -0,0 +1,4 @@
---
---
@import "minima";

View File

@ -4,3 +4,69 @@
//Import //Import
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss"; @import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
//////////// LIGHT THEME ////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
//html {
//background-color: #0f0f0f;
////background-color: #f0f0f0;
//html {
//[>background-color: #0f0f0f;<]
////background-color: #f0f0f0;
//background-color: lightblue;
//}
////body {
//////background-color: #f0f0f0;
////background-color: #0f0f0f;
//body {
//[>background-color: #0f0f0f;<]
////background-color: #f0f0f0;
//background-color: lightblue;
//}
:root {
--primary-color: #888888;
--secondary-color: #666666;
--font-color: #999999;
--bg-color: #0f0f0f;
--heading-color: #454545;
}
[data-theme="dark"] {
--primary-color: #666666;
--secondary-color: #555555;
--font-color: #555555;
--bg-color: #f0f0f0;
--heading-color: #666666;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
}
html {
background-color: var(--bg-color);
color: var(--font-color);
}
h1 {
color: var(--secondary-color);
}
a {
color: var(--primary-color);
}

BIN
img/dark-theme-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
img/dark-theme-icon2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -3,6 +3,36 @@ var reverse = document.getElementById("nav-menu-left");
var icon = normal !== null ? normal : reverse; var icon = normal !== null ? normal : reverse;
const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
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');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
//const currentTheme = localStorage.getItem("theme");
//const btn = document.querySelector("switch");
//const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Toggle the "menu-open" % "menu-opn-left" classes // Toggle the "menu-open" % "menu-opn-left" classes
function toggle() { function toggle() {
var navRight = document.getElementById("nav"); var navRight = document.getElementById("nav");
@ -38,4 +68,11 @@ function menuClick() {
} }
} }
//function toggledark(checkbox) {
//var elementb = document.body;
//var elementh = document.html;
//elementh.classList.toggle("dark-theme");
//elementb.classList.toggle("dark-theme");
//}
menuClick(); menuClick();