sravan/sravanbalaji.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark Mode

Browse Source 
- Add dark mode toggle button to navbar
- Parameterize colors in styles.css
- Add dark mode button javascript
This commit is contained in:
Sravan Balaji
2020-10-24 17:15:55 -04:00
parent 0eab7a5df1
commit 0ac764778d
11 changed files with 73 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/about.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

2
src/blog.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

2
src/blog_docker.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

9
src/common/navbar.html
View File

@@ -16,7 +16,7 @@
/> />
</a> </a>
<!-- Toggler/collapsibe Button --> <!-- Toggler/collapsible Button -->
<button <button
class="navbar-toggler" class="navbar-toggler"
type="button" type="button"
@@ -158,4 +158,11 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- Dark Mode Toggle -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="./scripts/dark-mode-switch.min.js"></script>
</nav> </nav>

2
src/common/navbar.txt
View File

@@ -1 +1 @@
document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> </nav> ') document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsible Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> <!-- Dark Mode Toggle --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch" /> <label class="custom-control-label" for="darkSwitch">Dark Mode</label> </div> <script src="./scripts/dark-mode-switch.min.js"></script> </nav> ')

2
src/documentation.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

2
src/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

2
src/personal.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

2
src/portfolio.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" color-mode="light">
<head> <head>
<script <script
language="javascript" language="javascript"

28
src/scripts/dark-mode-switch.min.js vendored Normal file
View File

@@ -0,0 +1,28 @@
const darkSwitch = document.getElementById("darkSwitch");
const documentElement = document.documentElement;
function initTheme() {
const e =
null !== localStorage.getItem("darkSwitch") &&
"dark" === localStorage.getItem("darkSwitch");
(darkSwitch.checked = e),
e
? documentElement.setAttribute("color-mode", "dark")
: documentElement.setAttribute("color-mode", "light");
}
function resetTheme() {
darkSwitch.checked
? (documentElement.setAttribute("color-mode", "dark"),
localStorage.setItem("darkSwitch", "dark"))
: (documentElement.setAttribute("color-mode", "light"),
localStorage.removeItem("darkSwitch"));
}
window.addEventListener("load", () => {
darkSwitch &&
(initTheme(),
darkSwitch.addEventListener("change", () => {
resetTheme();
}));
});

37
src/style/styles.css
View File

@@ -1,8 +1,29 @@
/****************
* Color Themes *
****************/
/* Light Mode */
:root[color-mode="light"] {
--primary-color: #ffcb05;
--secondary-color: #00274c;
--tertiary-color: #30c5ff;
--background-color: #e8eef2;
--font-color: #000000;
}
/* Dark Mode */
:root[color-mode="dark"] {
--primary-color: purple;
--secondary-color: #00274c;
--tertiary-color: #30c5ff;
--background-color: #e8eef2;
--font-color: #000000;
}
/*********** /***********
* General * * General *
***********/ ***********/
body { body {
background-color: #e8eef2; background-color: var(--background-color);
padding-top: 65px; padding-top: 65px;
font-family: Arial, Verdana, Tahoma, sans-serif; font-family: Arial, Verdana, Tahoma, sans-serif;
} }
@@ -11,16 +32,16 @@ body {
* Main Content * * Main Content *
****************/ ****************/
.my-nav { .my-nav {
background: #00274c; background: var(--secondary-color);
font-size: 18px; font-size: 18px;
} }
.my-nav .nav-link { .my-nav .nav-link {
color: #ffcb05; color: var(--primary-color);
} }
.my-nav .nav-link:hover { .my-nav .nav-link:hover {
color: #30c5ff; color: var(--tertiary-color);
} }
.my-nav .navbar-toggler-icon { .my-nav .navbar-toggler-icon {
@@ -28,18 +49,18 @@ body {
} }
.my-nav .navbar-toggler { .my-nav .navbar-toggler {
background: #ffcb05; /* pick your color */ background: var(--primary-color);
} }
.container-fluid { .container-fluid {
color: #000000; color: var(--font-color);
font-size: 18px; font-size: 18px;
} }
.container-fluid h1 { .container-fluid h1 {
padding: 10px 10px; padding: 10px 10px;
background: #00274c; background: var(--secondary-color);
color: #ffcb05; color: var(--primary-color);
} }
.row { .row {