Add dark-theme

Gemfile.lock

@@ -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

_config.yml

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

_includes/header-custom.html

@@ -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">
 
 	<!-- 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>

_sass/base.scss

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

assets/css/main.css

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

css/main.scss

@@ -4,3 +4,69 @@
 
 //Import
 @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);
+}
+

js/main.js

@@ -3,6 +3,36 @@ var reverse = document.getElementById("nav-menu-left");
 
 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
 function toggle() {
 	  var navRight = document.getElementById("nav");
@@ -38,4 +68,11 @@ function menuClick() {
 	}
 }
 
-menuClick();
+//function toggledark(checkbox) {
+  //var elementb = document.body;
+  //var elementh = document.html;
+  //elementh.classList.toggle("dark-theme");
+  //elementb.classList.toggle("dark-theme");
+//}
+
+menuClick();