Add Dark Theme 🌙 (yousinix#68)

fixes yousinix#8
YunjeongP · May 4, 2021 · afcb57e · afcb57e
1 parent 38e75c7
commit afcb57e
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 19 deletions.
diff --git a/_includes/about/timeline.html b/_includes/about/timeline.html
@@ -1,5 +1,5 @@
 <div class="col mt-4">
-  <div class="timeline-body">
+  <div class="timeline-body bg-themed">
     {% for item in site.data.timeline %}
       <div class="timeline-item">
         <div class="content">

diff --git a/_includes/blog/post-card.html b/_includes/blog/post-card.html
@@ -1,6 +1,6 @@
 {%- comment -%} Default Styles {%- endcomment -%}
 {%- assign card_style  = '' -%}
-{%- assign text_style  = 'text-dark' -%}
+{%- assign text_style  = 'text-themed' -%}
 {%- assign badge_style = 'badge-dark' -%}
 
 {%- comment -%} Update Styles {%- endcomment -%}

diff --git a/_includes/head.html b/_includes/head.html
@@ -24,8 +24,9 @@
   <!-- Font Awesome CDN -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
 
-  <!-- Bootstrap CSS CDN -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <!-- Bootstrap-dark CSS CDN -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/toggle-bootstrap.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/toggle-bootstrap-dark.min.css" />
 
   <!-- Animate CSS CDN -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" type="text/css"/>

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light">
+<nav class="navbar navbar-expand-lg navbar-themed bg-transparent">
 
   <a class="navbar-brand" href="{{ site.baseurl }}/"><h5><b>{{ site.title }}</b></h5></a>
 
@@ -55,6 +55,7 @@
 
       {% endfor %}
 
+      <span id="theme-toggler" class="nav-item nav-link" role="button" onclick="toggleTheme()"></span>
     </div>
   </div>
 

diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -19,4 +19,7 @@
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 })
-</script>
+</script>
+
+<!-- Theme style -->
+<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,18 +6,23 @@
   https://github.com/YoussefRaafatNasry/portfolYOU
 -->
 
-<html lang="en" class="h-100">
+<html lang="en">
 
 {% include head.html %}
 
-<body class="d-flex flex-column h-100">
+<body>
 
-  <main class="flex-shrink-0 container mt-5">
-  {% include navbar.html %}
-  {{ content }}
-  </main>
+  <div id="page-wrapper" class="d-flex flex-column">
+
+    <main class="flex-shrink-0 container mt-5">
+      {% include navbar.html %}
+      {{ content }}
+    </main>
+
+    {% include footer.html %}
+
+  </div>
 
