Skip to content

Commit

Permalink
Add Dark Theme 🌙
Browse files Browse the repository at this point in the history
fixes #8
  • Loading branch information
yousinix committed May 4, 2021
1 parent 38e75c7 commit 2a40252
Show file tree
Hide file tree
Showing 14 changed files with 189 additions and 19 deletions.
2 changes: 1 addition & 1 deletion _includes/about/timeline.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion _includes/blog/post-card.html
Original file line number Diff line number Diff line change
@@ -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 -%}
Expand Down
5 changes: 3 additions & 2 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/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"/>
Expand Down
3 changes: 2 additions & 1 deletion _includes/navbar.html
Original file line number Diff line number Diff line change
@@ -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>

Expand Down Expand Up @@ -55,6 +55,7 @@

{% endfor %}

<span id="theme-toggler" class="nav-item nav-link" role="button" onclick="toggleTheme()"></span>
</div>
</div>

Expand Down
5 changes: 4 additions & 1 deletion _includes/scripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,7 @@
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</script>

<!-- Theme style -->
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
19 changes: 12 additions & 7 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
10 changes: 8 additions & 2 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down
47 changes: 47 additions & 0 deletions _sass/_dark.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
1 change: 0 additions & 1 deletion _sass/_timeline.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.timeline-body {
position: relative;
background-color: $light;
border-radius: 0 $rounded-borders $rounded-borders 0;
padding: 5px 0;

Expand Down
3 changes: 3 additions & 0 deletions _sass/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@ $danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

$text-black: #343a40;
$text-white: white;

$rounded-borders: 15px;
2 changes: 1 addition & 1 deletion _sass/autumn.scss
Original file line number Diff line number Diff line change
@@ -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 */
Expand Down
81 changes: 81 additions & 0 deletions _sass/native.scss
Original file line number Diff line number Diff line change
@@ -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 */
4 changes: 2 additions & 2 deletions _sass/portfolYOU.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
24 changes: 24 additions & 0 deletions assets/js/theme.js
Original file line number Diff line number Diff line change
@@ -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 = "🌞";
}
}

0 comments on commit 2a40252

Please sign in to comment.