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]] [[menu.main]]
identifier = "linkedin" identifier = "linkedin"
pre = "<span class='fab fa-linkedin'></span>" pre = "<span class='fa fa-linkedin'></span>"
url = "/a/" url = "/a/"
weight = 5 weight = 5
[[menu.main]] [[menu.main]]
identifier = "github" identifier = "github"
pre = "<span class='fab fa-github'></span>" pre = "<span class='fa fa-github'></span>"
url = "/b/" url = "/b/"
weight = 6 weight = 6

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

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="gokarna-dark">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {{- 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"> <nav class="header-nav">
<div class="avatar"> <div class="avatar">
@@ -23,15 +23,22 @@
<!-- TODO: Handle <!-- TODO: Handle
<div class="nav-link icon"> <div class="nav-link icon">
<a href="http://example.com"> <a href="http://example.com">
<span class="fab fa-github"></span> <span class="fa fa-github"></span>
</a> </a>
</div> </div>
<div class="nav-link icon"> <div class="nav-link icon">
<a href="http://example.com"> <a href="http://example.com">
<span class="fab fa-linkedin"></span> <span class="fa fa-linkedin"></span>
</a> </a>
</div> </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> </div>
</nav> </nav>
</header> </header>

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

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

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

@@ -1,4 +1,21 @@
window.addEventListener('scroll', function() { 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) { if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) { document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small') item.classList.add('small')
@@ -8,4 +25,5 @@ window.addEventListener('scroll', function() {
item.classList.remove('small') item.classList.remove('small')
}) })
} }
}); });
}