PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add dark light theme toggle functionality

Browse Source
This commit is contained in:
Avijit 🚀
2021-06-04 14:45:49 +02:00
committed by Yash Mehrotra
parent 9c85a886e8
commit 34702581dd
5 changed files with 71 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/config.toml
View File

@@ -33,12 +33,12 @@ pygmentsCodeFencesGuessSyntax = true
[[menu.main]]
identifier = "linkedin"
pre = "<span class='fab fa-linkedin'></span>"
pre = "<span class='fa fa-linkedin'></span>"
url = "/a/"
weight = 5
[[menu.main]]
identifier = "github"
pre = "<span class='fab fa-github'></span>"
pre = "<span class='fa fa-github'></span>"
url = "/b/"
weight = 6

2
themes/gokarna/layouts/_default/baseof.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="gokarna-dark">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}

13
themes/gokarna/layouts/partials/header.html
View File

@@ -1,4 +1,4 @@
<header class="header header-dark" id="header-sroll">
<header class="header gokarna-dark">
<nav class="header-nav">
<div class="avatar">
@@ -23,15 +23,22 @@
<!-- TODO: Handle
<div class="nav-link icon">
<a href="http://example.com">
<span class="fab fa-github"></span>
<span class="fa fa-github"></span>
</a>
</div>
<div class="nav-link icon">
<a href="http://example.com">
<span class="fab fa-linkedin"></span>
<span class="fa fa-linkedin"></span>
</a>
</div>
-->
<span class="nav-icons-divider"></span>
<div class="nav-link" id="dark-light-theme-toggle">
<a>
<span class="fa fa-moon-o"></span>
</a>
</div>
</div>
</nav>
</header>

71
themes/gokarna/static/css/main.css
View File

@@ -1,17 +1,16 @@
html {
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
}
.header-light {
background-color: #bbb;
html.gokarna-dark {
background: #252525;
color: white;
}
html.gokarna-light {
background: white;
color: black;
}
.header-dark {
background-color: #1b1c1d;
color: white;
}
/* HEADER */
.header {
position: fixed;
height: 70px;
@@ -24,16 +23,21 @@ html {
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.header.gokarna-dark {
background-color: #1b1c1d;
color: white;
}
.header.gokarna-light {
background-color: #bbb;
color: black;
}
.header.small {
height: 50px;
}
.header a {
text-decoration: none;
color: inherit;
}
.header .header-nav {
height: 50px;
margin-top: 10px;
@@ -43,11 +47,9 @@ html {
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.header .header-nav.small {
margin-top: 0;
}
.header-nav .avatar {
float: left;
margin-left: 15px;
@@ -55,7 +57,6 @@ html {
border: 0.5px solid white;
border-radius: 18px;
}
.header-nav .avatar img {
display: block;
width: 50px;
@@ -63,56 +64,42 @@ html {
overflow: hidden;
border-radius: 100%;
}
.header-nav .nav-title {
display: inline-block;
padding-left: 10px;
height: 100%;
line-height: 50px;
}
.nav-title a {
height: 50px;
font-size: 20px;
}
.header-nav .nav-links {
line-height: 50px;
float: right;
margin-right: 15px;
}
.nav-links .nav-link {
display: inline-block;
}
.nav-links .nav-link a {
display: block;
padding: 0 10px;
}
.nav-links .nav-link.icon a {
padding: 0 8px;
}
.fab {
font-family: FontAwesome !important;
}
#content {
width: 810px;
margin: 180px auto 0;
}
.post .post-date {
color: gray;
.nav-links .nav-icons-divider {
border-color: inherit;
border-left: 1px solid;
margin-right: 4.5px;
}
/* TAGS */
.post-tags {
padding: 0;
list-style-type: none;
}
.post-tags .post-tag {
display: inline-block;
background-color: #00b5ad;
@@ -123,51 +110,51 @@ html {
font-size: 14px;
font-weight: 700;
}
.post-tag a {
text-decoration: none;
color: inherit;
}
/* SINGLE */
#content {
width: 810px;
margin: 180px auto 0;
}
.post .post-date {
color: gray;
}
.post .post-content {
margin-top: 50px;
}
/* LIST */
.list-posts .list-title {
text-align: center;
}
.list-posts .posts-year {
margin-top: 40px;
}
.list-posts .post-title {
margin: 10px 0;
}
.post-title .post-date {
float: right;
}
.tags-list .post-tags {
margin-top: 50px;
}
.tags-list .post-tags .post-tag {
padding: 0;
margin: 0 5px;
}
.tags-list .post-tags .post-tag:hover {
background-color: #009c95;
border: 1px solid #00b5ad;
}
.tags-list .post-tags .post-tag a div {
display: inline-block;
padding: 5px 8px;
}
.tags-list .post-tags .post-tag a .tag-posts-count {
background: rgba(0, 0, 0, 0.1);
opacity: 0.8;

40
themes/gokarna/static/js/main.js
View File

@@ -1,11 +1,29 @@
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small')
})
} else {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.remove('small')
})
}
});
window.onload = () => {
const GOKARNA_LIGHT_THEME = 'gokarna-light';
const GOKARNA_DARK_THEME = 'gokarna-dark';
const themeClassSwitcherMap = {
[GOKARNA_LIGHT_THEME]: GOKARNA_DARK_THEME,
[GOKARNA_DARK_THEME]: GOKARNA_LIGHT_THEME
};
document.getElementById('dark-light-theme-toggle').addEventListener('click', () => {
const currentTheme = document.querySelector('html').classList[0];
const themeToSwitchTo = themeClassSwitcherMap[currentTheme];
document.querySelectorAll(`.${currentTheme}`).forEach((element) => {
element.classList.add(themeToSwitchTo);
element.classList.remove(currentTheme);
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small')
})
} else {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.remove('small')
})
}
});
}