feat: implement dark mode support

assets/scripts/statistics_chart.js

@@ -9,10 +9,14 @@ function renderChart() {
     return;
   }
 
+  const styles = getComputedStyle(document.documentElement);
+  const labelColor = styles.getPropertyValue('--tblr-body-color').trim();
+  const primaryColor = styles.getPropertyValue('--tblr-primary').trim();
+
   const options = {
-    colors: ['#32be9f'],
+    colors: [primaryColor],
     fill: {
-      colors: ['#32be9f']
+      colors: [primaryColor]
     },
     series: [{
       name: 'talks',
@@ -38,12 +42,17 @@ function renderChart() {
       offsetY: -20,
       style: {
         fontSize: '12px',
-        colors: ['#304758']
+        colors: [labelColor]
       }
     },
     xaxis: {
       categories: JSON.parse(statisticsChart.dataset.intervals),
       position: 'top',
+      labels: {
+        style: {
+          colors: labelColor
+        }
+      },
       axisBorder: {
         show: false
       },
@@ -54,8 +63,8 @@ function renderChart() {
         fill: {
           type: 'gradient',
           gradient: {
-            colorFrom: '#32be9f',
-            colorTo: '#2a9f83',
+            colorFrom: primaryColor,
+            colorTo: primaryColor,
             stops: [0, 100],
             opacityFrom: 0.4,
             opacityTo: 0.5
@@ -83,7 +92,7 @@ function renderChart() {
       offsetY: 330,
       align: 'center',
       style: {
-        color: '#444'
+        color: labelColor
       }
     }
   };
@@ -109,4 +118,17 @@ if (element) {
   observer.observe(element, {
     attributes: true
   });
+
+  const themeObserver = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.attributeName === 'data-bs-theme') {
+        chart.destroy();
+        renderChart();
+      }
+    });
+  });
+
+  themeObserver.observe(document.documentElement, {
+    attributes: true
+  });
 }

src/BootstrapAdminUi/assets/controllers/theme-switcher-controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    toggle() {
+        const current = document.documentElement.getAttribute('data-bs-theme') || 'light';
+        const next = current === 'dark' ? 'light' : 'dark';
+        localStorage.setItem('sylius-theme', next);
+        document.documentElement.setAttribute('data-bs-theme', next);
+    }
+}

src/BootstrapAdminUi/assets/styles/_accordion.scss

