Веб -страница в темной теме неправильно работает над Opera против Brave vs Chrome ⇐ Html

[Anonymous]

У меня есть следующий код HTML, CSS & JS для простого веб -сайта. Это хорошо отображается на Chrome и Safari на рабочем столе, а также на мобильных устройствах. Тем не менее, цвета, кажется, перевернуты при просмотре на Brave & Opera на мобильных устройствах. Например, на фоне списка показан-codor вместо цвета-list-bg , когда в Opera & Brave's Dark Theme на мобильных устройствах. Заголовки также становятся белыми, вместо того, чтобы иметь-текстовый цвет среди других проблем с дисплеем нижнего колонтитула и т. Д. Я предположил, что это должно работать последовательно, так как я указываю каждый цвет, поэтому я не уверен, почему он выиграл » Т показать правильно. Любая помощь приветствуется. < /P>
html: < /p>






Porfolio











Projects


Project 1
Web



Project 2
Mobile


Google Link
Facebook Link






< /code>
css: < /p>
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?famil ... splay=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
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... sus-chrome