Skip to content

Commit 16e3fb1

Browse files
CavenfishCavenfish
committed
update template
1 parent 32f832b commit 16e3fb1

15 files changed

Lines changed: 119 additions & 39 deletions

File tree

‎_assets/theme.scss‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,24 @@
22
Set your website theme here.
33
*/
44

5-
// Background
6-
$primary-background: #cebada;
7-
$secondary-background: #048594;
8-
$tertiary-background: #DB3069;
9-
10-
// Foreground
11-
$primary-foreground: #000000;
12-
$secondary-foreground: #b81149;
13-
$tertiary-foreground: #462749;
5+
$themes: (
6+
"light": (
7+
"primary-bg": #ffffff,
8+
"secondary-bg": #7dd4db,
9+
"tertiary-bg": #4fb9c1,
10+
"primary-fg": #000000,
11+
"secondary-fg": #9b4d5f,
12+
"tertiary-fg": #b85b74,
13+
),
14+
"dark": (
15+
"primary-bg": #2e2c2c,
16+
"secondary-bg": #10555a,
17+
"tertiary-bg": #1c8991,
18+
"primary-fg": #ffffff,
19+
"secondary-fg": #e90e0e,
20+
"tertiary-fg": #fd4c4c,
21+
),
22+
);
1423

1524
// Font
1625
$font-stack: Helvetica, Arial, sans-serif;

‎_layout/extra/nav.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
<div class="author-name-nav">
44
<li><a href="/">{{author_name}}</a></li>
55
</div>
6+
<div class="theme-switch">
7+
<button id="theme-toggle" onclick="toggleTheme()">
8+
<i class="fas fa-moon"></i>
9+
</button>
10+
</div>
611
<a class="burger-nav" onclick="myFunction()">
712
<i class="fa-2x fa fa-bars"></i>
813
</a>

‎_layout/foot.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{{ if hascode }}
66
{{ insert basic/foot_highlight.html }}
77
{{ end }}
8-
<script src="/assets/scripts/js/nav.js"></script>
8+
<script src="/libs/buttons/nav.js"></script>
9+
<script src="/libs/buttons/theme.js"></script>
910
</body>
1011
</html>

‎_layout/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">

‎_libs/buttons/nav.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
function myFunction() {
2+
var x = document.getElementById("hidden");
3+
if (x.style.display === "block") {
4+
x.style.display = "none";
5+
} else {
6+
x.style.display = "block";
7+
}
8+
}

‎_libs/buttons/theme.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function toggleTheme() {
2+
const html = document.documentElement;
3+
const themeToggle = document.getElementById("theme-toggle");
4+
const currentTheme = html.getAttribute("data-theme");
5+
const icon = themeToggle.querySelector("i");
6+
7+
if (currentTheme === "dark") {
8+
html.setAttribute("data-theme", "light");
9+
icon.className = "fas fa-moon";
10+
localStorage.setItem("theme", "light");
11+
} else {
12+
html.setAttribute("data-theme", "dark");
13+
icon.className = "fas fa-sun";
14+
localStorage.setItem("theme", "dark");
15+
}
16+
}
17+
18+
// Check for saved theme preference
19+
document.addEventListener("DOMContentLoaded", () => {
20+
const savedTheme = localStorage.getItem("theme");
21+
const html = document.documentElement;
22+
const themeToggle = document.getElementById("theme-toggle");
23+
const icon = themeToggle.querySelector("i");
24+
25+
if (savedTheme === "dark") {
26+
html.setAttribute("data-theme", "dark");
27+
icon.className = "fas fa-sun";
28+
}
29+
});

‎_sass/_base.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414

1515
body {
1616
overflow-x: hidden;
17-
background-color: theme.$primary-background;
17+
background-color: var(--primary-bg);
1818
}
1919

2020
html {
2121
font-family: theme.$font-stack;
2222
font-size: theme.$normal-font;
23-
color: theme.$primary-foreground;
23+
color: var(--primary-fg);
2424
}
2525

2626
.franklin-content {
@@ -134,12 +134,12 @@ html {
134134
text-align: center;
135135
align-content: center;
136136
font-size: theme.$medium-font;
137-
color: theme.$tertiary-foreground;
137+
color: var(--tertiary-fg);
138138
}
139139

140140
.short-bio {
141141
font-size: theme.$normal-font;
142-
color: theme.$primary-foreground;
142+
color: var(--primary-fg);
143143
}
144144

145145
.page-foot {

‎_sass/_vars.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
/*
22
Variables to be used throughout site
33
*/
4-
@use "../_assets/theme.scss";
4+
@use "../_assets/theme" as user_theme;
5+
6+
@each $theme, $colors in user_theme.$themes {
7+
[data-theme="#{$theme}"] {
8+
@each $name, $color in $colors {
9+
--#{$name}: #{$color};
10+
}
11+
}
12+
}
513

614
// Screens
715
$mobile-max-width: 480px !default;

‎_sass/cards.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
width: 100%;
66
height: 35%;
77
padding: 5px;
8-
box-shadow: 0 0 8px 4px theme.$tertiary-background;
9-
border: 2px solid theme.$primary-foreground;
8+
box-shadow: 0 0 8px 4px var(--tertiary-bg);
9+
border: 2px solid var(--primary-fg);
1010
display: flex;
1111

1212
.card-img {
@@ -30,7 +30,7 @@
3030
text-align: left;
3131

3232
.title {
33-
color: theme.$secondary-foreground;
33+
color: var(--secondary-fg);
3434
}
3535
}
3636
}

‎_sass/cover.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,13 @@ body {
6868
width: auto;
6969
padding: 10px;
7070
display: inline;
71-
color: theme.$primary-foreground;
72-
background-color: theme.$primary-background;
71+
color: var(--primary-fg);
72+
background-color: var(--primary-bg);
7373
border: none;
7474
align-content: center;
7575

7676
a {
77-
color: theme.$primary-foreground;
77+
color: var(--primary-fg);
7878
font-size: theme.$xlarge-font;
7979
text-decoration: none;
8080
}
@@ -91,13 +91,13 @@ body {
9191
width: auto;
9292
padding: 10px;
9393
display: inline;
94-
color: theme.$primary-foreground;
95-
background-color: theme.$primary-background;
94+
color: var(--primary-fg);
95+
background-color: var(--primary-bg);
9696
border: none;
9797
align-content: center;
9898

9999
a {
100-
color: theme.$primary-foreground;
100+
color: var(--primary-fg);
101101
font-size: theme.$xlarge-font;
102102
text-decoration: none;
103103
}

0 commit comments

Comments
 (0)