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

Light und Darkmodus in global.css eingestellt, in andere components text-black in root div

Browse Source
This commit is contained in:
ISA
2024-10-24 11:59:52 +02:00
parent 27a078be8d
commit 69a51abdd2
5 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/globals.css
View File

@@ -26,3 +26,19 @@ body {
text-wrap: balance; text-wrap: balance;
} }
} }
@media (prefers-color-scheme: light) {
input {
background-color: #333 !important; /* Dunkler Hintergrund im Darkmode */
color: #fff !important; /* Weißer Text im Darkmode */
border: 1px solid #555; /* Optional: etwas hellerer Rahmen */
}
}
@media (prefers-color-scheme: dark) {
input {
background-color: white !important; /* Heller Hintergrund im Lightmode */
color: black !important; /* Schwarzer Text im Lightmode */
border: 1px solid #ccc; /* Optional: heller Rahmen */
}
}

2
app/kabelueberwachung/page.jsx
View File

@@ -84,7 +84,7 @@ function Kabelueberwachung() {
}, []); }, []);
return ( return (
<div className="bg-gray-100 flex-1 p-6"> <div className="bg-gray-100 flex-1 p-6 text-black">
<h1 className="text-2xl mb-4">Kabelüberwachung</h1> <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
<div className="mb-4"> <div className="mb-4">

2
components/Footer.jsx
View File

@@ -90,7 +90,7 @@ function Footer() {
}, [showSlider]); }, [showSlider]);
return ( return (
<footer className="relative bg-gray-300 p-4 overflow-hidden"> <footer className="relative bg-gray-300 p-4 overflow-hidden text-black">
<div className="container mx-auto flex justify-between"> <div className="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2"> <div className="flex flex-row space-x-2">
<Icon <Icon

2
components/Header.jsx
View File

@@ -135,7 +135,7 @@ function Header() {
if (!isClient) return null; // Rendere die Komponente nicht, bis sie clientseitig ausgeführt wird if (!isClient) return null; // Rendere die Komponente nicht, bis sie clientseitig ausgeführt wird
return ( return (
<header className="bg-gray-300 flex justify-between items-center w-full h-28 relative"> <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
<div className="absolute left-32 top-32 transform -translate-y-1/2"> <div className="absolute left-32 top-32 transform -translate-y-1/2">
<Image <Image
src="/images/Logo.png" src="/images/Logo.png"

9
components/modales/KueModal.jsx
View File

@@ -166,6 +166,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
overlay: { overlay: {
backgroundColor: "rgba(0, 0, 0, 0.5)", backgroundColor: "rgba(0, 0, 0, 0.5)",
zIndex: 100, zIndex: 100,
text: "black",
}, },
content: { content: {
top: "50%", top: "50%",
@@ -202,7 +203,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</div> </div>
{/* ID und Modulname anzeigen */} {/* ID und Modulname anzeigen */}
<div className="p-2 mb-4"> <div className="p-2 mb-4 text-black">
{/* {/*
<div className="mb-2"> <div className="mb-2">
<label className="font-bold">ID:</label> <label className="font-bold">ID:</label>
@@ -215,8 +216,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</div> </div>
*/} */}
<div className="mb-2"> <div className="mb-2 ">
<label className="font-bold">Kabelbezeichnung:</label> <label className="font-bold ">Kabelbezeichnung:</label>
<input <input
type="text" type="text"
className="border rounded p-1 w-full text-sm" className="border rounded p-1 w-full text-sm"
@@ -227,7 +228,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</div> </div>
{/* Modal Body */} {/* Modal Body */}
<div className="p-2"> <div className="p-2 text-black">
<h3 className="font-bold text-center mb-4">Isolationsmessung</h3> <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
<table className="w-full text-left border-collapse mb-4"> <table className="w-full text-left border-collapse mb-4">
<thead className="bg-gray-100"> <thead className="bg-gray-100">