01497: Dark color theme
Description: A Dark color theme has been prototyped and needs review and ideas for improvements.
To toggle the dark theme, click on Toggle dark theme or on the same icon in the site header. Then browse the documentation and the cookbook, and please report any problems.
The JavaScript functions that toggle, remember, and restore the dark theme can be reused in other skins, see Cookbook:DarkColorScheme. Petko
What has been prototyped:
- The basic colors and backgrounds have been defined.
- Cookbook:PmSyntax dark styles have been defined, although I don't like all colors as much as I love the light theme colors. Test.PmSyntax.
- The Toggle logic and interface is available in other skins (this will be documented at Cookbook:DarkColorScheme).
Problems to be resolved:
- Inline colors and backgrounds set via WikiStyles do not work well if they were written for a light theme. For example, a wikistyle defining only a yellow or a gray background, on the dark theme the default light gray text will not have enough contrast. Some of these can be rewritten to class names like
%frame%which can then be defined in the stylesheet. We need to browse with the dark theme enabled the core documentation in English and other languages, and review and fix any bad definitions.- I am willing to consider adding new semantic CSS classnames to the core skins so that we can replace inline CSS with classnames.
- Code highlighting via Highlight.js currently uses a pub/css/local.css override of the default light theme. The core HLJS themes are currently either light or dark, and currently these cannot be loaded programmatically. Not sure if we should add this to the core, or let people download/enable it separately.
- It currently doesn't automatically load the dark theme if the browser prefers it. Not sure if we should enable this.
Let me know if you have any questions or suggestions for improvements. --Petko
Logo
Comment from Gregor Klarič: The PmWiki logo is not optimized for the dark theme though... Perhaps optionally choose different logos depending on theme?
I have added an SVG logo with a thin white outline for the letters which looks much better than the old GIF picture. I agree a separate picture for the dark theme is better, but this will complicate the skin and we want to keep the core skins simple (for new admins to easily review, learn and adapt). We may adding separate logo later. --Petko
Dark != Black background
As a suggestion, I believe dark background is to be preferred over black background. gb
Indeed, Google Material design recommends #121212, and the background is currently #111111 which is virtually the same. --Petko
With 2.3.30 the #wikitext background is now #121212. --Petko