diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..8d2aa40
--- /dev/null
+++ b/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
diff --git a/_config.yml b/_config.yml
index 0d8d2fc..197c4a5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -31,7 +31,7 @@ version: "1.1.0"
excerpt_separator:
# Options
-custom_header: false
+custom_header: true
custom_nav_footer: false
reverse: false
diff --git a/_includes/header-custom.html b/_includes/header-custom.html
index e684da2..e1aaa2d 100644
--- a/_includes/header-custom.html
+++ b/_includes/header-custom.html
@@ -1,5 +1,113 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
+
diff --git a/_sass/base.scss b/_sass/base.scss
index 6f8865c..a0e1dbe 100644
--- a/_sass/base.scss
+++ b/_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;
-$background-color: #FDFDFD;
-$text-color: #222222;
+$main-color: #999999;
+$background-color: #0F0F0F;
+$text-color: #888888;
/*- Base settings -*/
@@ -50,11 +50,11 @@ a {
transition: all .3s ease;
&:hover,
&:focus {
- color: #d26e2b;
- border-bottom: 2px dotted #d26e2b;
+ color: #999999;
+ border-bottom: 2px dotted #333333;
}
}
a#nav-menu {
border-bottom: none;
-}
\ No newline at end of file
+}
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..8a3d282
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,4 @@
+ ---
+ ---
+ @import "minima";
+
diff --git a/css/main.scss b/css/main.scss
index 6cb67a9..d6baaf3 100644
--- a/css/main.scss
+++ b/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);
+}
+
diff --git a/img/dark-theme-icon.png b/img/dark-theme-icon.png
new file mode 100644
index 0000000..52e01e6
Binary files /dev/null and b/img/dark-theme-icon.png differ
diff --git a/img/dark-theme-icon2.png b/img/dark-theme-icon2.png
new file mode 100644
index 0000000..41e45d7
Binary files /dev/null and b/img/dark-theme-icon2.png differ
diff --git a/js/main.js b/js/main.js
index 642af94..6a4cd7f 100644
--- a/js/main.js
+++ b/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();
\ No newline at end of file
+//function toggledark(checkbox) {
+ //var elementb = document.body;
+ //var elementh = document.html;
+ //elementh.classList.toggle("dark-theme");
+ //elementb.classList.toggle("dark-theme");
+//}
+
+menuClick();
+
+