Put mode switch button on the sidebar
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
{{ content | toc(tags=['h1', 'h2'], wrapperClass='fixed toc') | safe }}
</div>
</div>
+ <div class="mode-switch-container">
+ <button id="mode-switch" class="mode-switch">
+ Dark Mode
+ </button>
+ </div>
</div>
<div class="main">
<div class="overlay"></div>
</li>
</ul>
</div>
- <div>
- <h4></h4>
- <ul>
- <li>
- <button id="theme-toggle">Dark Mode</button>
- </li>
- </ul>
- </div>
</div>
<div class="logo">
<svg id="Layer_1" data-name="logo"

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
align-items: flex-end;
text-decoration: none;
font-size: 44px;
+ margin-left: $unit;
margin-bottom: $unit * 2;
svg {

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
.table-of-contents {
+ margin-left: $unit;
ol{
margin: 0;
}
.active {
+ &.li{
+ display: inline-block;
+ }
color: $color-4;
background-color: $gray-4;
}

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
overflow-y: auto;
overflow-x: hidden;
font-size: 0.95rem;
- padding: $unit;
- padding-right: 0;
position: sticky;
top: 0;
height: 100vh;
transition-property: transform, border-top-width, border-right;
z-index: 2;
min-width: 256px;
+ display: flex;
+ flex-direction: column;
@include desktop-only() {
@include top-border;
padding-top: 64px + $unit;
background: var(--background-color);
height: 100%;
+ -webkit-overflow-scrolling: touch;
&.visible {
transform: translateX(0);
border-bottom: 1px solid var(--soft-border-color);
margin-bottom: $unit;
font-weight: bold;
+ margin-left: $unit;
// display: none;
@include transition-timing;
transition-property: border-bottom;
}
}
+
+.mode-switch{
+ text-align: center;
+ color: var(--background-color);
+ background: var(--font-color);
+ border: 0;
+ padding: 5px 10px;
+ cursor: pointer;
+ width: 100%;
+ margin: auto $unit * 2 $unit $unit * 2;
+ font-weight: bold;
+}
+
+.mode-switch-container{
+ margin-top: $unit;
+ height: 100%;
+ display: flex;
+ width: 100%;
+}

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -6,7 +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')
+ modeSwitch: document.getElementById('mode-switch')
};
function isMobile(){
@@ -99,7 +99,7 @@ function mobileToggleEvent(event){
toc.highlight();
}
-function themeToggle(event){
+function modeSwitch(event){
event.preventDefault();
@@ -108,10 +108,12 @@ function themeToggle(event){
if(atribute === 'light'){
$doc.setAttribute('data-theme', 'dark');
+ elements.modeSwitch.innerText = "Light Mode";
}
if(atribute === 'dark'){
$doc.setAttribute('data-theme', 'light');
+ elements.modeSwitch.innerText = "Dark Mode";
}
}
@@ -129,4 +131,4 @@ 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
+elements.modeSwitch.addEventListener('click', modeSwitch, false);
\ No newline at end of file

Put mode switch button on the sidebar