Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode

Browse Source
This commit is contained in:
ISA
2025-09-08 15:01:34 +02:00
parent 12d3a17f60
commit d163df0d96
30 changed files with 380 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/main/system/DetailModal.tsx
View File

@@ -454,7 +454,7 @@ export const DetailModal = ({
<div className="absolute top-0 right-0 flex gap-3">
<button
onClick={toggleFullScreen}
className="text-2xl text-gray-600 hover:text-gray-800"
className="text-2xl text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition"
>
<i
className={
@@ -467,7 +467,7 @@ export const DetailModal = ({
<button
onClick={handleClose}
className="text-2xl text-gray-600 hover:text-gray-800"
className="text-2xl text-[var(--color-fg-muted)] hover:text-[var(--color-danger)] transition"
>
<i className="bi bi-x-circle-fill"></i>
</button>
@@ -481,7 +481,7 @@ export const DetailModal = ({
isLoading={isLoading}
/>
<div className="h-[85%] bg-white dark:bg-gray-800 rounded shadow border border-gray-200 dark:border-gray-700 p-2">
<div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
<Line ref={chartRef} data={chartData} options={chartOptions} />
</div>
</div>

2
components/main/system/SystemOverviewGrid.tsx
View File

@@ -16,7 +16,7 @@ export const SystemOverviewGrid = ({ voltages, onOpenDetail }: Props) => {
return (
<div
key={key}
className="p-4 border rounded shadow bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100"
className="p-4 border rounded shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-[var(--color-border)] text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/60 dark:hover:bg-[var(--color-surface-alt)]/30 transition"
>
<h2 className="font-semibold">{key}</h2>
<p>

6
components/main/system/SystemView.tsx
View File

@@ -71,8 +71,8 @@ const SystemPage = () => {
};
return (
<div className="p-4 bg-white dark:bg-gray-900">
<h1 className="text-xl font-bold mb-4">
<div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
<h1 className="text-xl font-bold mb-4 tracking-wide">
System Spannungen & Temperaturen
</h1>
@@ -80,7 +80,7 @@ const SystemPage = () => {
<div className="flex justify-center items-center h-[400px]">
<div className="text-center">
<ClipLoader size={50} color="#3B82F6" />
<p className="mt-4 text-gray-500">
<p className="mt-4 text-[var(--color-fg-muted)]">
Lade Systemdaten … bitte warten
</p>
</div>