Dark Mode #262

tyee commented 2025年10月25日 07:29:02 +02:00

I was getting mostly dark mode when running on my phone except below the "Powered by Feather Wiki" line, where it was white. I used Firefox dev tools to change that section to black which works nicely but when I go to edit a page I get black text on a black background in the "textarea" and the other areas there also. Do you know what I need to change/add to make all the text white in all the edit page areas?

I was getting mostly dark mode when running on my phone except below the "Powered by Feather Wiki" line, where it was white. I used Firefox dev tools to change that section to black which works nicely but when I go to edit a page I get black text on a black background in the "textarea" and the other areas there also. Do you know what I need to change/add to make all the text white in all the edit page areas?

Alamantus commented 2025年10月25日 17:23:55 +02:00

@tyee I don't have specifics on your case, but the quick and dirty way to handle this issue is to add some CSS to make the text white for all input elements:

input, textarea, select, options {
 color: white;
}

But there are a couple of other options for dark mode out there if you want a pre-made solution. The Feather Wiki site at https://feather.wiki is the one that I made. It's a pretty simple color inversion job that also handles the Simple Search extension and is environment-sensitive (it changes based on your device's settings). I'll copy it here expanded since it's hard to read on the site itself:

@media (prefers-color-scheme:dark) {
 html, #featherSearchResults {
 background:#16191e !important;
 }
 html, button, button.chg, button.del,
 input, select, option, textarea,
 .sb, .ed-actionbar, .ed-button, .ed-content,
 summary:is(.np, .b),
 h1, h2, h3, h4, h5, h6, .t,
 #featherSearchResults a {
 color: #bbbdc2 !important;
 }
 a {
 color: #87c;
 }
 .sb, textarea, input, select, option, .ed-actionbar, .ed-content {
 background: #1a1f25;
 }
 .uc pre, .uc code {
 background: #2C333E;
 }
 .sb, .ed-actionbar {
 border-bottom-color: #2C333E;
 }
 textarea, input, select, .ed, .ed-content {
 border-color: #21262f;
 }
 .ed-sel {
 background: #6b7078;
 }
 .tabs > * {
 border-color: #2C333E;
 }
}

Another option is the one in the gallery called "Dark Mode" that changes more than just colors but looks nice. The only potential drawback is that it is not environment-sensitive. You can copy the styling directly from the custom CSS in its Wiki Settings: Dark Mode

There may be others that people have made, but those are the only two ready-to-use ones that I know about 🙂

