diff --git a/assets/scss/common/_styles.scss b/assets/scss/common/_styles.scss
index d73fecac..2ca411ea 100644
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -1,3 +1,9 @@
+// Self-sufficient default: child themes commonly shadow common/_variables.scss
+// with their own fork, which silently drops variables added upstream. Declaring
+// the default at the point of use keeps the build working either way; a fork
+// that does define the variable still wins through !default.
+$theme-mode-transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out !default;
+
 @if $enable-dark-mode {
     [data-bs-theme-animate="true"] body {
         transition: $theme-mode-transition;
diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
index d592ea65..6efa5f49 100644
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -1,5 +1,9 @@
 // stylelint-disable annotation-no-unknown
 
+// Self-sufficient default — see common/_styles.scss for the rationale
+// (child themes shadowing common/_variables.scss).
+$theme-mode-transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out !default;
+
 // adapted from https://www.codeply.com/p/UsTEwDkzNp#
 .checkbox {
 	opacity: 0;