diff --git a/assets/js/src/dark-mode.js b/assets/js/src/dark-mode.js
index 30678f76..58695137 100644
--- a/assets/js/src/dark-mode.js
+++ b/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);
   },
 });
diff --git a/assets/sass/components/_syntax.scss b/assets/sass/components/_syntax.scss
index 6f91941e..b6fe4257 100644
--- a/assets/sass/components/_syntax.scss
+++ b/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 {