Start to add dark mode
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<!doctype html>
-<html>
+<html data-theme="dark">
<head>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</li>
</ul>
</div>
+ <div>
+ <h4></h4>
+ <ul>
+ <li>
+ <button id="theme-toggle">Dark Mode</button>
+ </li>
+ </ul>
+ </div>
</div>
<span class="copyright">Copyright &copy; 2020 Rome.</span>
</div>

MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
max-width: $container-width;
margin: 0 auto;
padding: $unit;
- border-top: 1px solid $gray-7;
+ border-top: 1px solid var(--soft-border-color);
@include pattern-white;
h4 {

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -4,21 +4,27 @@ html {
}
html {
+
+ @include transition-timing;
+ transition-property: background;
+ background: var(--background-color);
+
+}
+
+body {
+ font-size: 16px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
"Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
- color: $gray-4;
+ color: var(--font-color);
line-height: 1.65;
- background-color: #ffffff;
-}
-
-body {
- font-size: 16px;
margin: 0;
+ @include transition-timing;
+ transition-property: border-top, color;
@include desktop-only() {
- border-top: $unit / 3 solid $gray-4;
+ border-top: $unit / 3 solid var(--top-border-color);
}
}

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
// so i can align the website in the middle of the page
.header-mobile {
+ background: var(--background-color);
z-index: 3;
- background-color: #ffffff;
height: $unit * 4;
display: none;
position: fixed;
top: 0;
align-items: center;
padding: 0 $unit;
- border-top: $unit / 3 solid $gray-4;
+ border-top: $unit / 3 solid var(--top-border-color);
.stretch {
flex-grow: 1;
@include mobile-only() {
width: 100%;
- border-bottom: 1px solid $gray-7;
+ border-bottom: 1px solid var(--soft-border-color);
display: flex;
}
}
.header-desktop{
- background-color: #ffffff;
height: $unit * 4;
display: flex;
align-items: center;

MODIFY
website/src/styles/_hero.scss
website/src/styles/_hero.scss
.hero {
position: relative;
padding: $unit * 2;
- color: rgb(68, 73, 80);
- border-bottom: 1px solid $gray-7;
+ border-bottom: 1px solid var(--soft-border-color);
@include pattern-white;
@include mobile-only() {

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
@mixin transition-timing{
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.57, 0.33, 0.19, 0.97);
- transition-property: all;
}
@mixin pattern-white{
- background: #ffffff;
- background-image: url(/static/img/pattern-white.png),
- linear-gradient(90deg, rgba(241,241,239,0.7) 60%, rgba(255,255,255,1) 100%);;
+ background: var(--background-color);
+ background-image: var(--pattern-img-path),
+ linear-gradient(90deg, var(--pattern-color) 60%, rgba(0, 0, 0, 0) 100%);;
background-repeat: repeat;
background-position: 50%;
z-index: -1;
+ @include transition-timing;
+ transition-property: background, background-image;
+ transition-property: 200ms, 350ms;
}
@mixin top-border{
@include transition-timing;
- border-top: $unit / 3 solid $gray-4;
+ transition-property: border-top;
+ border-top: $unit / 3 solid var(--top-border-color);
}
\ No newline at end of file

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
.table-of-contents {
- background-color: #ffffff;
ol{
margin: 0;
transition-duration: 100ms;
&.active {
- color: $color-4;
- background-color: $gray-4;
+ color: var(--toc-link-color-active);
+ background-color: var(--toc-background-active);
font-weight: bold;
}

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -15,6 +15,32 @@ $gray-6: #9B9D99;
$gray-7: #E8E8E8;
+:root {
+
+ --background-color: #fff;
+ --font-color: #{$gray-4};
+ --top-border-color: #{$gray-4};
+ --soft-border-color: #{$gray-7};
+ --pattern-color: #{rgba($gray-7, 0.6)};
+ --pattern-img-path: url("/static/img/pattern-white.png");
+ --toc-background-active: #{$gray-4};
+ --toc-link-color-active: #{$color-4};
+
+}
+
+html[data-theme='dark'] {
+
+ --background-color: #{$gray-4};
+ --font-color: #{$gray-7};
+ --top-border-color: #{$color-4};
+ --soft-border-color: #{$gray-3};
+ --pattern-color: #{rgba($gray-3, 0.4)};
+ --pattern-img-path: url("/static/img/pattern-black.png");
+ --toc-background-active: #{$color-4};
+ --toc-link-color-active: #{$gray-4};
+
+}
+
$sidebar-width: 20%;
$container-width: 100%;

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
position: sticky;
top: 0;
height: 100vh;
- border-right: 1px solid $gray-7;
- background-color: #ffffff;
- transition-property: transform, border-top-width;
+ border-right: 1px solid var(--soft-border-color);
+ transition-property: transform, border-top-width, border-right;
z-index: 2;
min-width: 256px;
position: fixed;
min-width: 256px;
padding-top: 64px + $unit;
+ background: var(--background-color);
&.visible {
transform: translateX(0);
.menu {
padding-bottom: $unit;
- border-bottom: 1px solid #e8e8e8;
+ border-bottom: 1px solid var(--soft-border-color);
margin-bottom: $unit;
font-weight: bold;
- display: none;
+ // display: none;
+ @include transition-timing;
+ transition-property: border-bottom;
+
ul{
margin: 0;
padding: 0;
text-decoration: none;
font-size: 1.1em;
transition-duration: 100ms;
+ transition-property: color;
height: auto;
padding: $unit / 5 $unit / 2;
margin-left: $unit / 2;

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -6,6 +6,7 @@ const elements = {
overlay: document.getElementsByClassName('overlay')[0],
headings: [...document.querySelectorAll('.content h1, .content h2, .content h3')],
headerMobile: document.getElementsByClassName('header-mobile')[0],
+ themeToggle: document.getElementById('theme-toggle')
};
function isMobile(){
@@ -98,6 +99,23 @@ function mobileToggleEvent(event){
toc.highlight();
}
+function themeToggle(event){
+
+ event.preventDefault();
+
+ const $doc = document.documentElement;
+ const atribute = $doc.getAttribute('data-theme');
+
+ if(atribute === 'light'){
+ $doc.setAttribute('data-theme', 'dark');
+ }
+
+ if(atribute === 'dark'){
+ $doc.setAttribute('data-theme', 'light');
+ }
+
+}
+
//remove permalinkSymbol "#" from table of contents
elements.tocLinks.forEach(function(link){
link.innerText = link.innerText.replace(/(\s#)$/,'');
@@ -110,3 +128,5 @@ elements.mobileHandle.addEventListener('click', mobileToggleEvent, false);
elements.overlay.addEventListener('click', mobileToggleEvent, false);
elements.overlay.addEventListener("touchstart", mobileToggleEvent, false);
window.addEventListener('scroll', handleScroll, false);
+
+elements.themeToggle.addEventListener('click', themeToggle, false);
\ No newline at end of file

Start to add dark mode