django-bootstrap6-admin 0.1.0__tar.gz → 0.1.2__tar.gz

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.2] - 2026-11-15
+
+### Fixed
+
+- Clicking the theme toggle in a dark system no longer moves to an `auto`
+  state that resolves to dark and leaves the page unchanged. The toggle skips
+  that no-op step, so a single click always changes the visible theme.
+
+## [0.1.1] - 2026-11-15
+
+### Added
+
+- Soft fade-in/fade-out transition when switching between light, dark and auto
+  themes. The animation is skipped when `prefers-reduced-motion: reduce` is
+  set.
+
 ## [0.1.0] - 2026-11-15
 
 ### Added

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/CONTRIBUTING.md

@@ -23,6 +23,8 @@ python -m django test --settings=tests.settings
 Run the linter and formatter check before opening a pull request:
 
 ```bash
+python -m django test --settings=tests.settings
+node tests/js/theme_toggle.test.js
 ruff check .
 ruff format --check .
 ```

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/MANIFEST.in

@@ -6,5 +6,6 @@ include CONTRIBUTING.md
 recursive-include src/django_bootstrap6_admin/templates *.html
 recursive-include src/django_bootstrap6_admin/static *
 recursive-include tests *.py
+recursive-include tests *.js
 global-exclude __pycache__
 global-exclude *.py[cod]

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: django-bootstrap6-admin
-Version: 0.1.0
+Version: 0.1.2
 Summary: A modern Bootstrap 6 skin for the Django admin.
 Author-email: Aliberk Sandıkçı <git@asandikci.com>
 Maintainer-email: Aliberk Sandıkçı <git@asandikci.com>
@@ -63,6 +63,11 @@ permissions and JavaScript remain in charge.
 - Modern login, logout and password change pages.
 - Light, dark and system themes. The existing Django `theme` localStorage
   preference is synchronised with Bootstrap's `data-bs-theme` attribute.
+- Soft fade-in/fade-out transition when switching themes, skipped
+  automatically for users who prefer reduced motion.
+- Every click changes the visible theme: if `auto` would resolve to the theme
+  already on screen, the toggle skips that step instead of appearing to do
+  nothing.
 - Accessible focus states, labels, table headers and ARIA attributes.
 - All Django admin JavaScript hooks are preserved: `actions.js`,
   `filters.js`, `nav_sidebar.js`, inlines, Select2/autocomplete, calendar
@@ -234,6 +239,7 @@ Run the tests and the linter:
 
 ```bash
 python -m django test --settings=tests.settings
+node tests/js/theme_toggle.test.js
 ruff check .
 ruff format --check .
 ```

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/README.md

@@ -26,6 +26,11 @@ permissions and JavaScript remain in charge.
 - Modern login, logout and password change pages.
 - Light, dark and system themes. The existing Django `theme` localStorage
   preference is synchronised with Bootstrap's `data-bs-theme` attribute.
+- Soft fade-in/fade-out transition when switching themes, skipped
+  automatically for users who prefer reduced motion.
+- Every click changes the visible theme: if `auto` would resolve to the theme
+  already on screen, the toggle skips that step instead of appearing to do
+  nothing.
 - Accessible focus states, labels, table headers and ARIA attributes.
 - All Django admin JavaScript hooks are preserved: `actions.js`,
   `filters.js`, `nav_sidebar.js`, inlines, Select2/autocomplete, calendar
@@ -197,6 +202,7 @@ Run the tests and the linter:
 
 ```bash
 python -m django test --settings=tests.settings
+node tests/js/theme_toggle.test.js
 ruff check .
 ruff format --check .
 ```

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/src/django_bootstrap6_admin/__init__.py

@@ -1,3 +1,3 @@
 """Bootstrap 6 skin for the Django admin."""
 
-__version__ = "0.1.0"
+__version__ = "0.1.2"

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/src/django_bootstrap6_admin/static/django_bootstrap6_admin/css/admin.css

