Jinsi ya Kutumia CSS Custom Properties kwa Theme Switching

CSS Custom Properties (variables) hukuwezesha kubadilisha colors, fonts, na themes kwa urahisi bila kuandika CSS nyingi. Theme switching inaboresha UX na inafaa kwa dark mode/light mode au branding themes.

✅ HTML Example
<button id="theme-toggle">Badilisha Theme</button>

<div class="card">
<h2>Faulink Theme Demo</h2>
<p>Hii ni example ya theme switching kwa CSS variables.</p>
</div>

✅ CSS (Custom Properties + Themes)
:root {
--bg-color: #fff;
--text-color: #111;
--card-bg: #f0f0f0;
}

[data-theme="dark"] {
--bg-color: #111;
--text-color: #fff;
--card-bg: #222;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: sans-serif;
transition: background-color 0.3s, color 0.3s;
}

.card {
background-color: var(--card-bg);
padding: 20px;
border-radius: 10px;
margin: 20px auto;
width: 300px;
text-align: center;
transition: background-color 0.3s;
}

#theme-toggle {
margin: 20px;
padding: 10px 20px;
cursor: pointer;
}

✅ JavaScript (Theme Switcher)
const toggle = document.getElementById('theme-toggle');

toggle.addEventListener('click', () => {
if(document.documentElement.getAttribute('data-theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
}
});

✔️ Code inafanya switch instantly
✔️ Variables zinarahisisha theme management

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509