NextBestNetwork/mediawiki-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First draft of working NBN theme for mediawiki

Browse Source
This commit is contained in:
D. Rimron-Soutter
2025-12-29 18:05:44 +00:00
parent 082cc79b33
commit 8b59db8825
8 changed files with 78 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/scripts/nextbestnetwork.js
View File

@@ -2,5 +2,6 @@ import 'jquery';
import 'bootstrap';
import 'masonry-layout';
console.log("NextBestNetwork skin loaded");
import './nextbestnetwork/nextbestnetwork'
import './nextbestnetwork/darkmode'

103
resources/scripts/nextbestnetwork/darkmode.js
View File

@@ -1,82 +1,71 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
$(document).ready(() => {
console.log("DOM fully loaded and parsed");
(() => {
'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
console.log("Found stored theme: ", storedTheme);
const storedTheme = getStoredTheme();
console.log("Found stored theme:", storedTheme);
if (storedTheme) {
return storedTheme
return storedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const setTheme = theme => {
if (theme === 'auto') {
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
$('html').attr('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
$('html').attr('data-bs-theme', theme);
}
}
setTheme(getPreferredTheme())
};
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#bd-theme')
if (!themeSwitcher) {
return
const themeSwitcher = $('#bd-theme');
if (!themeSwitcher.length) {
console.warn("Theme switcher (#bd-theme) not found in DOM.");
return;
}
const themeSwitcherText = document.querySelector('#bd-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
const themeSwitcherText = $('#bd-theme-text');
const activeThemeIcon = $('.theme-icon-active use');
const btnToActive = $(`[data-bs-theme-value="${theme}"]`);
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
})
const svgOfActiveBtn = btnToActive.find('svg use').attr('href');
$('[data-bs-theme-value]').removeClass('active').attr('aria-pressed', 'false');
btnToActive.addClass('active').attr('aria-pressed', 'true');
activeThemeIcon.attr('href', svgOfActiveBtn);
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
const themeSwitcherLabel = `${themeSwitcherText.text()} (${btnToActive.data('bs-theme-value')})`;
themeSwitcher.attr('aria-label', themeSwitcherLabel);
if (focus) {
themeSwitcher.focus()
themeSwitcher.focus();
}
}
};
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
console.log("Setting initial theme...");
setTheme(getPreferredTheme());
showActiveTheme(getPreferredTheme());
$('[data-bs-theme-value]').on('click', function () {
const theme = $(this).data('bs-theme-value');
console.log("Theme changed to:", theme);
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme, true);
});
window.matchMedia('(prefers-color-scheme: dark)').on('change', () => {
const storedTheme = getStoredTheme();
if (!storedTheme || storedTheme === 'auto') {
setTheme(getPreferredTheme());
}
})
});
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme, true)
})
})
})
})()
console.log("Theme toggler initialized!");
});

3
resources/scripts/nextbestnetwork/nextbestnetwork.js
View File

@@ -1,5 +1,6 @@
jQuery(document).ready(function ($) {
console.log("parse nextbestnetwork.js");
jQuery(document).ready(function ($) {
/**
* TOOLTIPS
*/

2
resources/styles/nextbestnetwork.scss
View File

@@ -2,6 +2,6 @@
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons";
@import "~bootstrap-icons/font/bootstrap-icons.scss";
@import "nextbestnetwork/index";