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

This commit is contained in:
Juergen Kunz
2025-06-17 08:58:47 +00:00
parent 5b4319432c
commit cd3c7c8e63
9 changed files with 68 additions and 150 deletions

View File

@ -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;
}
`,