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

Dracula Dark Theme

Browse Source 
- Clean up dark mode javascript
- Change label with color mode
- Change dark mode colors to dracula style
- Change document load to ready so CSS is applied faster
This commit is contained in:
Sravan Balaji
2020-10-24 17:47:00 -04:00
parent 0ac764778d
commit a2d4b78a37
4 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/navbar.html
View File

@@ -160,9 +160,15 @@
</div>
<!-- Dark Mode Toggle -->
<!-- Reference: https://github.com/coliff/dark-mode-switch -->
<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>
<label
class="custom-control-label"
for="darkSwitch"
id="darkSwitchLabel"
>Dark Mode</label
>
</div>
<script src="./scripts/dark-mode-switch.min.js"></script>
</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/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> ')
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 --> <!-- Reference: https://github.com/coliff/dark-mode-switch --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch" /> <label class="custom-control-label" for="darkSwitch" id="darkSwitchLabel" >Dark Mode</label > </div> <script src="./scripts/dark-mode-switch.min.js"></script> </nav> ')

33
src/scripts/dark-mode-switch.min.js vendored
View File

@@ -1,25 +1,38 @@
// Reference: https://github.com/coliff/dark-mode-switch
const darkSwitch = document.getElementById("darkSwitch");
const darkSwitchLabel = document.getElementById("darkSwitchLabel");
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");
darkSwitch.checked = e;
if (e) {
documentElement.setAttribute("color-mode", "dark");
darkSwitchLabel.innerHTML = "Dark Mode";
} else {
documentElement.setAttribute("color-mode", "light");
darkSwitchLabel.innerHTML = "Light Mode";
}
}
function resetTheme() {
darkSwitch.checked
? (documentElement.setAttribute("color-mode", "dark"),
localStorage.setItem("darkSwitch", "dark"))
: (documentElement.setAttribute("color-mode", "light"),
localStorage.removeItem("darkSwitch"));
if (darkSwitch.checked) {
documentElement.setAttribute("color-mode", "dark");
localStorage.setItem("darkSwitch", "dark");
darkSwitchLabel.innerHTML = "Dark Mode";
} else {
documentElement.setAttribute("color-mode", "light");
localStorage.removeItem("darkSwitch");
darkSwitchLabel.innerHTML = "Light Mode";
}
}
window.addEventListener("load", () => {
$(document).ready(() => {
darkSwitch &&
(initTheme(),
darkSwitch.addEventListener("change", () => {

14
src/style/styles.css
View File

@@ -12,11 +12,11 @@
/* Dark Mode */
:root[color-mode="dark"] {
--primary-color: purple;
--secondary-color: #00274c;
--tertiary-color: #30c5ff;
--background-color: #e8eef2;
--font-color: #000000;
--primary-color: #bd93f9;
--secondary-color: #44475a;
--tertiary-color: #50fa7b;
--background-color: #282a36;
--font-color: #f8f8f2;
}
/***********
@@ -137,3 +137,7 @@ body {
margin: auto;
display: block;
}
label {
color: var(--primary-color);
}