@@ -127,6 +127,31 @@ body.ba-body {
     line-height: 1.55;
 }
 
+/*
+ * Full-screen veil used by theme.js. The script fades it in over the current
+ * canvas colour, applies the new theme while the veil is opaque, then fades
+ * it out to reveal the new colours.
+ */
+.ba-theme-fade {
+    position: fixed;
+    inset: 0;
+    z-index: 3000;
+    background: var(--ba-canvas);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+}
+
+.ba-theme-fade.is-active {
+    opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ba-theme-fade {
+        transition: none;
+    }
+}
+
 #container.ba-app {
     display: flex;
     flex: 1 0 auto;

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/src/django_bootstrap6_admin/static/django_bootstrap6_admin/js/theme.js

@@ -7,7 +7,13 @@
 (() => {
     const STORAGE_KEY = "theme";
     const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
     const modes = ["auto", "light", "dark"];
+    const FADE_MS = 220; // Slightly longer than the 200ms CSS transition.
+
+    let overlay;
+    let fading = false;
+    let pendingMode = null;
 
     function normalize(mode) {
         return modes.includes(mode) ? mode : "auto";
@@ -18,9 +24,10 @@
         if (modes.includes(stored)) {
             return stored;
         }
-        // First visit: start in the effective OS theme so the visible page
-        // and the toggle icon agree immediately. Auto remains in the cycle.
-        return media.matches ? "dark" : "light";
+        // No explicit preference yet: follow the system. Keeping the mode as
+        // "auto" prevents the first click from landing on an auto state that
+        // resolves to the same theme.
+        return "auto";
     }
 
     function updateButtons(mode) {
@@ -37,11 +44,15 @@
         });
     }
 
+    function effectiveMode(mode) {
+        mode = normalize(mode);
+        return mode === "auto" ? (media.matches ? "dark" : "light") : mode;
+    }
+
     function apply(mode) {
         mode = normalize(mode);
         const root = document.documentElement;
-        const effective =
-            mode === "auto" ? (media.matches ? "dark" : "light") : mode;
+        const effective = effectiveMode(mode);
 
         root.dataset.theme = mode;
         root.dataset.effectiveTheme = effective;
@@ -54,14 +65,68 @@
         updateButtons(mode);
     }
 
+    function canvasColor() {
+        const bodyStyles = getComputedStyle(document.body);
+        if (bodyStyles.backgroundColor !== "rgba(0, 0, 0, 0)") {
+            return bodyStyles.backgroundColor;
+        }
+        return getComputedStyle(document.documentElement).backgroundColor;
+    }
+
+    function overlayElement() {
+        if (overlay) {
+            return overlay;
+        }
+        overlay = document.createElement("div");
+        overlay.className = "ba-theme-fade";
+        overlay.setAttribute("aria-hidden", "true");
+        document.body.appendChild(overlay);
+        return overlay;
+    }
+
+    function transitionTo(mode) {
+        mode = normalize(mode);
+
+        if (reducedMotion.matches || !document.body) {
+            apply(mode);
+            return;
+        }
+
+        if (fading) {
+            pendingMode = mode;
+            return;
+        }
+
+        const element = overlayElement();
+        element.style.backgroundColor = canvasColor();
+        // Commit the transparent state so the following class change animates.
+        void element.offsetWidth;
+        element.classList.add("is-active");
+        fading = true;
+
+        window.setTimeout(() => {
+            apply(mode);
+            element.classList.remove("is-active");
+            window.setTimeout(() => {
+                fading = false;
+                const next = pendingMode;
+                pendingMode = null;
+                if (next && next !== mode) {
+                    transitionTo(next);
+                }
+            }, FADE_MS);
+        }, FADE_MS);
+    }
+
     function set(mode) {
         mode = normalize(mode);
         localStorage.setItem(STORAGE_KEY, mode);
-        apply(mode);
+        transitionTo(mode);
     }
 
     function cycle() {
         const mode = current();
+        const effective = effectiveMode(mode);
         let next;
 
         if (media.matches) {
@@ -72,6 +137,12 @@
                 mode === "auto" ? "dark" : mode === "dark" ? "light" : "auto";
         }
 
+        // In dark systems auto is dark, and in light systems auto is light.
+        // Skip that no-op step so every click visibly changes the theme.
+        if (effectiveMode(next) === effective) {
+            next = effective === "dark" ? "light" : "dark";
+        }
+
         set(next);
     }
 
