Skip to content

Commit

Permalink
light/dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyleretters
tyleretters committed May 17, 2023
1 parent 0b3b071 commit af11f3c
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 16 deletions.
4 changes: 4 additions & 0 deletions _includes/nav.html
View file
Expand Up @@ -2,5 +2,9 @@
{% for item in site.data.nav.items %}
<a href="{{ site.baseurl }}{{ item.url }}"{% if item.url == page.url %} class="active"{% endif %}>{{ item.title }}</a>
{% endfor %}
<label class="theme-switch" for="theme">
<input type="checkbox" id="theme">
<span>theme</span>
</label>
<hr/>
</nav>
2 changes: 1 addition & 1 deletion _layouts/project.html
View file
Expand Up @@ -64,7 +64,7 @@
<td>tags:</td>
<td>
{% for tag in page.tags %}
<a href="/tag/{{ tag }}" class="tag">{{ tag }}</a>
<a href="/tag/{{ tag }}" class="project-tag tag">{{ tag }}</a>
{% if forloop.last != true %}{% endif %}
{% endfor %}
</td>
Expand Down
51 changes: 51 additions & 0 deletions assets/javascript/script.js
View file
@@ -1,5 +1,56 @@
"use strict";
(function () {
// detect the theme on page load
const detectColorScheme = () => {
let theme = "dark"; // default to light
// local storage is used to override OS theme settings
if (localStorage.getItem("theme")) {
if (localStorage.getItem("theme") === "light") {
theme = "light";
}
}
else if (!window.matchMedia) {
// matchMedia method not supported
return;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
// OS theme setting detected as dark
theme = "light";
}
// light theme preferred
if (theme === "light") {
document.documentElement.setAttribute("data-theme", "light");
}
};
detectColorScheme();
// enable toggling the theme
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
// Function that changes the theme, and sets a localStorage variable to track the theme between page loads
function switchTheme(e) {
if (e.target.checked) {
localStorage.setItem('theme', 'light');
document.documentElement.setAttribute('data-theme', 'light');
if (toggleSwitch != null) {
toggleSwitch.checked = true;
}
}
else {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-theme', 'dark');
if (toggleSwitch != null) {
toggleSwitch.checked = false;
}
}
}
// Listener for changing themes
if (toggleSwitch != null) {
toggleSwitch.addEventListener('change', switchTheme, false);
}
// Pre-check the light-theme checkbox if light-theme is set
if (document.documentElement.getAttribute('data-theme') === 'light' && toggleSwitch != null) {
toggleSwitch.checked = true;
}
// explore page tags
let activeTags = [];
const refresh = () => {
console.log(activeTags);
Expand Down
53 changes: 53 additions & 0 deletions assets/javascript/script.ts
View file
@@ -1,5 +1,58 @@
(function() {

// detect the theme on page load
const detectColorScheme = () => {
let theme = "dark"; // default to light
// local storage is used to override OS theme settings
if (localStorage.getItem("theme")) {
if (localStorage.getItem("theme") === "light") {
theme = "light";
}
} else if (!window.matchMedia) {
// matchMedia method not supported
return;
} else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
// OS theme setting detected as dark
theme = "light";
}
// light theme preferred
if (theme === "light") {
document.documentElement.setAttribute("data-theme", "light");
}
}
detectColorScheme()

// enable toggling the theme
const toggleSwitch = document.querySelector<HTMLInputElement>('.theme-switch input[type="checkbox"]');

// Function that changes the theme, and sets a localStorage variable to track the theme between page loads
function switchTheme(e: Event): void {
if ((e.target as HTMLInputElement).checked) {
localStorage.setItem('theme', 'light');
document.documentElement.setAttribute('data-theme', 'light');
if (toggleSwitch != null) {
toggleSwitch.checked = true;
}
} else {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-theme', 'dark');
if (toggleSwitch != null) {
toggleSwitch.checked = false;
}
}
}

// Listener for changing themes
if (toggleSwitch != null) {
toggleSwitch.addEventListener('change', switchTheme, false);
}

// Pre-check the light-theme checkbox if light-theme is set
if (document.documentElement.getAttribute('data-theme') === 'light' && toggleSwitch != null) {
toggleSwitch.checked = true;
}

// explore page tags
let activeTags : string[] = []

const refresh = () => {
Expand Down
95 changes: 80 additions & 15 deletions assets/stylesheets/style.css
View file
@@ -1,10 +1,25 @@
/* positive space */
/* accessibility */

:root {
--color-alpha: #fff;
--color-beta:#aaa;
--color-gamma: #222;
}
[data-theme="light"] {
--color-alpha: #333;
--color-beta:#555;
--color-gamma: #ddd;
}

/* (mostly) positive space */

body {
/* modified system-default font stack: https://www.digitalocean.com/community/tutorials/css-system-font-stack */
font-family: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
background-color: #222;
background: #222;
background: var(--color-gamma);
color: #fff;
color: var(--color-alpha);
font-size: 0.8em;
line-height: 1.2em;
padding: 8px;
Expand All @@ -22,8 +37,13 @@ h1, h2, h3, h4, h5, h6 {

.tag {
background: #fff;
background: var(--color-alpha);
color: #222!important;
border: 1px solid #999;
color: var(--color-gamma)!important;
border-color: #fff;
border-color: var(--color-alpha);
border-width: 1px;
border-style: solid;
border-radius: 4px;
margin: 0 .4em 1.2em 0;
padding: .1em;
Expand All @@ -33,39 +53,78 @@ h1, h2, h3, h4, h5, h6 {
.tag:hover,
.tag.tag-active {
background: #222;
background: var(--color-gamma);
color: #fff!important;
border: 1px solid #fff;
color: var(--color-alpha)!important;
border-color: #fff;
border-color: var(--color-alpha);
border-width: 1px;
border-style: solid;
}

/* note: explore tags aren't anchors, but individual script page "tags" are */
a.tag {
text-decoration: none!important;
}

.show {
display: block!important;
}

code, pre {
color: #999;
color: #aaa;
color: var(--color-beta);
}

a,
a:link,
a:active,
a:visited {
a:visited,
.theme-switch span {
color: #aaa;
color: var(--color-beta);
text-decoration: underline;
cursor: pointer;
}

a:hover {
color: #ccc;
a:hover,
.theme-switch span:hover {
color: #fff!important;
color: var(--color-alpha)!important;
font-weight: 800;
}

/* hide the checkbox */
#theme {
display: none;
}

[data-theme="light"] .theme-switch .dark {
display: none;
}

[data-theme="dark"] .theme-switch .light {
display: none;
}

.theme-switch {
float: right;
}

::selection {
background: #fff;
background: var(--color-alpha);
color: #222;
color: var(--color-gamma);
}

hr {
margin: 0.8em 0;
border: none;
background-color: #555;
color: #555;
background-color: #aaa;
background-color: var(--color-beta);
color: #aaa;
color: var(--color-beta);
height: 1px;
opacity: 1;
}
Expand All @@ -81,7 +140,7 @@ table tr td {
vertical-align: top;
}

/* negative space */
/* (mostly) negative space */

h1, h2, h3, h4, h5, h6, p, ul, ol {
margin: 0 0 0.8em 0;
Expand Down Expand Up @@ -132,7 +191,7 @@ body.explore section {
max-width: 100%;
}

/* explore */
/* explore page */

.projects {
display: flex;
Expand Down Expand Up @@ -171,12 +230,18 @@ body.explore section {
display: block;
text-decoration: none;
color: #fff;
color: var(--color-alpha);
}

.projects .project a:hover {
border: 1.6em solid #fff;
border-width: 1.6em;
border-style: solid;
border-color: #fff;
border-color: var(--color-alpha);
background: #fff;
color: #555;
background: var(--color-alpha);
color: #aaa!important;
color: var(--color-gamma)!important;
}

.projects .project a img {
Expand All @@ -188,4 +253,4 @@ body.explore section {
.projects .project a h1,
.projects .project a p {
margin: 0 0 0.8em 0;
}
}

0 comments on commit af11f3c

Please sign in to comment.