Skip to content

[WIP] Dark theme #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

[WIP] Dark theme #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6071093
add theme toggler to template
Oct 5, 2022
3a766f2
add icon to theme toggler
Oct 5, 2022
926f32f
implement dark theme logic + minor random fixes on js
Oct 5, 2022
504f589
implement dark theme styles
Oct 5, 2022
847db7c
revert unnecessary whitespace changes
Oct 5, 2022
550cbf0
update style to support mobile view
Oct 9, 2022
92cace8
read theme from system settings
Oct 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions asset/dark-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body.dark {
background: rgb(51, 51, 51);

.theme-toggler::before {
content: '☀️'; // used for toggling to light theme
}

.content {
background-color: rgb(28, 28, 33);
color: rgb(191, 191, 191);
}

.page {
background: rgb(31, 31, 31);
border-left: 1px solid rgb(94, 94, 94);
border-right: 1px solid rgb(94, 94, 94);
}

nav {
background-color: rgb(18, 43, 54);
color: rgb(179, 195, 204);
}

a {
color: rgb(153, 204, 230);

&:hover {
border-bottom: 1px solid rgb(20, 61, 82);
}
}

h1 {
border-bottom: 1px solid rgb(43, 43, 43);

&.book {
color: rgb(191, 191, 191);
}
}

h2 {
border-left: 8px solid rgb(26, 60, 76);
}

h3 {
border-left: 8px solid rgb(26, 60, 76);
}


@media only screen and (min-width: 800px) {
aside {
border-left: 8px solid rgb(72, 58, 30);
}
}

aside {
background-color: darkslategrey;
color: rgb(194, 193, 188);
}

@media only screen and (min-width: 800px) {
aside {
background-color: transparent;
}
}

img {
border: 1px solid rgb(38, 38, 38);
filter: invert(1);
}

pre {
background-color: rgb(31, 31, 31);
border-color: rgb(36, 36, 36) rgb(36, 36, 36) rgb(26, 60, 76);
}

.codehilite .k {
color: rgb(153, 204, 230);
}

code {
color: rgb(179, 195, 204);
}

.codehilite .kt {
color: rgb(153, 222, 230);
}

.codehilite .c1 {
color: rgb(191, 191, 191);
}

blockquote {
background-color: rgb(31, 31, 31);
border: 1px solid darkgray;

p {
color: azure;
}
}
}
19 changes: 18 additions & 1 deletion asset/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,6 +563,17 @@ footer {
}
}

.theme-toggler {
position: absolute;
right: 10px;
top: 40px;
cursor: pointer;

&:before {
content: '🕶'; // used toggling to datk theme
}
}

// On wide enough screens, put the asides on the... side.
@media only screen and (min-width: 800px) {
.page {
Expand Down Expand Up @@ -608,4 +619,10 @@ footer {
display: none;
}
}
}

.theme-toggler {
top: 10px;
}
}

@import './dark-styles.scss';
1 change: 1 addition & 0 deletions asset/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
{{prev}}
Expand Down
1 change: 1 addition & 0 deletions html/acknowledgements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">

Expand Down
1 change: 1 addition & 0 deletions html/architecture-performance-and-games.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="introduction.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/behavioral-patterns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="update-method.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/bytecode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="behavioral-patterns.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/command.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="design-patterns-revisited.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="decoupling-patterns.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/data-locality.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="optimization-patterns.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/decoupling-patterns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="type-object.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/design-patterns-revisited.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="architecture-performance-and-games.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/dirty-flag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="data-locality.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/double-buffer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="sequencing-patterns.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/event-queue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="component.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/flyweight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="command.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/game-loop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="double-buffer.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/introduction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="acknowledgements.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/object-pool.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="dirty-flag.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/observer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="flyweight.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/optimization-patterns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="service-locator.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/prototype.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="observer.html">Previous Chapter</a></span>
Expand Down
60 changes: 57 additions & 3 deletions html/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $(document).ready(function() {
window.setTimeout(refreshAsides, 200);

refreshAsides();
loadInitialTheme();
});

function refreshAsides() {
Expand All @@ -31,12 +32,65 @@ function refreshAsides() {

// Find the span the aside should be anchored next to.
var name = aside.attr("name");
var span = $("span[name='" + name + "']");
var span = $("span[name='" + name.replace("'", "\\'") + "']");
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a case in which the value of name was won't, and this whole selector would have become span[name='won't'], which is a syntax error. This change tries to prevent such cases.

if (span == null) {
window.console.log("Could not find span for '" + name + "'");
return;
}

aside.offset({top: span.position().top - 3});
if (span.position()) {
aside.offset({top: span.position().top - 3});
}
Comment on lines +41 to +43
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There were cases where span.position() returned undefined. I didn't investigate it deeper, I just patched it this way, so it does not happen anymore.

});
}

function loadInitialTheme() {
const theme = localStorage.getItem("theme");
if (theme === "dark") {
toggleTheme();
return;
}

const userPrefersDarkTheme = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;

if (userPrefersDarkTheme) {
toggleTheme();
return;
}
}

function toggleTheme() {
document.body.classList.toggle("dark");

if (document.body.classList.contains("dark")) {
document
.querySelector(".theme-toggler")
.setAttribute("title", "light theme");
localStorage.setItem("theme", "dark");
} else {
document
.querySelector(".theme-toggler")
.setAttribute("title", "dark theme");
localStorage.removeItem("theme");
}
}

function getCurentTheme() {
return localStorage.getItem("theme") === "dark" ? "dark" : "light";
}

window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", function (e) {
const prefersDarkTheme = e.matches;
const prefersLightTheme = !prefersDarkTheme;
if (
(prefersDarkTheme && getCurentTheme() !== "dark") ||
(prefersLightTheme && getCurentTheme() !== "light")
) {
toggleTheme();
}
});
}

1 change: 1 addition & 0 deletions html/sequencing-patterns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="state.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/service-locator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="event-queue.html">Previous Chapter</a></span>
Expand Down
1 change: 1 addition & 0 deletions html/singleton.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
</head>
<body id="top">
<div class="page sidebar">
<span class="theme-toggler" title="dark theme" onclick="toggleTheme()"></span>
<div class="content">
<nav class="top">
<span class="prev">&larr; <a href="prototype.html">Previous Chapter</a></span>
Expand Down
Loading