@@ -99,7 +170,7 @@
     if (media.addEventListener) {
         media.addEventListener("change", () => {
             if (current() === "auto") {
-                apply("auto");
+                transitionTo("auto");
             }
         });
     }

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/src/django_bootstrap6_admin.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: django-bootstrap6-admin
-Version: 0.1.0
+Version: 0.1.2
 Summary: A modern Bootstrap 6 skin for the Django admin.
 Author-email: Aliberk Sandıkçı <git@asandikci.com>
 Maintainer-email: Aliberk Sandıkçı <git@asandikci.com>
@@ -63,6 +63,11 @@ permissions and JavaScript remain in charge.
 - Modern login, logout and password change pages.
 - Light, dark and system themes. The existing Django `theme` localStorage
   preference is synchronised with Bootstrap's `data-bs-theme` attribute.
+- Soft fade-in/fade-out transition when switching themes, skipped
+  automatically for users who prefer reduced motion.
+- Every click changes the visible theme: if `auto` would resolve to the theme
+  already on screen, the toggle skips that step instead of appearing to do
+  nothing.
 - Accessible focus states, labels, table headers and ARIA attributes.
 - All Django admin JavaScript hooks are preserved: `actions.js`,
   `filters.js`, `nav_sidebar.js`, inlines, Select2/autocomplete, calendar
@@ -234,6 +239,7 @@ Run the tests and the linter:
 
 ```bash
 python -m django test --settings=tests.settings
+node tests/js/theme_toggle.test.js
 ruff check .
 ruff format --check .
 ```

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/src/django_bootstrap6_admin.egg-info/SOURCES.txt

@@ -63,6 +63,7 @@ tests/test_admin_ui.py
 tests/test_package.py
 tests/test_templatetags.py
 tests/urls.py
+tests/js/theme_toggle.test.js
 tests/testapp/__init__.py
 tests/testapp/admin.py
 tests/testapp/apps.py

django_bootstrap6_admin-0.1.2/tests/js/theme_toggle.test.js

