Browse Source

fix dark/light transitions on syntax highlighting

pull/574/head
Jake Jarvis 4 weeks ago
parent
commit
081864d091
Signed by: jake GPG Key ID: 2B0C9CF251E69A39
  1. 6
      assets/js/src/dark-mode.js
  2. 6
      assets/sass/components/_syntax.scss

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

@ -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)
const disableTransitionCSSHack = document.createElement("style");
@ -10,7 +10,7 @@ disableTransitionCSSHack.innerHTML = `
}`;
document.head.appendChild(disableTransitionCSSHack);
darkModeInit({
initDarkMode({
toggle: document.querySelector(".dark-mode-toggle"),
onInit: function (t) {
// 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)
setTimeout(() => {
document.head.removeChild(disableTransitionCSSHack);
}, 250);
}, 500);
},
});

6
assets/sass/components/_syntax.scss

@ -126,6 +126,9 @@ body.light {
color: #313131;
background-color: #fbfbfb;
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 {
@ -202,6 +205,9 @@ body.dark {
color: #e4e4e4;
background-color: #252525;
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 {

Loading…
Cancel
Save