feat: Refactor theming in app components to use dynamic CSS variables

ts_web/elements/dees-appui-base.demo.ts

@@ -87,38 +87,7 @@ export const demoFunc = () => {
   ];
 
   return html`
-    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      const appuiBase = elementArg.querySelector('dees-appui-base') as DeesAppuiBase;
-      
-      // Add event listeners for theme toggle
-      const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button');
-      themeButtons[0].addEventListener('click', () => {
-        if (appuiBase.appbar) {
-          appuiBase.appbar.theme = 'dark';
-        }
-      });
-      themeButtons[1].addEventListener('click', () => {
-        if (appuiBase.appbar) {
-          appuiBase.appbar.theme = 'light';
-        }
-      });
-
-      // Update breadcrumbs dynamically
-      const updateBreadcrumbs = (path: string) => {
-        if (appuiBase.appbar) {
-          appuiBase.appbar.breadcrumbs = path;
-        }
-      };
-
-      // Simulate navigation
-      setTimeout(() => {
-        updateBreadcrumbs('Dashboard > Overview');
-      }, 2000);
-
-      setTimeout(() => {
-        updateBreadcrumbs('Dashboard > Projects > my-app > src > index.ts');
-      }, 4000);
-    }}>
+    <dees-demowrapper>
       <style>
         ${css`
         .demo-container {
@@ -128,28 +97,6 @@ export const demoFunc = () => {
           overflow: hidden;
         }
         
-        .controls {
-          position: absolute;
-          bottom: 20px;
-          right: 20px;
-          z-index: 1000;
-          background: rgba(0, 0, 0, 0.8);
-          padding: 16px;
-          border-radius: 8px;
-          display: flex;
-          gap: 12px;
-        }
-        
-        .control-group {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-        }
-        
-        .control-group label {
-          font-size: 12px;
-          color: #888;
-        }
       `}
       </style>
       
@@ -157,7 +104,6 @@ export const demoFunc = () => {
         <dees-appui-base
           .appbarMenuItems=${menuItems}
           .appbarBreadcrumbs=${'Dashboard'}
-          .appbarTheme=${'dark'}
           .appbarUser=${{
             name: 'Jane Smith',
             status: 'online' as 'online' | 'offline' | 'busy' | 'away'
@@ -187,16 +133,6 @@ export const demoFunc = () => {
             </ul>
           </div>
         </dees-appui-base>
-        
-        <div class="controls">
-          <div class="control-group">
-            <label>Theme</label>
-            <dees-button-group class="theme-toggle">
-              <dees-button>Dark</dees-button>
-              <dees-button>Light</dees-button>
-            </dees-button-group>
-          </div>
-        </div>
       </div>
     </dees-demowrapper>
   `;