Improve Dark Theme

 * Remove bootstrap-dark library and create custom css to improve
   loading time, since the library include the whole bootstrap file
   twice (one for each theme).
 * Load theme before body load to avoid glitches.
 * Match system's theme by default if no theme was picked before.
 * Update theme colors.

_includes/404.html

@@ -139,9 +139,6 @@ <h3>Page not Found!</h3>
 
   </div>
 
-  <!-- Theme style -->
-  <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
-
 </body>
 
 </html>

_includes/blog/search.html

@@ -19,7 +19,7 @@
         searchInput: document.getElementById('search-input'),
         resultsContainer: document.getElementById('results-container'),
         searchResultTemplate: '<a href="{url}" class="list-group-item list-group-item-action">{title}</a>',
-        noResultsText: '<li class="list-group-item">No results found</li>',
+        noResultsText: '<li class="list-group-item list-group-item-action disabled">No results found</li>',
         json: '{{ '/search.json' | relative_url }}'
       })
 </script>

_includes/elements/list.html

@@ -3,7 +3,7 @@
 <div class="list-group my-3">
 
   {%- if include.title -%}
-    <a class="list-group-item list-group-item-action active disabled text-white">{{ include.title }}</a>
+    <a class="list-group-item active disabled text-white">{{ include.title }}</a>
   {%- endif -%}
 
   {% for item in items %}

_includes/head.html

@@ -18,20 +18,21 @@
   <title>{{ title }}</title>
   <meta name="description" content="{{ description }}">
 
-
   <link rel="shortcut icon" type="image/x-icon" href="{{ '/assets/favicon.ico' | relative_url }}">
 
+  <!-- Theme style -->
+  <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
+
   <!-- Font Awesome CDN -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.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" />
+  <!-- Bootstrap CSS CDN -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.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"/>
-  
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
+
   <!-- Custom CSS -->
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" type="text/css">
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
-</head>
+</head>

_includes/navbar.html

@@ -1,9 +1,9 @@
-<nav class="navbar navbar-expand-lg navbar-themed bg-transparent">
+<nav class="navbar navbar-expand-lg navbar-themed">
 
   <a class="navbar-brand" href="{{ site.baseurl }}/"><h5><b>{{ site.title }}</b></h5></a>
 
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
+    <i class="fas fa-1x fa-bars text-themed"></i>
   </button>
 
   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

_includes/projects/project-card.html

@@ -1,5 +1,5 @@
 <div class="wow animated fadeIn" data-wow-delay=".15s">
-  <a href="{{ project_url }}" class="project card text-dark">
+  <a href="{{ project_url }}" class="project card text-themed">
     {%- if project_img -%}
     <img id="{{ project_id }}-img" class="card-img-top" src="{{ project_img }}" alt="{{ project_name }}" />
     {%- endif -%}

_includes/scripts.html

@@ -20,6 +20,3 @@
     $('[data-toggle="tooltip"]').tooltip()
 })
 </script>
-
-<!-- Theme style -->
-<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>

_layouts/default.html

@@ -6,22 +6,18 @@
   https://github.com/YoussefRaafatNasry/portfolYOU
 -->
 
-<html lang="en">
+<html lang="en" class="h-100">
 
 {% include head.html %}
 
-<body>
+<body class="h-100 d-flex flex-column">
 
-  <div id="page-wrapper" class="d-flex flex-column">
+  <main class="flex-shrink-0 container mt-5">
+    {% include navbar.html %}
+    {{ content }}
+  </main>
 
-    <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 %}

_sass/_base.scss

@@ -2,16 +2,26 @@ html {
   padding-left: calc(100vw - 100%);
 }
 
-html,
-body,
-#page-wrapper {
-  min-height: 100vh;
-}
-
-body * {
+body {
   font-family: "Poppins", sans-serif;
 }
 
 .badge {
   font-weight: 500;
 }
+
+.bg-light,
+.badge-light {
+  &,
+  * {
+    color: $text-black !important;
+  }
+}
+
+.bg-dark,
+.badge-dark {
+  &,
+  * {
+    color: $text-white !important;
+  }
+}

_sass/_blog.scss

@@ -117,7 +117,7 @@
     padding: 0 1em;
   }
 
-  table {
+  table:not(.highlight) {
     display: block;
     overflow-x: auto;
     margin: 1rem 0;
@@ -138,7 +138,7 @@
     }
 
     tr:nth-child(even) {
-      background-color: $light;
+      background-color: rgba(0, 0, 0, 0.05);
     }
   }
 }

_sass/_theme-dark.scss

@@ -0,0 +1,84 @@
+$dark-100: $dark;
+$dark-300: #2c3032;
+$dark-600: #242526;
+$dark-900: #17191a;
+
+[data-theme="dark"] {
+  body {
+    background-color: $dark-900;
+    color: $text-white;
+  }
+
+  // Code blocks & Syntax highlighting
+
+  @import "native.scss";
+
+  pre,
+  code.highlighter-rouge {
+    @extend .highlight;
+    border: none;
+  }
+
+  .gist {
+    filter: invert(90%) hue-rotate(180deg);
+  }
+
+  // Inputs
+  input {
+    background-color: $dark-300;
+    border-color: $dark-100;
+    color: $dark-900;
+
+    &::placeholder {
+      color: rgba($text-white, 0.64);
+    }
+
+    &:focus {
+      background-color: $dark-600;
+      color: $text-white;
+    }
+  }
+
+  // Cards
+  .card {
+    background-color: $dark-600;
+  }
+
+  .card.border {
+    .card-footer {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  // Tables
+  table:not(.highlight) {
+    td {
+      border-color: $dark-600;
+    }
+
+    tr:nth-child(even) {
+      background-color: $dark;
+    }
+  }
+
+  // Lists
+  .list-group-item-action {
+    background-color: $dark-600;
+    color: $text-white;
+
+    &:hover,
+    &:focus {
+      background-color: darken($color: $dark-600, $amount: 3);
+    }
+  }
+
+  // Post
+  .post footer {
+    text-decoration: none;
+  }
+
+  // Timeline 
+  .timeline-body .timeline-item:after{
+    background-color: $dark-900;
+  }
+}

_sass/_theme.scss

@@ -0,0 +1,33 @@
+@mixin themed($property, $light-value, $dark-value) {
+  [data-theme="light"] & {
+    #{$property}: $light-value;
+  }
+
+  [data-theme="dark"] & {
+    #{$property}: $dark-value;
+  }
+}
+
+#theme-toggler:before {
+  @include themed(content, "🌙", "🌞");
+}
+
+.navbar-themed {
+  .navbar-brand,
+  .navbar-nav .nav-link.active {
+    @include themed(color, $text-black, $text-white);
+  }
+
+  .navbar-nav .nav-link {
+    @include themed(color, rgba($text-black, 0.5), rgba($text-white, 0.5));
+  }
+}
+
+.text-themed {
+  @include themed(color, $text-black, $text-white);
+}
+
+.bg-themed {
+  @include themed(background-color, $light, $dark);
+}
+

_sass/_variables.scss

@@ -8,6 +8,6 @@ $light:     #f8f9fa;
 $dark:      #343a40;
 
 $text-black: #343a40;
-$text-white: white;
+$text-white: rgba(white, .9);
 
 $rounded-borders: 15px;

_sass/portfolYOU.scss

@@ -13,4 +13,6 @@
         "navbar",
         "projects",
         "timeline",
-        "dark";
+        "autumn",
+        "theme",
+        "theme-dark";