Improve announcement rendering and theme assets

src/web/public/css/theme-custom.css

@@ -2429,7 +2429,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .announcement-color-picker__grid {
   display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
   gap: 0.375rem;
 }
 

src/web/public/js/theme-init.js

@@ -2,25 +2,26 @@
 
 (function () {
   var storageKey = 'lte-theme';
-  var theme = 'dark';
-
-  function getPreferredTheme() {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    return 'light';
-  }
+  var root = document.documentElement;
+  var authoredTheme = root.getAttribute('data-bs-theme');
+  var theme = authoredTheme === 'light' || authoredTheme === 'dark' ? authoredTheme : 'dark';
+  var storedTheme = null;
 
   try {
-    var storedTheme = window.localStorage.getItem(storageKey);
-    if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'auto') {
-      theme = storedTheme === 'auto' ? getPreferredTheme() : storedTheme;
-    }
+    storedTheme = window.localStorage.getItem(storageKey);
   } catch (error) {
-    theme = 'dark';
+    storedTheme = null;
   }
 
-  document.documentElement.dataset.bsTheme = theme;
-  document.documentElement.style.colorScheme = theme;
+  if (storedTheme === 'light' || storedTheme === 'dark') {
+    theme = storedTheme;
+  } else if (storedTheme === 'auto' || (authoredTheme !== 'light' && authoredTheme !== 'dark')) {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  root.setAttribute('data-bs-theme', theme);
+  root.style.colorScheme = theme;
+  if (theme !== authoredTheme) {
+    root.setAttribute('data-lte-theme-resolved', '');
+  }
 }());

src/web/routes/signage/announcements/routes.js

@@ -28,7 +28,21 @@ module.exports = function registerAnnouncementRoutes(app, deps) {
     { value: 'warning', label: 'Warning' },
     { value: 'danger', label: 'Danger' },
     { value: 'dark', label: 'Dark' },
-    { value: 'light', label: 'Light' }
+    { value: 'light', label: 'Light' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'amber', label: 'Amber' },
+    { value: 'olive', label: 'Olive' },
+    { value: 'teal', label: 'Teal' },
+    { value: 'sky', label: 'Sky' },
+    { value: 'indigo', label: 'Indigo' },
+    { value: 'violet', label: 'Violet' },
+    { value: 'fuchsia', label: 'Fuchsia' },
+    { value: 'pink', label: 'Pink' },
+    { value: 'navy', label: 'Navy' },
+    { value: 'steel', label: 'Steel' },
+    { value: 'slate', label: 'Slate' },
+    { value: 'graphite', label: 'Graphite' },
+    { value: 'midnight', label: 'Midnight' }
   ];
   const ANNOUNCEMENT_ICONS = announcementIcons.ANNOUNCEMENT_ICON_OPTIONS || [];
    const ANNOUNCEMENT_ICON_CATALOG = announcementIcons.ANNOUNCEMENT_ICON_CATALOG || ANNOUNCEMENT_ICONS;

src/web/views/shared/frame-layout.hbs

@@ -8,6 +8,7 @@
     <script src="/assets/js/theme-init.js"></script>
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
+    <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
     <link rel="stylesheet" href="/assets/css/theme-custom.css?v={{appVersion}}" />
     {{#if stylesheets.length}}
       {{#each stylesheets}}

src/web/views/shared/layout.hbs

@@ -10,6 +10,7 @@
     <link rel="preload" href="/assets/adminlte/bootstrap-icons/fonts/bootstrap-icons.woff" as="font" type="font/woff" crossorigin="anonymous" />
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
+    <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
     <link rel="stylesheet" href="/assets/css/theme-custom.css?v={{appVersion}}" />
     <link rel="stylesheet" href="/assets/vendor/animate.css/animate.min.css?v={{appVersion}}" />
     {{#if stylesheets.length}}
@@ -171,11 +172,11 @@
             </a>
           </div>
           <div class="sidebar-wrapper d-flex flex-column flex-grow-1 min-h-0">
-            <nav class="mt-2 flex-grow-1" aria-label="Main navigation">
+            <nav class="flex-grow-1" aria-label="Main navigation">
               <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" data-accordion="false" role="menu" id="navigation">
-                {{#if (anyPermission currentUser 'dashboard.read' 'clients.read' 'screens.read' 'announcements.read' 'playlists.read' 'slides.read' 'templates.read' 'canvas-sizes.read')}}
+                {{!-- {{#if (anyPermission currentUser 'dashboard.read' 'clients.read' 'screens.read' 'announcements.read' 'playlists.read' 'slides.read' 'templates.read' 'canvas-sizes.read')}}
                   <li class="nav-header">DIGITAL SIGNAGE</li>
-                {{/if}}
+                {{/if}} --}}
                 {{#if (hasPermission currentUser 'dashboard.read')}}
                   <li class="nav-item">
                     <a class="nav-link {{#if (eq active 'dashboard')}}active{{/if}}" href="/dashboard">