|
|
| Line 1: |
Line 1: |
| (function () {
| |
| 'use strict';
| |
|
| |
| const CONFIG = {
| |
| cookieKey: 'mode',
| |
| toggleId: 'pt-theme-toggle'
| |
| };
| |
|
| |
| // Sun = shown in dark mode (click to switch to light)
| |
| // Moon = shown in light mode (click to switch to dark)
| |
| const ICONS = {
| |
| sun: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /></svg>',
| |
| moon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>'
| |
| };
| |
|
| |
| function getMode() {
| |
| return document.documentElement.getAttribute('data-mode') === 'light'
| |
| ? 'light'
| |
| : 'dark';
| |
| }
| |
|
| |
| function saveMode(mode) {
| |
| mw.cookie.set(CONFIG.cookieKey, mode, {
| |
| expires: 365 * 86400,
| |
| prefix: ''
| |
| });
| |
| }
| |
|
| |
| function iconFor(mode) {
| |
| return mode === 'light' ? ICONS.moon : ICONS.sun;
| |
| }
| |
|
| |
| function labelFor(mode) {
| |
| return mode === 'light'
| |
| ? 'Switch to dark theme'
| |
| : 'Switch to light theme';
| |
| }
| |
|
| |
| function apply(mode) {
| |
| document.documentElement.setAttribute('data-mode', mode);
| |
|
| |
| const a = document.querySelector('#' + CONFIG.toggleId + ' a');
| |
| if (a) {
| |
| a.innerHTML = iconFor(mode);
| |
| a.setAttribute('aria-label', labelFor(mode));
| |
| a.title = labelFor(mode);
| |
| }
| |
| }
| |
|
| |
| function setMode(mode) {
| |
| apply(mode);
| |
| saveMode(mode);
| |
| }
| |
|
| |
| function toggleMode() {
| |
| setMode(getMode() === 'light' ? 'dark' : 'light');
| |
| }
| |
|
| |
| function createToggle() {
| |
| const ul = document.querySelector('#p-personal ul');
| |
|
| |
| if (!ul) {
| |
| setTimeout(createToggle, 300);
| |
| return;
| |
| }
| |
|
| |
| if (document.getElementById(CONFIG.toggleId)) {
| |
| return;
| |
| }
| |
|
| |
| const mode = getMode();
| |
|
| |
| const li = document.createElement('li');
| |
| li.id = CONFIG.toggleId;
| |
|
| |
| const a = document.createElement('a');
| |
| a.href = '#';
| |
| a.innerHTML = iconFor(mode);
| |
| a.setAttribute('aria-label', labelFor(mode));
| |
| a.title = labelFor(mode);
| |
|
| |
| a.addEventListener('click', function (e) {
| |
| e.preventDefault();
| |
| toggleMode();
| |
| });
| |
|
| |
| li.appendChild(a);
| |
| ul.insertBefore(li, ul.firstChild);
| |
| }
| |
|
| |
| $(function () {
| |
| apply(getMode());
| |
| createToggle();
| |
| });
| |
| })();
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