@tyee I don't have specifics on your case, but the quick and dirty way to handle this issue is to add some CSS to make the text white for all input elements: ```css input, textarea, select, options { color: white; } ``` But there are a couple of other options for dark mode out there if you want a pre-made solution. The Feather Wiki site at https://feather.wiki is the one that I made. It's a pretty simple color inversion job that also handles the Simple Search extension and is environment-sensitive (it changes based on your device's settings). I'll copy it here expanded since it's hard to read on the site itself: ```css @media (prefers-color-scheme:dark) { html, #featherSearchResults { background:#16191e !important; } html, button, button.chg, button.del, input, select, option, textarea, .sb, .ed-actionbar, .ed-button, .ed-content, summary:is(.np, .b), h1, h2, h3, h4, h5, h6, .t, #featherSearchResults a { color: #bbbdc2 !important; } a { color: #87c; } .sb, textarea, input, select, option, .ed-actionbar, .ed-content { background: #1a1f25; } .uc pre, .uc code { background: #2C333E; } .sb, .ed-actionbar { border-bottom-color: #2C333E; } textarea, input, select, .ed, .ed-content { border-color: #21262f; } .ed-sel { background: #6b7078; } .tabs > * { border-color: #2C333E; } } ``` Another option is the one in the [gallery](https://feather.wiki/?page=gallery) called "Dark Mode" that changes more than just colors but looks nice. The only potential drawback is that it is not environment-sensitive. You can copy the styling directly from the custom CSS in its Wiki Settings: [Dark Mode](https://blah28722.github.io) There may be others that people have made, but those are the only two ready-to-use ones that I know about 🙂

lcars commented 2026年05月28日 13:58:05 +02:00

So excited about the new 1.9.0 release, thank you @Alamantus !! ❤️

With 1.9.0, is there an updated way to set up dark mode for Feather Wiki using the new CSS variables, etc.??

Can you advise on the most canonical way to implement dark mode in 1.9.0+?

P.S. Not sure if this or issue #170 is the best for this question...

So excited about the new 1.9.0 release, thank you @Alamantus !! ❤️ With 1.9.0, is there an updated way to set up dark mode for Feather Wiki using the new CSS variables, etc.?? Can you advise on the most canonical way to implement dark mode in 1.9.0+? P.S. Not sure if this or issue [#170](https://codeberg.org/Alamantus/FeatherWiki/issues/170) is the best for this question...

Alamantus commented 2026年05月28日 15:56:02 +02:00

Hi @lcar, I hope the upgrade works well for you! Here is totally fine, but you're right I should probably post the new smaller way to do it on the older issue too. 🙂

Here is the updated CSS for dark mode that I'm using on https://feather.wiki, expanded so it's a little easier to read

@media (prefers-color-scheme:dark) {
 :root {
 --color: #bbbdc2;
 --bg: #16191e;
 --sb-bg: #1f242a;
 --link: #87c;
 --btn-color: #bbbdc2;
 --focus-outline: 2px solid #21262f;
 }
 textarea, input, select, option, .ed-actionbar, .ed-content {
 background: var(--sb-bg);
 }
 .uc pre, .uc code {
 background: var(--sb-bg);
 }
 textarea, input, select, .ed, .ed-content {
 border-color: #21262f;
 }
 .ed-sel {
 background: #6b7078;
 }
}

That's just the minimum amount of CSS I was able to get a nice enough result, so it's possible that it doesn't cover everything. But it works for all the basics that the Feather Wiki site needs 🙂 Note also that you should update the search extension should also be upgraded if you're using it because it also has been updated to use the same variables to unify styling a bit more!

Hi @lcar, I hope the upgrade works well for you! Here is totally fine, but you're right I should probably post the new smaller way to do it on the older issue too. 🙂 Here is the updated CSS for dark mode that I'm using on https://feather.wiki, expanded so it's a little easier to read ``` @media (prefers-color-scheme:dark) { :root { --color: #bbbdc2; --bg: #16191e; --sb-bg: #1f242a; --link: #87c; --btn-color: #bbbdc2; --focus-outline: 2px solid #21262f; } textarea, input, select, option, .ed-actionbar, .ed-content { background: var(--sb-bg); } .uc pre, .uc code { background: var(--sb-bg); } textarea, input, select, .ed, .ed-content { border-color: #21262f; } .ed-sel { background: #6b7078; } } ``` That's just the minimum amount of CSS I was able to get a nice enough result, so it's possible that it doesn't cover everything. But it works for all the basics that the Feather Wiki site needs 🙂 Note also that you should update the [search extension](https://feather.wiki/?page=extensions_search) should also be upgraded if you're using it because it also has been updated to use the same variables to unify styling a bit more!

lcars commented 2026年05月29日 17:19:50 +02:00

Thanks @Alamantus that's super helpful, and I see that the CSS variables have been documented:

https://feather.wiki/?page=advanced_customization#styling_with_css

👆 This is a comprehensive list of all variables, right?

I'll give it a try.

In the meantime, I wonder if there ever can be a way to write in a switch for a visitor to toggle between light and dark modes, or have them be responsive to the visitor's browser settings...... 🤔🤔 unfortunately I don't know any Javascript for this haha.

Thanks @Alamantus that's super helpful, and I see that the CSS variables have been documented: https://feather.wiki/?page=advanced_customization#styling_with_css 👆 This is a comprehensive list of all variables, right? I'll give it a try. In the meantime, I wonder if there ever can be a way to write in a switch for a visitor to toggle between light and dark modes, or have them be responsive to the visitor's browser settings...... 🤔🤔 unfortunately I don't know any Javascript for this haha.

Alamantus commented 2026年05月30日 21:06:26 +02:00

@lcars Yep! That Advanced Customization page is the whole list of available CSS variables. It's obviously not comprehensive of all the styling on the site, but it gets the job done for most things and prevents most style drift when making changes (elements that have the same colors or styles use the same variables).

As for adding a toggle, that should be simple enough to do! I'd have to do some experimentation to figure out what is needed, but adding & removing a class to a root element should help with toggling the dark mode styles.

@lcars Yep! That Advanced Customization page is the whole list of available CSS variables. It's obviously not comprehensive of all the styling on the site, but it gets the job done for most things and prevents most style drift when making changes (elements that have the same colors or styles use the same variables). As for adding a toggle, that should be simple enough to do! I'd have to do some experimentation to figure out what is needed, but adding & removing a class to a root element should help with toggling the dark mode styles.

Alamantus commented 2026年05月30日 23:12:31 +02:00

@lcars Ok, so for the same dark mode styling as above, you can use this in the Custom JS (you'll have to save & reload for it to work) and remove the previous Custom CSS:

['DOMContentLoaded', 'render'].forEach(ev => {
 FW.emitter.on(ev, () => {
 const toggleDark = () => document.querySelector('html').classList.toggle('dark');
 if (!document.querySelector('#dark-toggle-css')) {
 document.head.appendChild(html`<style id="dark-toggle-css">
 @media (prefers-color-scheme:dark) {
 head{color:#fff}
 }
 .dark{--color:#bbbdc2;--bg:#16191e;--sb-bg:#1f242a;--link:#87c;--btn-color:#bbbdc2;--focus-outline:2px solid #21262f}
 .dark textarea,.dark input,.dark select,.dark option,.dark .ed-actionbar,.dark .ed-content{background:var(--sb-bg)}
 .dark .uc pre,.dark .uc code{background:var(--sb-bg)}
 .dark textarea,.dark input,.dark select,.dark .ed,.dark .ed-content{border-color:#21262f}
 .dark .ed-sel{background:#6b7078}
 </style>`);
 if (getComputedStyle(document.head).color === 'rgb(255, 255, 255)') toggleDark();
 }
 setTimeout(() => {
 if (document.querySelector('#dark-toggle')) return;
 const isDark = () => document.querySelector('html').classList.contains('dark');
 const icon = () => isDark() ? '☼' : '☾';
 const title = () => 'Toggle ' + (isDark() ? 'Light' : 'Dark') + ' Mode';
 document.querySelector('.sb > div').appendChild(
 html`<button id="dark-toggle" class="ib" title="${title()}" style="margin-left:1rem" onclick=${(e) => {
 toggleDark();
 const button = e.target;
 button.innerHTML = icon();
 button.title = title();
 }}>${icon()}</button>`
 );
 }, 50);
 });
});
FW.emitter.emit('DOMContentLoaded');

This will respect the browser's default light/dark settings and also add a toggle button next to the "Save Wiki" button that can be used to toggle dark or light mode!

I might actually consider adding this as an official extension once I'm sure there are no bugs with it 😄

@lcars Ok, so for the same dark mode styling as above, you can use this in the Custom JS (you'll have to save & reload for it to work) and remove the previous Custom CSS: ```javascript ['DOMContentLoaded', 'render'].forEach(ev => { FW.emitter.on(ev, () => { const toggleDark = () => document.querySelector('html').classList.toggle('dark'); if (!document.querySelector('#dark-toggle-css')) { document.head.appendChild(html`<style id="dark-toggle-css"> @media (prefers-color-scheme:dark) { head{color:#fff} } .dark{--color:#bbbdc2;--bg:#16191e;--sb-bg:#1f242a;--link:#87c;--btn-color:#bbbdc2;--focus-outline:2px solid #21262f} .dark textarea,.dark input,.dark select,.dark option,.dark .ed-actionbar,.dark .ed-content{background:var(--sb-bg)} .dark .uc pre,.dark .uc code{background:var(--sb-bg)} .dark textarea,.dark input,.dark select,.dark .ed,.dark .ed-content{border-color:#21262f} .dark .ed-sel{background:#6b7078} </style>`); if (getComputedStyle(document.head).color === 'rgb(255, 255, 255)') toggleDark(); } setTimeout(() => { if (document.querySelector('#dark-toggle')) return; const isDark = () => document.querySelector('html').classList.contains('dark'); const icon = () => isDark() ? '☼' : '☾'; const title = () => 'Toggle ' + (isDark() ? 'Light' : 'Dark') + ' Mode'; document.querySelector('.sb > div').appendChild( html`<button id="dark-toggle" class="ib" title="${title()}" style="margin-left:1rem" onclick=${(e) => { toggleDark(); const button = e.target; button.innerHTML = icon(); button.title = title(); }}>${icon()}</button>` ); }, 50); }); }); FW.emitter.emit('DOMContentLoaded'); ``` This will respect the browser's default light/dark settings and also add a toggle button next to the "Save Wiki" button that can be used to toggle dark or light mode! I might actually consider adding this as an official extension once I'm sure there are no bugs with it 😄