Archives
Original Flow board 2017 2018 2019 2020 2021 2022 2023 2024

I've recently noticed a couple of Phabricator tasks that got moved into the#MinervaNeue (Tracking) column (which states in its description that it's for issues affecting Minervaoutside of the Minerva codebase), where the MinervaNeue repository does appear to contain code that affects the tasks in question. The examples I noticed wereT373968, which seems like it's at least partially affected bya rule inskinStyles/mediawiki.diff.styles.less; &T372534, which seems like it's taking issue witha different rule in the same file.

I'm starting a discussion here as this involves multiple Phabricator tasks, and I'm not immediately aware of a better venue (please tell me if there is one, though!). Courtesy pingJdlrobson, as I noticed you moving a few tasks to that column earlier this month, and so you may be able to advise on what best practice here is :)

All the best,‍—‍a smart kitten_[meow]12:56, 26 January 2025 (UTC)Reply

Typically we hide things in Minerva as a last resort where a feature was not made in a way that is friendly on mobile. The long term goal would be to remove this code altogether.

The description for tracking is correct. In these two examples you provide, while it is correct that changes in Minerva would be required, these would only be to remove the 'display: none' in Minerva and thus allow any upstream styles to apply. The bulk of the work needs to be happening in the diff code first. If we were to remove the hiding rule in Minerva first we would be surfacing very bad experiences. Therefore the tag reflects the codebase where the majority of the work needs to take place. Does that make sense?Jdlrobson (talk)23:30, 26 January 2025 (UTC)Reply

@Jdlrobson: Yep, that makes sense. I think forT373968, I might have been confused because (judging byT243235) the CSS in question was added to prevent an issue with two icons appearing on top of each other that I believe would now no longer occur; however, if it's been determined that having the icon visible would continue to present a worse experience, having it in the tracking column makes sense. Thank you for explaining :)‍—‍a smart kitten_[meow]22:34, 3 February 2025 (UTC)Reply

@Jdlrobson Perhaps some of this should be added to the description on#MinervaNeue (Tracking)? Like "For example, features we had to disable because they generate markup that we couldn't style in a mobile-friendly way."

You seem to have the power.

(Of course, CSS might end up being able to handle some of these at some point even without any changes to the other code, but then you need to worry about compatibility, and CSS behavior is not easy to check for...)SamB (talk)20:21, 10 November 2025 (UTC)Reply

Tested with MediaWiki 1.43.1 (LTS), in 2 installations

MediaWiki web-UI installer generates LocalSettings.php and when selecting Minerva theme as default it writes these lines:

$wgDefaultSkin = "MinervaNeue";wfLoadSkin( 'MinervaNeue' );

The problem is $wgDefaultSkin does not work unless it's manually set to "minerva" value.

Theoretically this cannot happen consideringT346332 was (also theoretically) fixed at least one year before 1.43.1 was released? --Tactica (talk)21:06, 25 July 2025 (UTC)Reply

I would love it if this theme got clickable header links.

For instance, the header

Whatever

could become

Whatever#

with a link to its anchor.

This would allow sharing a particular section of a page, which is currently relatively laborious.Dingolover6969 (talk)13:27, 4 September 2025 (UTC)Reply

The table of contents box should not be hidden on the mobile version of this skin. The toc box already starts out collapsed, preventing problems; hiding it simply makes navigation harder.Dingolover6969 (talk)13:28, 4 September 2025 (UTC)Reply

I'm running MediaWiki 1.43.6 with the pre-installed Minerva Neue skin. I've got MobileFrontend 2.4.1 (e8bedbd) installed and enabled as well. I have this in my LocalSettings.php:

# Mobile-friendly skinwfLoadSkin( 'MinervaNeue' );$wgDefaultSkin = 'minerva';$wgMinervaFeatures = [    'night-mode' => true,];wfLoadExtension( 'MobileFrontend' );

TheManual:Dark mode page says:

On mobile (Minerva), readers can:Open the main menu (the "hamburger" icon), tap Settings, then in the Color section choose Light, Dark or Automatic.

But I don't see a "Color" section in Settings on my mobile browser, only "Text" and "Expand all sections" when logged out, or "Text", "Expand all sections", "Advanced mode", and "User preferences" when logged in. I also don't see any relevant dark mode settings under "User preferences".

If I manually append?minervanightmode=1 to URLs I do see the night mode activate, but I'm not seeing how to toggle it stay on by user preference.

I ended up cobbling together my own JavaScript + LocalStorage solution that adds a toggle icon to the navbar by adding the following to LocalSettings.php:

