jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-22 19:11:18 -04:00
Code Issues Activity

fix dark/light transitions on syntax highlighting

Browse Source
This commit is contained in:
Jake Jarvis
2021-09-22 17:36:22 -04:00
parent 7353f0b95e
commit 081864d091
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/src/dark-mode.js
View File

@@ -1,4 +1,4 @@
import { init as darkModeInit } from "dark-mode-switcheroo"; import { init as initDarkMode } from "dark-mode-switcheroo";
// HACK: disable theme transition until user's preference is auto-restored (1/2) // HACK: disable theme transition until user's preference is auto-restored (1/2)
const disableTransitionCSSHack = document.createElement("style"); const disableTransitionCSSHack = document.createElement("style");
@@ -10,7 +10,7 @@ disableTransitionCSSHack.innerHTML = `
}`; }`;
document.head.appendChild(disableTransitionCSSHack); document.head.appendChild(disableTransitionCSSHack);
darkModeInit({ initDarkMode({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
onInit: function (t) { onInit: function (t) {
// make toggle visible now that we know JS is enabled // make toggle visible now that we know JS is enabled
@@ -19,6 +19,6 @@ darkModeInit({
// HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2) // HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
setTimeout(() => { setTimeout(() => {
document.head.removeChild(disableTransitionCSSHack); document.head.removeChild(disableTransitionCSSHack);
}, 250); }, 500);
}, },
}); });

6
assets/sass/components/_syntax.scss
View File

@@ -126,6 +126,9 @@ body.light {
color: #313131; color: #313131;
background-color: #fbfbfb; background-color: #fbfbfb;
border-color: #d5d5d5; border-color: #d5d5d5;
// TODO: apply this consistently via themed() mixin like everywhere else
transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
} }
.chroma { .chroma {
@@ -202,6 +205,9 @@ body.dark {
color: #e4e4e4; color: #e4e4e4;
background-color: #252525; background-color: #252525;
border-color: #535353; border-color: #535353;
// TODO: apply this consistently via themed() mixin like everywhere else
transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
} }
.chroma { .chroma {