diff --git a/ts_web/elements/dees-appui-activitylog.ts b/ts_web/elements/dees-appui-activitylog.ts
index 9104a31..68defd8 100644
--- a/ts_web/elements/dees-appui-activitylog.ts
+++ b/ts_web/elements/dees-appui-activitylog.ts
@@ -22,15 +22,15 @@ export class DeesAppuiActivitylog extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         position: relative;
         display: block;
         width: 100%;
         max-width: 300px;
         height: 100%;
-        background: #111c28;
+        background: ${cssManager.bdTheme('#f8f8f8', '#111c28')};
         font-family: 'Intel One Mono', sans-serif;
-        border-left: 1px solid #202020;
+        border-left: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
         cursor: default;
       }
       .maincontainer {
@@ -47,7 +47,8 @@ export class DeesAppuiActivitylog extends DeesElement {
         height: 32px;
         width: 100%;
         padding: 0px 12px 0px 12px;
-        background: #0e151f;
+        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
       }
 
       .topbar .heading {
@@ -57,6 +58,7 @@ export class DeesAppuiActivitylog extends DeesElement {
         font-weight: 500;
         font-size: 14px;
         font-family: 'Geist Sans', sans-serif;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
       }
 
       .activityContainer {
@@ -73,7 +75,7 @@ export class DeesAppuiActivitylog extends DeesElement {
         font-size: 12px;
         text-align: center;
         padding-top: 16px;
-        color: #888
+        color: ${cssManager.bdTheme('#666', '#888')}
       }
 
       .streamingIndicator.bottom {
@@ -85,19 +87,19 @@ export class DeesAppuiActivitylog extends DeesElement {
         min-height: 30px;
         font-size: 12px;
         padding: 8px 16px;
-        border-bottom: 1px dotted #ffffff20;
+        border-bottom: 1px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
       }
 
       .activityentry:last-of-type {
-        border-bottom: 1px solid #ffffff00;
+        border-bottom: 1px solid transparent;
       }
 
       .activityentry:hover {
-        background: #00000080;
+        background: ${cssManager.bdTheme('#00000005', '#00000080')};
       }
 
       .timestamp {
-        color: #ff8787;
+        color: ${cssManager.bdTheme('#e57373', '#ff8787')};
       }
 
       .searchbox {
@@ -105,10 +107,11 @@ export class DeesAppuiActivitylog extends DeesElement {
         bottom: 0px;
         width: 100%;
         height: 40px;
-        background: #0e151f;
+        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
+        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
       }
       .searchbox input {
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         background: none;
         width: 100%;
         height: 40px;
@@ -127,7 +130,10 @@ export class DeesAppuiActivitylog extends DeesElement {
         width: 100%;
         height: 32px;
         bottom: 40px;
-        background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
+        background: ${cssManager.bdTheme(
+          'linear-gradient(180deg, #f8f8f800 0%, #ffffff 100%)',
+          'linear-gradient(180deg, #111c2800 0%, #0e151f 100%)'
+        )};
         pointer-events: none;
       }
       .topShadow {
@@ -135,7 +141,10 @@ export class DeesAppuiActivitylog extends DeesElement {
         width: 100%;
         height: 32px;
         top: 32px;
-        background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
+        background: ${cssManager.bdTheme(
+          'linear-gradient(0deg, #f8f8f800 0%, #ffffff 100%)',
+          'linear-gradient(0deg, #111c2800 0%, #0e151f 100%)'
+        )};
         pointer-events: none;
       }
     `,
diff --git a/ts_web/elements/dees-appui-appbar.demo.ts b/ts_web/elements/dees-appui-appbar.demo.ts
index 3b81508..0c99635 100644
--- a/ts_web/elements/dees-appui-appbar.demo.ts
+++ b/ts_web/elements/dees-appui-appbar.demo.ts
@@ -71,15 +71,6 @@ export const demoFunc = () => {
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       const appbar = elementArg.querySelector('#appbar') as DeesAppuiBar;
       
-      // Set up theme toggle
-      const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button');
-      themeButtons[0].addEventListener('click', () => {
-        appbar.theme = 'dark';
-      });
-      themeButtons[1].addEventListener('click', () => {
-        appbar.theme = 'light';
-      });
-      
       // Set up status toggle
       const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
       statusButtons[0].addEventListener('click', () => {
diff --git a/ts_web/elements/dees-appui-appbar.ts b/ts_web/elements/dees-appui-appbar.ts
index 64aae91..3c7bedf 100644
--- a/ts_web/elements/dees-appui-appbar.ts
+++ b/ts_web/elements/dees-appui-appbar.ts
@@ -40,8 +40,6 @@ export class DeesAppuiBar extends DeesElement {
   @property({ type: Boolean })
   public showWindowControls: boolean = true;
 
-  @property({ type: String })
-  public theme: 'light' | 'dark' = 'dark';
 
   @property({ type: Object })
   public user?: {
@@ -72,21 +70,15 @@ export class DeesAppuiBar extends DeesElement {
       :host {
         /* CSS Variables for theming */
         --appbar-height: 40px;
-        --appbar-bg: var(--dees-color-appbar-bg, #000000);
-        --appbar-text: var(--dees-color-appbar-text, #ffffff80);
-        --appbar-text-hover: var(--dees-color-appbar-text-hover, #ffffff);
-        --appbar-border: var(--dees-color-appbar-border, #202020);
-        --appbar-hover: var(--dees-color-appbar-hover, #ffffff20);
-        --appbar-active: var(--dees-color-appbar-active, #ffffff30);
         --appbar-font-size: 12px;
         
         display: block;
         position: relative;
         width: 100%;
         height: var(--appbar-height);
-        border-bottom: 1px solid var(--appbar-border);
-        background: var(--appbar-bg);
-        color: var(--appbar-text);
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
         font-size: var(--appbar-font-size);
         display: grid;
         grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
@@ -94,16 +86,6 @@ export class DeesAppuiBar extends DeesElement {
         user-select: none;
       }
 
-      /* Light theme */
-      :host([theme="light"]) {
-        --appbar-bg: #ffffff;
-        --appbar-text: #00000080;
-        --appbar-text-hover: #000000;
-        --appbar-border: #e0e0e0;
-        --appbar-hover: #00000010;
-        --appbar-active: #00000020;
-      }
-
       .menus {
         display: flex;
         align-items: center;
@@ -134,13 +116,13 @@ export class DeesAppuiBar extends DeesElement {
       }
 
       .menuItem:hover {
-        background: var(--appbar-hover);
-        color: var(--appbar-text-hover);
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
       }
 
       .menuItem.active {
-        background: var(--appbar-active);
-        color: var(--appbar-text-hover);
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
       }
 
       .menuItem[disabled] {
@@ -150,7 +132,7 @@ export class DeesAppuiBar extends DeesElement {
       }
 
       .menuItem:focus-visible {
-        box-shadow: 0 0 0 2px var(--appbar-text);
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('#00000080', '#ffffff80')};
       }
 
 
@@ -160,10 +142,10 @@ export class DeesAppuiBar extends DeesElement {
         top: 100%;
         left: 0;
         min-width: 200px;
-        background: var(--appbar-bg);
-        border: 1px solid var(--appbar-border);
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
         border-radius: 4px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
         margin-top: 4px;
         z-index: 1000;
         opacity: 0;
@@ -189,12 +171,12 @@ export class DeesAppuiBar extends DeesElement {
 
       .dropdown-item:hover,
       .dropdown-item.focused {
-        background: var(--appbar-hover);
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
       }
 
       .dropdown-divider {
         height: 1px;
-        background: var(--appbar-border);
+        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
         margin: 4px 0;
       }
 
@@ -223,13 +205,13 @@ export class DeesAppuiBar extends DeesElement {
       }
 
       .breadcrumb-item {
-        color: var(--appbar-text);
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
         cursor: pointer;
         transition: color 0.2s;
       }
 
       .breadcrumb-item:hover {
-        color: var(--appbar-text-hover);
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
       }
 
       .breadcrumb-separator {
@@ -267,7 +249,7 @@ export class DeesAppuiBar extends DeesElement {
       }
 
       .user-info:hover {
-        background: var(--appbar-hover);
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
       }
 
       .user-avatar {
@@ -275,7 +257,7 @@ export class DeesAppuiBar extends DeesElement {
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: var(--appbar-active);
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
         display: flex;
         align-items: center;
         justify-content: center;
@@ -297,7 +279,7 @@ export class DeesAppuiBar extends DeesElement {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        border: 2px solid var(--appbar-bg);
+        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
       }
 
       .user-status.online {
diff --git a/ts_web/elements/dees-appui-base.demo.ts b/ts_web/elements/dees-appui-base.demo.ts
index 9a35582..9694615 100644
--- a/ts_web/elements/dees-appui-base.demo.ts
+++ b/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>
   `;
diff --git a/ts_web/elements/dees-appui-base.ts b/ts_web/elements/dees-appui-base.ts
index 418e16f..ed665bc 100644
--- a/ts_web/elements/dees-appui-base.ts
+++ b/ts_web/elements/dees-appui-base.ts
@@ -40,8 +40,6 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Boolean })
   public appbarShowWindowControls: boolean = true;
 
-  @property({ type: String })
-  public appbarTheme: 'light' | 'dark' = 'dark';
 
   @property({ type: Object })
   public appbarUser?: {
@@ -94,7 +92,7 @@ export class DeesAppuiBase extends DeesElement {
         position: absolute;
         height: 100%;
         width: 100%;
-        background: var(--dees-color-appui-background, #1a1a1a);
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
       }
       .maingrid {
         position: absolute;
@@ -116,7 +114,6 @@ export class DeesAppuiBase extends DeesElement {
         .breadcrumbs=${this.appbarBreadcrumbs}
         .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
         .showWindowControls=${this.appbarShowWindowControls}
-        .theme=${this.appbarTheme}
         .user=${this.appbarUser}
         .showSearch=${this.appbarShowSearch}
         @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
diff --git a/ts_web/elements/dees-appui-maincontent.ts b/ts_web/elements/dees-appui-maincontent.ts
index 78f3be0..615e975 100644
--- a/ts_web/elements/dees-appui-maincontent.ts
+++ b/ts_web/elements/dees-appui-maincontent.ts
@@ -46,12 +46,12 @@ export class DeesAppuiMaincontent extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         display: block;
         width: 100%;
         height: 100%;
         position: relative;
-        background: #161616;
+        background: ${cssManager.bdTheme('#ffffff', '#161616')};
       }
       .maincontainer {
         position: absolute;
diff --git a/ts_web/elements/dees-appui-mainmenu.ts b/ts_web/elements/dees-appui-mainmenu.ts
index 6a424fa..280f4d7 100644
--- a/ts_web/elements/dees-appui-mainmenu.ts
+++ b/ts_web/elements/dees-appui-mainmenu.ts
@@ -45,16 +45,16 @@ export class DeesAppuiMainmenu extends DeesElement {
     css`
       .mainContainer {
         --menuSize: 60px;
-        color: #ccc;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
         z-index: 10;
         display: block;
         position: relative;
         width: var(--menuSize);
         height: 100%;
-        background: #000000;
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+        background: ${cssManager.bdTheme('#f5f5f5', '#000000')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0, 0, 0, 0.1)', '0px 0px 5px rgba(0, 0, 0, 0.5)')};
         user-select: none;
-        border-right: 1px solid #202020;
+        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
       }
 
       .tabsContainer {
@@ -70,17 +70,17 @@ export class DeesAppuiMainmenu extends DeesElement {
       }
 
       .tab:hover {
-        background: rgba(255, 255, 255, 0.15);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.15)')};
       }
 
       .tab.selectedTab {
-        color: #fff;
-        background: rgba(255, 255, 255, 0.1);
+        color: ${cssManager.bdTheme('#000', '#fff')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
       }
 
       .tabIndicator {
         opacity: 0;
-        background: #4e729a;
+        background: ${cssManager.bdTheme('#2196f3', '#4e729a')};
         position: absolute;
         width: 5px;
         height: calc((var(--menuSize) / 3) * 2);
diff --git a/ts_web/elements/dees-appui-mainselector.ts b/ts_web/elements/dees-appui-mainselector.ts
index 782eaf3..3d8d639 100644
--- a/ts_web/elements/dees-appui-mainselector.ts
+++ b/ts_web/elements/dees-appui-mainselector.ts
@@ -44,14 +44,14 @@ export class DeesAppuiMainselector extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         position: relative;
         display: block;
         width: 100%;
         max-width: 300px;
         height: 100%;
-        background: #000000;
-        border-right: 1px solid #222222;
+        background: ${cssManager.bdTheme('#fafafa', '#000000')};
+        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#222222')};
       }
       .maincontainer {
         position: absolute;
@@ -74,6 +74,7 @@ export class DeesAppuiMainselector extends DeesElement {
         font-family: 'Geist Sans', sans-serif;
         font-weight: 600;
         font-size: 14px;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
       }
 
       .selectionOptions {
@@ -92,7 +93,7 @@ export class DeesAppuiMainselector extends DeesElement {
         margin-right: 16px;
         padding-top: 8px;
         padding-bottom: 8px;
-        border-top: 1px dotted #303030;
+        border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#303030')};
         border-left: 0px solid rgba(0, 0, 0, 0);
         transition: all 0.1s;
       }
@@ -100,6 +101,7 @@ export class DeesAppuiMainselector extends DeesElement {
       .selectionOptions .selectionOption:hover {
         border-left: 2px solid #26a69a50;
         padding-left: 8px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
       }
 
       .selectionOptions .selectionOption:first-child {
@@ -109,6 +111,7 @@ export class DeesAppuiMainselector extends DeesElement {
       .selectionOptions .selectionOption.selectedOption {
         border-left: 4px solid #26a69a;
         padding-left: 10px;
+        background: ${cssManager.bdTheme('rgba(38, 166, 154, 0.05)', 'rgba(38, 166, 154, 0.1)')};
       }
     `,
   ];
diff --git a/ts_web/elements/dees-appui-tabs.ts b/ts_web/elements/dees-appui-tabs.ts
index f29dd6a..4fc5f45 100644
--- a/ts_web/elements/dees-appui-tabs.ts
+++ b/ts_web/elements/dees-appui-tabs.ts
@@ -50,7 +50,7 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tabs-wrapper {
         position: relative;
-        background: #000000;
+        background: ${cssManager.bdTheme('#f5f5f5', '#000000')};
         height: 56px;
       }
 
@@ -76,7 +76,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .tab {
-        color: #a0a0a0;
+        color: ${cssManager.bdTheme('#666', '#a0a0a0')};
         white-space: nowrap;
         cursor: pointer;
         transition: color 0.1s;
@@ -99,20 +99,20 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .tab:hover {
-        color: #ffffff;
+        color: ${cssManager.bdTheme('#000', '#ffffff')};
       }
 
       .vertical .tab:hover {
-        background: rgba(255, 255, 255, 0.05);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
       }
 
       .tab.selectedTab {
-        color: #e0e0e0;
+        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
       }
 
       .vertical .tab.selectedTab {
-        background: rgba(255, 255, 255, 0.1);
-        color: #ffffff;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#000', '#ffffff')};
       }
 
       .tab dees-icon {
@@ -126,11 +126,11 @@ export class DeesAppuiTabs extends DeesElement {
         bottom: 0px;
         height: 40px;
         width: 40px;
-        background: #161616;
+        background: ${cssManager.bdTheme('#ffffff', '#161616')};
         transition: all 0.1s;
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
-        border-top: 1px solid #444444;
+        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444444')};
       }
 
       .vertical .tabIndicator {