/** * Night mode early initialization - prevents FOUC * This injects an inline script that runs before page render */$wgHooks['BeforePageDisplay'][] = function ( OutputPage $out, Skin $skin ) {    $out->addHeadItem('night-mode-early', '<script>(function(){    try {        var theme = localStorage.getItem("minerva-night-mode");        if (!theme) {            theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "night" : "day";            localStorage.setItem("minerva-night-mode", theme);        }        document.documentElement.classList.add("skin-theme-clientpref-" + theme);    } catch(e){}})();</script>');};

and the following to MediaWiki:Common.js:

/** * Night Mode Toggle for Minerva Neue * Theme is applied early via LocalSettings.php hook to prevent FOUC * This script just adds the toggle button */(function () {    'use strict';    var STORAGE_KEY = 'minerva-night-mode';    // SVG icons (20x20)    var MOON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>';    var SUN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>';    /**     * Detect OS color scheme preference     */    function getOSPreference() {        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {            return 'night';        }        return 'day';    }    /**     * Get saved theme, or detect from OS on first visit     */    function getSavedTheme() {        try {            var saved = localStorage.getItem(STORAGE_KEY);            if (saved) {                return saved;            }            // First visit: detect OS preference and save it            var osPreference = getOSPreference();            localStorage.setItem(STORAGE_KEY, osPreference);            return osPreference;        } catch (e) {            return getOSPreference();        }    }    function saveTheme(theme) {        try {            localStorage.setItem(STORAGE_KEY, theme);        } catch (e) {}    }    function applyTheme(theme) {        var html = document.documentElement;        html.classList.remove('skin-theme-clientpref-day', 'skin-theme-clientpref-night');        html.classList.add('skin-theme-clientpref-' + theme);    }    function updateButtonState(button, theme) {        var icon = button.querySelector('.nightmode-icon');                if (theme === 'night') {            icon.innerHTML = SUN_SVG;            button.setAttribute('title', 'Switch to light mode');        } else {            icon.innerHTML = MOON_SVG;            button.setAttribute('title', 'Switch to dark mode');        }    }    function createToggleButton() {        var currentTheme = getSavedTheme();        var li = document.createElement('li');                var button = document.createElement('a');        button.setAttribute('role', 'button');        button.setAttribute('href', '#');        button.id = 'ca-nightmode';        button.className = 'cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet';        button.style.cursor = 'pointer';        var icon = document.createElement('span');        icon.className = 'nightmode-icon';        icon.style.cssText = 'display:flex;align-items:center;justify-content:center;width:20px;height:20px;';        var label = document.createElement('span');        label.className = 'sr-only';        label.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;';        label.textContent = currentTheme === 'night' ? 'Light mode' : 'Dark mode';                button.appendChild(icon);        button.appendChild(label);        li.appendChild(button);        updateButtonState(button, currentTheme);        button.addEventListener('click', function (e) {            e.preventDefault();            var newTheme = getSavedTheme() === 'night' ? 'day' : 'night';            saveTheme(newTheme);            applyTheme(newTheme);            updateButtonState(button, newTheme);        });        return li;    }    function insertButton() {        var notificationsList = document.querySelector('.minerva-notifications ul');                if (notificationsList) {            notificationsList.appendChild(createToggleButton());        } else {            var userNav = document.querySelector('.minerva-user-navigation');            if (userNav) {                var container = document.createElement('div');                container.className = 'minerva-notifications';                var ul = document.createElement('ul');                ul.appendChild(createToggleButton());                container.appendChild(ul);                userNav.insertBefore(container, userNav.firstChild);            }        }    }    // Insert button when DOM is ready    if (document.readyState === 'loading') {        document.addEventListener('DOMContentLoaded', insertButton);    } else {        insertButton();    }})();

It feels kinda janky but works. An advantage is that anonymous users can switch night mode on/off too.

Interestingly, after adding my hook to LocalSettings.php, I now see the "Color" section in the Settings menu when logged in. Although now it doesn't work due to my custom JS code.

Presumably I'm missing something for configuring night mode correctly out of the box? Or maybe my MediaWiki/skin version is too old?ArclightAutomata (talk)21:01, 14 January 2026 (UTC)Reply

With the current release of Minerva it should work out the book with MobileFrontend installed.

If you have an older version you might need to add the following to LocalSettings.php:

$wgMinervaNightMode['base']=true;$wgMinervaNightMode['loggedin']=true;

Jdlrobson (talk)03:39, 15 January 2026 (UTC)Reply