Webseite nicht korrekt im dunklen Thema angezeigt ⇐ HTML

[Anonymous]

Ich habe den folgenden HTML-, CSS & JS -Code für eine einfache Website. Dies wird auf Chrome und Safari auf dem Desktop sowie auf dem Handy gut angezeigt. Die Farben scheinen jedoch im -Dunk -Modus nur invertiert zu werden, wenn sie auf Brave & Opera auf dem Mobiltelefon betrachtet werden. Der Listenhintergrund zeigt beispielsweise die--Link-Color anstelle der Farbe-list-bg in der dunklen Themen des Opera & Brave auf Mobilgeräten. Die Header werden auch weiß, anstatt die-Text-Color unter anderem mit Fußzeile Display usw. zu haben. Ich nahm an, dass es konsequent funktionieren sollte, da ich jede Farbe angeben sollte, also bin ich nicht sicher, warum sie gewonnen hat. t richtig zeigen. Jede Hilfe wird geschätzt. net /f0arHjrv.jpg " /> < /p>

Code: Select all

function initThemeSwitch() {
const themeSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
if (!themeSwitch) return;

// Check system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

function getThemePreference() {
const savedTheme = localStorage.getItem('theme');
return savedTheme || (prefersDark ? 'dark' : 'light');
}

function updateTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
if (themeSwitch) {
themeSwitch.checked = theme === 'dark';
}
}

// Initial setup
updateTheme(getThemePreference());

// observe theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) { // Only react to system changes if user hasn't set a preference
const newTheme = e.matches ? 'dark' : 'light';
updateTheme(newTheme);
}
});

// toggle changes
themeSwitch.addEventListener('change', function(e) {
const theme = e.target.checked ? 'dark' : 'light';
localStorage.setItem('theme', theme);
updateTheme(theme);
});

// observe changes in localStorage from other pages
window.addEventListener('storage', function(e) {
if (e.key === 'theme') {
updateTheme(e.newValue);
}
});

// Optional: Listen for visibility changes to ensure sync when tab becomes visible
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'visible') {
updateTheme(getThemePreference());
}
});
}

// Initialize on DOM content loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initThemeSwitch);
} else {
initThemeSwitch();  // Call directly if DOM is already loaded
}< /code>
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Theme Variables */
:root {
/* Light theme */
--bg-overlay: none;
--text-color: #271B08;
--list-bg: white;
--link-color: #2c3e50;
--link-hover-bg: #f8f9fa;
--link-hover-color: #1a252f;
--footer-disclaimer-link-hover-color: #1a252f;
--border-color: #eee;
--muted-color: gray;
}

[data-theme="dark"] {
/* Dark theme */
--bg-overlay: linear-gradient(rgba(237, 221, 195, 0.4), rgba(237, 221, 195, 0.4));
--text-color: #271B08;
--list-bg: #EDDDC3;
--link-color: #271B08;
--link-hover-bg: #746556;
--link-hover-color: #EDDDC3;
--footer-disclaimer-link-hover-color: #746556;
--border-color: #746556;
--muted-color: #746556;
--footer-link-hover: #271B08;
}

/* Base styles */
body {
background-size: cover;
color: var(--text-color);
font-family: 'Special Elite', monospace;
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

.container {
max-width: 800px;
width: 100%;
padding: 20px;
border-radius: 8px;
box-sizing: border-box;
margin: 0 auto;
}

h1,
h2,
h3 {
text-align: center;
color: var(--text-color);
}

h3 {
margin-top: 2em;
margin-bottom: 1em;
font-size: 1.2em;
}

.project-list {
display: flex;
flex-direction: column;
background-color: var(--list-bg);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.project-link {
position: relative;
display: block;
padding: 10px;
margin: 5px 0;
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.2s ease;
padding-right: 100px;
}

.project-link:hover {
background-color: var(--link-hover-bg);
color: var(--link-hover-color);
}

.project-link-text {
display: block;
word-wrap: break-word;
overflow-wrap: break-word;
}

.project-domain {
position: absolute;
font-size: small;
right: 10px;
top: 10px;
color: var(--muted-color);
white-space: nowrap;
}

.project-link:hover .project-domain {
color: var(--link-hover-color);
}

.footer,
.disclaimer {
text-align: center;
color: var(--text-color);
margin-top: 20px;
font-size: 14px;
}

.footer {
padding: 10px;
}

.disclaimer p {
margin: 10px 0;
}

.footer a,
.disclaimer a {
text-decoration: none;
color: var(--link-color);
margin: 5px;
font-size: 14px;
}

.footer a:hover,
.disclaimer a:hover {
color: var(--footer-disclaimer-link-hover-color);
text-decoration: underline;
}

.theme-switch-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 20px 0;
width: 100%;
}

.theme-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #746556;
transition: 0.4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "☀️";
display: flex;
align-items: center;
justify-content: center;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}

input:checked+.slider {
background-color: #271B08;
}

input:checked+.slider:before {
transform: translateX(26px);
content: "🌙";
background-color:  #EDDDC3;
}< /code>






Porfolio











Projects

[url=projects/project-1.html]
Project 1
Web
[/url]

[url=projects/project-2.html]
Project 2
Mobile
[/url]

[url=https://www.google.com]Google Link[/url]
[url=https://www.facebook.com]Facebook Link[/url]