@@ -11,7 +11,7 @@
   .accordion-item {
     .accordion-header {
       &:hover {
-        background: $gray-100;
+        background: var(--tblr-bg-surface);
       }
     }
     .accordion-body {

src/BootstrapAdminUi/assets/styles/_body.scss

@@ -8,18 +8,51 @@
  */
 
 * {
-    --tblr-body-color: #212529;
     --tblr-breadcrumb-item-active-color: var(--tblr-gray-500);
     --tblr-breadcrumb-divider-color: var(--tblr-gray-300);
-    --tblr-code-color: #36393B;
-    --tblr-breadcrumb-link-color: #212529;
     --tblr-blue-rgb: 17, 81, 141;
     --tblr-green-rgb: 0, 97, 16;
     --tblr-pagination-border-width: 0;
 }
 
-[data-bs-theme=dark] {
+@include color-mode(light) {
+    --tblr-body-color: #212529;
+    --tblr-code-color: #36393B;
+    --tblr-breadcrumb-link-color: #212529;
+
+    body {
+        --bs-body-bg: #{$body-bg};
+        --bs-tertiary-bg: #{$body-bg};
+        --bs-body-color: #{$body-color};
+    }
+
+    [data-theme-switch="light"] {
+        display: none;
+    }
+}
+
+@include color-mode(dark) {
     --tblr-bg-surface: #1E2433;
+
+    .btn {
+        --tblr-btn-border-color: var(--tblr-border-color);
+    }
+
+    .form-control,
+    .form-select,
+    .form-check-input {
+        border-color: var(--tblr-border-color);
+    }
+
+    .page-link.active,
+    .active > .page-link {
+        background-color: var(--tblr-bg-surface);
+        border-color: var(--tblr-border-color);
+    }
+
+    [data-theme-switch="dark"] {
+        display: none;
+    }
 }
 
 @font-face {
@@ -29,9 +62,6 @@
 }
 
 body {
-    --bs-body-bg: #{$body-bg};
-    --bs-tertiary-bg: #{$body-bg};
-    --bs-body-color: #{$body-color};
     font-feature-settings: "cv03", "cv04", "cv11";
 }
 
@@ -71,14 +101,6 @@ a.link-reset {
     }
 }
 
-html[data-bs-theme="light"] [data-theme-switch="light"] {
-    display: none;
-}
-
-html[data-bs-theme="dark"] [data-theme-switch="dark"] {
-    display: none;
-}
-
 .switch-collapse {
     display: none;
 }

src/BootstrapAdminUi/assets/styles/_filters.scss

@@ -28,7 +28,7 @@
             justify-content: center;
             align-items: center;
             border-radius: 3px;
-            background: $gray-100;
+            background: var(--tblr-card-bg);
 
             @include media-breakpoint-down(md) {
                 bottom: -19px;

src/BootstrapAdminUi/assets/styles/_form.scss

@@ -36,7 +36,7 @@ textarea.form-control {
 .list-group-item.active:has(.tab-error) {
     border-left-style: solid;
     border-left-width: 2px;
-    border-left-color: #ff0017;
+    border-left-color: var(--tblr-danger);
 }
 
 .form-select:disabled {

src/BootstrapAdminUi/assets/styles/_loader.scss

@@ -12,7 +12,7 @@
     position: absolute;
     height: 100%;
     width: 100%;
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(var(--tblr-body-bg-rgb, 255, 255, 255), 0.9);
     align-items: center;
     justify-content: center;
     z-index: 100;

src/BootstrapAdminUi/assets/styles/_navbar.scss

@@ -36,7 +36,7 @@
     min-width: 44px;
 }
 .navbar-collapse .nav-link:focus-visible {
-    outline: solid 2px rgb(153, 200, 255);
+    outline: solid 2px var(--tblr-primary);
 }
 .navbar-plus-badge{
     width: 50px;

src/BootstrapAdminUi/assets/styles/_sidebar.scss

@@ -96,3 +96,9 @@
         display: none;
     }
 }
+
+@include color-mode(dark) {
+    .menu-search .form-control {
+        border-color: transparent;
+    }
+}

src/BootstrapAdminUi/assets/styles/_tom-select.scss

@@ -12,11 +12,20 @@
 .ts-control {
     padding: 0.5625rem 2.3rem 0.5625rem 0.8rem;
     line-height: 1.4285714286;
-    background: #fff;
     color: var(--tblr-body-color);
     border: var(--tblr-border-width) solid var(--tblr-border-color);
     border-radius: var(--tblr-border-radius);
     box-shadow: var(--tblr-box-shadow-input);
+
+    input {
+        color: var(--tblr-body-color) !important;
+    }
+}
+
+@include color-mode(dark) {
+    .ts-control .item {
+        color: var(--tblr-body-color);
+    }
 }
 
 .focus .ts-control {
@@ -26,10 +35,20 @@
 
 .ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
     padding: 5px;
-    background: #ffffff;
-    border: 1px solid #00000017;
+    background: var(--tblr-bg-surface) !important;
+    border: 1px solid var(--tblr-border-color);
     border-radius: 0.175rem;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.075);
+    box-shadow: 0 2px 5px rgba(var(--tblr-body-color-rgb), 0.075);
+
+    .option {
+        color: var(--tblr-body-color);
+        opacity: 1;
+
+        &.active {
+            background: var(--tblr-primary);
+            color: var(--tblr-primary-fg);
+        }
+    }
 }
 
 .ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {

src/BootstrapAdminUi/config/app/twig_hooks/layout.php

@@ -23,6 +23,10 @@
             ],
 
             'sylius_admin.base#stylesheets' => [
+                'theme' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/layout/theme.html.twig',
+                    'priority' => 200,
+                ],
                 'styles' => [
                     'template' => '@SyliusBootstrapAdminUi/shared/layout/stylesheets.html.twig',
                 ],

src/BootstrapAdminUi/config/app/twig_hooks/layout/navbar.php

@@ -26,6 +26,9 @@
             ],
 
             'sylius_admin.common.component.navbar.items' => [
+                'theme_switcher' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/navbar/items/theme_switcher.html.twig',
+                ],
                 'user' => [
                     'template' => '@SyliusBootstrapAdminUi/shared/crud/common/navbar/items/user.html.twig',
                 ],