Webseite im dunklen Thema funktioniert nicht richtig in Opera gegen Brave vs Chrome ⇐ CSS

[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 bei der Betrachtung von Brave & Opera auf Mobilgeräten invertiert zu 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.

Code: Select all

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]






< /code>
CSS: < /p>
/* 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>
JS: < /p>
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
}