@@ -0,0 +1,141 @@
+const fs = require("fs");
+const vm = require("vm");
+
+const source = fs.readFileSync(
+    "src/django_bootstrap6_admin/static/django_bootstrap6_admin/js/theme.js",
+    "utf8",
+);
+
+class ClassList {
+    constructor() {
+        this.values = new Set();
+    }
+    add(value) {
+        this.values.add(value);
+    }
+    remove(value) {
+        this.values.delete(value);
+    }
+    contains(value) {
+        return this.values.has(value);
+    }
+}
+
+function makeElement() {
+    return {
+        style: {},
+        classList: new ClassList(),
+        dataset: {},
+        attrs: {},
+        offsetWidth: 0,
+        setAttribute(name, value) {
+            this.attrs[name] = value;
+        },
+        appendChild() {},
+    };
+}
+
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function effective(mode, prefersDark) {
+    return mode === "auto" ? (prefersDark ? "dark" : "light") : mode;
+}
+
+async function run({ prefersDark, stored, reducedMotion = false }) {
+    const root = makeElement();
+    const body = makeElement();
+    const localStorage = {
+        value: stored,
+        getItem() {
+            return this.value;
+        },
+        setItem(_key, value) {
+            this.value = value;
+        },
+    };
+    const sandbox = {
+        console,
+        setTimeout,
+        clearTimeout,
+        localStorage,
+        getComputedStyle() {
+            return { backgroundColor: "rgb(13, 20, 28)" };
+        },
+        document: {
+            documentElement: root,
+            body,
+            readyState: "complete",
+            createElement: makeElement,
+            querySelectorAll() {
+                return [];
+            },
+            addEventListener() {},
+        },
+    };
+    sandbox.window = sandbox;
+    sandbox.window.matchMedia = (query) => ({
+        matches: query.includes("prefers-reduced-motion")
+            ? reducedMotion
+            : query.includes("prefers-color-scheme") && prefersDark,
+        addEventListener() {},
+    });
+    sandbox.window.setTimeout = setTimeout;
+
+    vm.runInNewContext(source, sandbox, { filename: "theme.js" });
+
+    const api = sandbox.window.Bootstrap6AdminTheme;
+    const before = root.dataset.theme;
+    const beforeEffective = root.dataset.effectiveTheme;
+    api.cycle();
+    await sleep(reducedMotion ? 10 : 600);
+    const after = root.dataset.theme;
+    const afterEffective = root.dataset.effectiveTheme;
+
+    return { before, beforeEffective, after, afterEffective };
+}
+
+(async () => {
+    const cases = [
+        { label: "dark system, no stored theme", prefersDark: true, stored: null },
+        { label: "dark system, stored auto", prefersDark: true, stored: "auto" },
+        { label: "dark system, stored dark", prefersDark: true, stored: "dark" },
+        { label: "dark system, stored light", prefersDark: true, stored: "light" },
+        { label: "light system, no stored theme", prefersDark: false, stored: null },
+        { label: "light system, stored auto", prefersDark: false, stored: "auto" },
+        { label: "light system, stored light", prefersDark: false, stored: "light" },
+        { label: "light system, stored dark", prefersDark: false, stored: "dark" },
+    ];
+
+    let failed = false;
+    for (const testCase of cases) {
+        const result = await run(testCase);
+        const changed = result.beforeEffective !== result.afterEffective;
+        if (!changed) {
+            failed = true;
+        }
+        console.log(
+            `${changed ? "PASS" : "FAIL"} ${testCase.label}: ` +
+                `${result.before}/${result.beforeEffective} -> ` +
+                `${result.after}/${result.afterEffective}`,
+        );
+    }
+
+    const reduced = await run({
+        prefersDark: true,
+        stored: "dark",
+        reducedMotion: true,
+    });
+    const reducedChanged = reduced.beforeEffective !== reduced.afterEffective;
+    if (!reducedChanged) {
+        failed = true;
+    }
+    console.log(
+        `${reducedChanged ? "PASS" : "FAIL"} reduced motion: ` +
+            `${reduced.before}/${reduced.beforeEffective} -> ` +
+            `${reduced.after}/${reduced.afterEffective}`,
+    );
+
+    process.exit(failed ? 1 : 0);
+})();

{django_bootstrap6_admin-0.1.0 → django_bootstrap6_admin-0.1.2}/tests/test_package.py

@@ -31,3 +31,18 @@ class PackageAssetsTests(SimpleTestCase):
         for asset in STATIC_ASSETS:
             with self.subTest(asset=asset):
                 self.assertIsNotNone(finders.find(asset))
+
+    def test_theme_transition_assets(self):
+        static_dir = Path(django_bootstrap6_admin.__file__).parent / "static"
+        theme_js = (static_dir / "django_bootstrap6_admin" / "js" / "theme.js").read_text(
+            encoding="utf-8"
+        )
+        admin_css = (static_dir / "django_bootstrap6_admin" / "css" / "admin.css").read_text(
+            encoding="utf-8"
+        )
+
+        self.assertIn("ba-theme-fade", theme_js)
+        self.assertIn("prefers-reduced-motion", theme_js)
+        self.assertIn(".ba-theme-fade", admin_css)
+        self.assertIn(".ba-theme-fade.is-active", admin_css)
+        self.assertIn("transition: opacity 200ms ease", admin_css)