-  {% include footer.html %}
   {% include analytics.html %}
   {% include scripts.html %}
 

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1,8 +1,14 @@
-html{
+html {
   padding-left: calc(100vw - 100%);
 }
 
-body {
+html,
+body,
+#page-wrapper {
+  min-height: 100vh;
+}
+
+body * {
   font-family: "Poppins", sans-serif;
 }
 

diff --git a/_sass/_dark.scss b/_sass/_dark.scss
@@ -0,0 +1,47 @@
+// Some overrides for dark theme
+
+@mixin theme($property, $light-value, $dark-value) {
+  .bootstrap & {
+    #{$property}: $light-value;
+  }
+
+  .bootstrap-dark & {
+    #{$property}: $dark-value;
+  }
+}
+
+// Colors
+
+.text-themed {
+  @include theme(color, $text-black, $text-white);
+}
+
+.bg-themed {
+  @include theme(background-color, $light, $dark);
+}
+
+.bg-light {
+  & * {
+    color: $text-black;
+  }
+}
+
+.bg-dark {
+  & * {
+    color: $text-white;
+  }
+}
+
+// Code blocks & Syntax highlighting
+
+.bootstrap {
+  @import "autumn.scss";
+}
+
+.bootstrap-dark {
+  @import "native.scss";
+
+  .gist {
+    filter: invert(90%) hue-rotate(180deg);
+  }
+}
diff --git a/_sass/_timeline.scss b/_sass/_timeline.scss
@@ -1,6 +1,5 @@
 .timeline-body {
   position: relative;
-  background-color: $light;
   border-radius: 0 $rounded-borders $rounded-borders 0;
   padding: 5px 0;
 

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -7,4 +7,7 @@ $danger:    #dc3545;
 $light:     #f8f9fa;
 $dark:      #343a40;
 
+$text-black: #343a40;
+$text-white: white;
+
 $rounded-borders: 15px;
diff --git a/_sass/autumn.scss b/_sass/autumn.scss
@@ -1,4 +1,4 @@
-// Syntax highlighting for code blocks
+// Syntax highlighting for code blocks (light)
 // Get it from here https://github.com/richleland/pygments-css
 
 .highlight .w   { color: #bbbbbb } /* Text.Whitespace */

diff --git a/_sass/native.scss b/_sass/native.scss
@@ -0,0 +1,81 @@
+// Syntax highlighting for code blocks (dark)
+// Get it from here https://github.com/richleland/pygments-css
+
+.highlight .hll { background-color: #404040 }
+.highlight      { background: #202020; color: #d0d0d0 }
+.highlight .c   { color: #999999; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .esc { color: #d0d0d0 } /* Escape */
+.highlight .g   { color: #d0d0d0 } /* Generic */
+.highlight .k   { color: #6ab825; font-weight: bold } /* Keyword */
+.highlight .l   { color: #d0d0d0 } /* Literal */
+.highlight .n   { color: #d0d0d0 } /* Name */
+.highlight .o   { color: #d0d0d0 } /* Operator */
+.highlight .x   { color: #d0d0d0 } /* Other */
+.highlight .p   { color: #d0d0d0 } /* Punctuation */
+.highlight .ch  { color: #999999; font-style: italic } /* Comment.Hashbang */
+.highlight .cm  { color: #999999; font-style: italic } /* Comment.Multiline */
+.highlight .cp  { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+.highlight .cpf { color: #999999; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1  { color: #999999; font-style: italic } /* Comment.Single */
+.highlight .cs  { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+.highlight .gd  { color: #d22323 } /* Generic.Deleted */
+.highlight .ge  { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+.highlight .gr  { color: #d22323 } /* Generic.Error */
+.highlight .gh  { color: #ffffff; font-weight: bold } /* Generic.Heading */
+.highlight .gi  { color: #589819 } /* Generic.Inserted */
+.highlight .go  { color: #cccccc } /* Generic.Output */
+.highlight .gp  { color: #aaaaaa } /* Generic.Prompt */
+.highlight .gs  { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+.highlight .gu  { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+.highlight .gt  { color: #d22323 } /* Generic.Traceback */
+.highlight .kc  { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+.highlight .kd  { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn  { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp  { color: #6ab825 } /* Keyword.Pseudo */
+.highlight .kr  { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt  { color: #6ab825; font-weight: bold } /* Keyword.Type */
+.highlight .ld  { color: #d0d0d0 } /* Literal.Date */
+.highlight .m   { color: #3677a9 } /* Literal.Number */
+.highlight .s   { color: #ed9d13 } /* Literal.String */
+.highlight .na  { color: #bbbbbb } /* Name.Attribute */
+.highlight .nb  { color: #24909d } /* Name.Builtin */
+.highlight .nc  { color: #447fcf; text-decoration: underline } /* Name.Class */
+.highlight .no  { color: #40ffff } /* Name.Constant */
+.highlight .nd  { color: #ffa500 } /* Name.Decorator */
+.highlight .ni  { color: #d0d0d0 } /* Name.Entity */
+.highlight .ne  { color: #bbbbbb } /* Name.Exception */
+.highlight .nf  { color: #447fcf } /* Name.Function */
+.highlight .nl  { color: #d0d0d0 } /* Name.Label */
+.highlight .nn  { color: #447fcf; text-decoration: underline } /* Name.Namespace */
+.highlight .nx  { color: #d0d0d0 } /* Name.Other */
+.highlight .py  { color: #d0d0d0 } /* Name.Property */
+.highlight .nt  { color: #6ab825; font-weight: bold } /* Name.Tag */
+.highlight .nv  { color: #40ffff } /* Name.Variable */
+.highlight .ow  { color: #6ab825; font-weight: bold } /* Operator.Word */
+.highlight .w   { color: #666666 } /* Text.Whitespace */
+.highlight .mb  { color: #3677a9 } /* Literal.Number.Bin */
+.highlight .mf  { color: #3677a9 } /* Literal.Number.Float */
+.highlight .mh  { color: #3677a9 } /* Literal.Number.Hex */
+.highlight .mi  { color: #3677a9 } /* Literal.Number.Integer */
+.highlight .mo  { color: #3677a9 } /* Literal.Number.Oct */
+.highlight .sa  { color: #ed9d13 } /* Literal.String.Affix */
+.highlight .sb  { color: #ed9d13 } /* Literal.String.Backtick */
+.highlight .sc  { color: #ed9d13 } /* Literal.String.Char */
+.highlight .dl  { color: #ed9d13 } /* Literal.String.Delimiter */
+.highlight .sd  { color: #ed9d13 } /* Literal.String.Doc */
+.highlight .s2  { color: #ed9d13 } /* Literal.String.Double */
+.highlight .se  { color: #ed9d13 } /* Literal.String.Escape */
+.highlight .sh  { color: #ed9d13 } /* Literal.String.Heredoc */
+.highlight .si  { color: #ed9d13 } /* Literal.String.Interpol */
+.highlight .sx  { color: #ffa500 } /* Literal.String.Other */
+.highlight .sr  { color: #ed9d13 } /* Literal.String.Regex */
+.highlight .s1  { color: #ed9d13 } /* Literal.String.Single */
+.highlight .ss  { color: #ed9d13 } /* Literal.String.Symbol */
+.highlight .bp  { color: #24909d } /* Name.Builtin.Pseudo */
+.highlight .fm  { color: #447fcf } /* Name.Function.Magic */
+.highlight .vc  { color: #40ffff } /* Name.Variable.Class */
+.highlight .vg  { color: #40ffff } /* Name.Variable.Global */
+.highlight .vi  { color: #40ffff } /* Name.Variable.Instance */
+.highlight .vm  { color: #40ffff } /* Name.Variable.Magic */
+.highlight .il  { color: #3677a9 } /* Literal.Number.Integer.Long */
diff --git a/_sass/portfolYOU.scss b/_sass/portfolYOU.scss
@@ -6,12 +6,12 @@
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import "variables",
         "404",
-        "autumn",
         "base",
         "blog",
         "footer",
         "landing",
         "navbar",
         "projects",
         "skills",
-        "timeline";
+        "timeline",
+        "dark";
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -0,0 +1,24 @@
+const LOCAL_STORAGE_KEY = "dark-mode";
+let isDark = localStorage.getItem(LOCAL_STORAGE_KEY) === "true";
+loadTheme();
+
+function toggleTheme() {
+  isDark = !isDark;
+  loadTheme();
+  localStorage.setItem(LOCAL_STORAGE_KEY, isDark);
+}
+
+function loadTheme() {
+  const THEME_TOGGLER = document.getElementById("theme-toggler");
+  const BODY = document.getElementsByTagName("BODY")[0];
+
+  if (isDark) {
+    BODY.classList.remove("bootstrap");
+    BODY.classList.add("bootstrap-dark");
+    THEME_TOGGLER.innerHTML = "🌙";
+  } else {
+    BODY.classList.remove("bootstrap-dark");
+    BODY.classList.add("bootstrap");
+    THEME_TOGGLER.innerHTML = "🌞";
+  }
+}