MediaWiki:Common.js: Perbedaan antara revisi
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
||
| Baris 1.327: | Baris 1.327: | ||
/* ========================================================== | /* ========================================================== | ||
🌙 MIPPEDIA DARK MODE ENGINE | |||
Fitur: | Fitur: Toggle Mode Gelap/Terang dengan Memory (Simpan Pilihan) | ||
========================================================== */ | ========================================================== */ | ||
(function() { | (function() { | ||
// 1. Definisikan Gaya Dark Mode (CSS) | |||
var darkModeStyles = ` | |||
/* Warna Dasar */ | |||
body.mippedia-dark { background-color: #121212 !important; color: #e0e0e0 !important; } | |||
.mippedia-dark #content, .mippedia-dark #mw-content-text { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; } | |||
/* Link & Header */ | |||
.mippedia-dark a { color: #8ab4f8 !important; } | |||
.mippedia-dark a:visited { color: #c58af9 !important; } | |||
.mippedia-dark h1, .mippedia-dark h2, .mippedia-dark h3 { color: #ffffff !important; border-bottom-color: #333 !important; } | |||
/* Kotak Pencarian & Sidebar */ | |||
.mippedia-dark input, .mippedia-dark textarea { background-color: #2d2d2d !important; color: #ffffff !important; border: 1px solid #444 !important; } | |||
.mippedia-dark #mw-panel, .mippedia-dark #p-logo { background-color: #121212 !important; } | |||
/* Tombol Saklar */ | |||
#darkmode-toggle { | |||
position: fixed; | |||
bottom: 20px; | |||
right: 20px; | |||
width: 45px; | |||
height: 45px; | |||
background: #3498db; | |||
color: white; | |||
border-radius: 50%; | |||
text-align: center; | |||
line-height: 45px; | |||
font-size: 22px; | |||
cursor: pointer; | |||
z-index: 10000; | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |||
transition: 0.3s; | |||
user-select: none; | |||
} | |||
#darkmode-toggle:hover { transform: scale(1.1); background: #2980b9; } | |||
.mippedia-dark #darkmode-toggle { background: #f1c40f; color: #333; } | |||
`; | |||
// 2. Suntikkan CSS ke Head | |||
var styleEl = document.createElement('style'); | |||
styleEl.innerHTML = darkModeStyles; | |||
document.head.appendChild(styleEl); | |||
// 3. Logika Fungsi Toggle | |||
// | $(document).ready(function() { | ||
// Tambahkan tombol saklar ke Body | |||
var $toggle = $('<div id="darkmode-toggle" title="Ganti Mode Lampu">🌙</div>'); | |||
$('body').append($toggle); | |||
// | // Cek memory (localStorage) apakah sebelumnya user pake dark mode | ||
if (localStorage.getItem('mip-dark-mode') === 'enabled') { | |||
$('body').addClass('mippedia-dark'); | |||
$toggle.html('☀️'); | |||
} | |||
// Event Klik | |||
$toggle.on('click', function() { | |||
$('body').toggleClass('mippedia-dark'); | |||
if ($('body').hasClass('mippedia-dark')) { | |||
if ( | localStorage.setItem('mip-dark-mode', 'enabled'); | ||
$ | $toggle.html('☀️'); | ||
} else { | |||
localStorage.setItem('mip-dark-mode', 'disabled'); | |||
$toggle.html('🌙'); | |||
} | } | ||
} | }); | ||
}); | }); | ||
})(); | })(); | ||