Hi all,

PerlMonks already has a dark theme, but it is not automatically selected when not logged in. Literally every website, app, IDE etc. I use regularly nowadays supports a dark mode, and opening PerlMonks in the evenings, e.g. on mobile where I'm not logged in by default, is therefore much less enjoyable to my eyes, and I suspect it's similar for anyone who has selected the dark mode on their mobile, OS, or browser.

Supporting dark mode is easy nowadays with the corresponding CSS media selector. I propose a new color theme, "auto light/dark", and making this the default for non-logged-in users. This change would only affect users who are not logged in, and only those who have selected dark mode in their OS/browser - all other visistors will see no difference; logged in Monks could select the new theme in their display settings if they prefer. The other great thing is that supporting this and changing the theme doesn't require any server-side detection, JS, or even page reloads.

The theme's CSS would consist of:

/* Paste contents of https://perlmonks.org/?node_id=204962
   (default Blue Web-Safe theme CSS) here */
@media only screen and (prefers-color-scheme: dark) {
    /* Paste contents of https://perlmonks.org/?node_id=227261
       (Dark theme CSS) here */
}

[download]

The only other place that I currently see where a similar adjustment would be needed is the embedded stylesheet in RAT. Perhaps someone with more knowledge knows if there are other nodes with embedded CSS where a similar change would need to be applied as well.

AFAICT, the above should also be backwards compatible down to CSS2 (1998) in that browsers that are too old should simply ignore the dark theme.

If there's anything I can do to support this please let me know.

In reply to Dark Mode for AM? by haukex

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.