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

34
components/main/digitalOutputs/DigitalOutputsWidget.tsx
View File

@@ -66,7 +66,7 @@ export default function DigitalOutputsWidget({
};
return (
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 shadow-md border border-gray-200 dark:border-gray-700 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
<div className="bg-[var(--color-surface)] text-[var(--color-fg)] shadow-md border border-base p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon
icon={outputIcon}
@@ -74,19 +74,19 @@ export default function DigitalOutputsWidget({
/>
Schaltausgänge
</h2>
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-white dark:bg-gray-900 rounded-lg">
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-b">
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-[var(--color-surface)] rounded-lg">
<thead className="bg-[var(--color-surface)] text-[var(--color-fg)] border-b border-base">
<tr>
<th className="px-1 py-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<th className="px-1 py-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)]">
Ausgang
</th>
<th className="px-1 py-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<th className="px-1 py-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)]">
Bezeichnung
</th>
<th className="px-1 py-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<th className="px-1 py-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)]">
Schalter
</th>
<th className="px-1 py-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<th className="px-1 py-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)]">
Aktion
</th>
</tr>
@@ -95,33 +95,33 @@ export default function DigitalOutputsWidget({
{digitalOutputs.map((output) => (
<tr
key={output.id}
className="border-b hover:bg-gray-100 dark:hover:bg-gray-800"
className="border-b border-base hover:bg-[var(--color-surface-alt)] transition-colors"
>
<td className="flex items-center px-1 py-1 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="flex items-center px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
<Icon
icon={outputIcon}
className="text-gray-600 mr-1 text-base"
className="text-[var(--color-muted)] mr-1 text-base"
/>
{output.id}
</td>
<td className="px-1 py-1 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
{output.label}
</td>
<td className="px-1 py-1 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
<Icon
icon={switchIcon}
className={`cursor-pointer text-base transition ${
output.status
? "text-littwin-blue"
: "text-gray-500 scale-x-[-1]"
} dark:hover:text-littwin-blue`}
? "text-accent"
: "text-[var(--color-muted)] scale-x-[-1]"
} hover:text-accent`}
onClick={() => handleToggle(output.id)}
/>
</td>
<td className="px-1 py-1 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
<Icon
icon={settingsIcon}
className="text-gray-400 text-base cursor-pointer dark:text-gray-300 dark:hover:text-white"
className="text-[var(--color-muted)] text-base cursor-pointer hover:text-[var(--color-fg)]"
onClick={() => openOutputModal(output)}
/>
</td>