ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/dark-theme.php |
<?php
/**
* Partial bersama: Mode Gelap / Terang.
* Disertakan di dalam <head> baik sisi publik maupun admin.
*
* Berisi:
* 1. Skrip apply-awal (mencegah kedipan/flash sebelum render).
* 2. CSS override untuk menggelapkan permukaan & teks (scoped pada html.dark).
* 3. Fungsi global window.toggleTheme().
*
* Catatan: pastikan tailwind.config memakai darkMode: 'class'.
*/
?>
<script>
// Terapkan tema sedini mungkin agar tidak ada kedipan saat memuat.
(function () {
try {
var s = localStorage.getItem('ppidTheme');
var dark = s ? (s === 'dark') : window.matchMedia('(prefers-color-scheme: dark)').matches;
if (dark) { document.documentElement.classList.add('dark'); }
} catch (e) {}
})();
</script>
<style>
html.dark { color-scheme: dark; }
html.dark body { background-color:#0b1120; color:#cbd5e1; }
html.dark body, html.dark .bg-white, html.dark .bg-slate-50, html.dark .bg-slate-100 { transition: background-color .25s ease, border-color .25s ease; }
/* ── Permukaan terang → gelap ── */
html.dark .bg-white:not(.keep-light) { background-color:#1e293b !important; }
html.dark .bg-slate-50,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/30,
html.dark .bg-slate-100 { background-color:#0f172a !important; }
/* Navbar transparan tetap transparan di puncak beranda (mode gelap). */
html.dark #siteNav.nav-transparent:not(.nav-scrolled) { background-color:transparent !important; }
/* Lengkung pemisah (wave SVG) ikut gelap — samakan dengan bg section di bawahnya (#0f172a). */
html.dark .wave-sep { fill:#0f172a !important; }
/* ── Teks ── */
html.dark .text-slate-900 { color:#f8fafc !important; }
html.dark .text-slate-800 { color:#f1f5f9 !important; }
html.dark .text-slate-700 { color:#e2e8f0 !important; }
html.dark .text-slate-600 { color:#cbd5e1 !important; }
html.dark .text-slate-500 { color:#94a3b8 !important; }
html.dark .text-slate-400 { color:#64748b !important; }
/* ── Border, garis, ring ── */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 { border-color:#334155 !important; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color:#334155 !important; }
html.dark .ring-slate-100 { --tw-ring-color:#334155 !important; }
/* ── Input & placeholder ── */
html.dark ::placeholder { color:#64748b !important; }
/* ── Hover ringan ── */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover { background-color:#334155 !important; }
/* ── Badge/ikon pastel diredupkan agar nyaman di latar gelap ── */
html.dark .bg-blue-50 { background-color:rgba(2,132,199,.18) !important; }
html.dark .bg-green-50 { background-color:rgba(22,163,74,.18) !important; }
html.dark .bg-amber-50, html.dark .bg-yellow-50 { background-color:rgba(202,138,4,.18) !important; }
html.dark .bg-red-50 { background-color:rgba(220,38,38,.18) !important; }
html.dark .bg-indigo-50 { background-color:rgba(79,70,229,.18) !important; }
html.dark .bg-slate-100.text-slate-600 { background-color:#334155 !important; }
/* Gradient kartu/section terang → gelap */
html.dark .from-white { --tw-gradient-from:#1e293b var(--tw-gradient-from-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .to-slate-50\/50 { --tw-gradient-to:#1e293b var(--tw-gradient-to-position) !important; }
/* Tombol toggle tema */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; }
</style>
<script>
window.toggleTheme = function () {
var dark = document.documentElement.classList.toggle('dark');
try { localStorage.setItem('ppidTheme', dark ? 'dark' : 'light'); } catch (e) {}
};
window.setTheme = function (mode) {
if (mode === 'dark') { document.documentElement.classList.add('dark'); }
else { document.documentElement.classList.remove('dark'); }
try { localStorage.setItem('ppidTheme', mode); } catch (e) {}
};
</script>
Kontol Shell Bypass