Dark mode for French Wordle

Last Sunday, I added a dark theme to LeMOT, my French Wordle. Some players seemed to want it and it was a good opportunity for me to see how to do it without too many fuss.

Colors for light mode

To start with, I looked for the colors used in my CSS file and I found about ten of them. But in practice, this corresponds to the following 12 use cases:

• #fff for the general white background
• #333 for the general near-black text
• #888 for slightly lighter text in italics
• #ddd for text watermark
• #ccc light gray for the background of unused keyboard keys
• #fff white to display the letters once played in the boxes
• #ffb000 the famous orange for the background of well placed letters :)
• #648fff the blue for the background of misplaced letters
• #ddd a slightly lighter gray for the background of the letters missing from the word to guess
• #bbb not very light gray for icons
• #dc267f a purple background for the "unknown word" message
• #fff white text for the "unknown word" message

Done!

Colors for dark mode

I then searched what colors to use when in dark mode. It wasn't too difficult, since you just have to look at the original Wordle for inspiration... After a few tries, I came up with these colors:

• #222 for a very black general background
• #333 for a very white general text
• #888 for a less white italic text
• #444 for the watermark text in grey / black
• #888 a "medium" gray for the background of the unused keyboard keys
• #fff white to display the letters once played in the boxes
• #ffb000 the famous orange for the background of well placed letters :)
• #648fff the blue for the background of misplaced letters
• #444 a gray / black for the background of the letters absent from the word to guess
• #888 a "medium" gray for the icons
• #dc267f a purple background for the message "unknown word"
• #fff white text for the "unknown word" message

As I display links in bright blue (#00f), I had to find another one that would look good in both dark and light modes. I took the blue #2962ff from one of my other sites, but I probably have to improve it because I'm not very happy with it...

Dark colors, done!

Setting light or dark theme

Now, either I was finally starting to code a settings screen, or I was cheating by relying on the prefers-color-scheme media directive. This directive detects the user's choice of theme preference (dark or light).

Of course I did the easiest one. But also the most normal one in my opinion: why force people to repeat in my game what they have already set on their phone or browser!

And so now, my CSS file starts with a bunch of CSS variables.

/* Thèmes
   ========================================================================== */

:root {
  --fond-general: #fff;      /* Fond blanc général */
  --texte-normal: #333;      /* Texte quasi noir */
  --texte-clair: #888;       /* Texte plus clair pour notes */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --filigrane: #ddd;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #ccc;       /* Fond gris clair pour touche inutilisée */
  --touche-texte: #333;      /* Texte quasi noir pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #ddd;       /* Gris clair pour les lettres absentes */
  --couleur-icone: #bbb;     /* Gris pas très clair pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}

@media (prefers-color-scheme: dark) { :root {
  --fond-general: #222;      /* Fond très noir général */
  --texte-normal: #eee;      /* Texte très blanc */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --texte-clair: #888;       /* Texte moins blanc pour notes */
  --filigrane: #444;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #888;       /* Fond gris moyen pour touche inutilisée */
  --touche-texte: #fff;      /* Texte blanc pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #444;       /* Gris-noir pour les lettres absentes */
  --couleur-icone: #888;     /* Gris moyen pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}}

A good thing done!

A last one for the road...

I use an antiquity to compress CSS (Microsoft Ajax Minifier) and it didn't hold up against CSS variables :( So for now, I went to the first comer, namely CSSO, via its csso-cli version to do the job.

I wonder if it would be possible to compress the CSS variable names, so that --fond-general is shortened to --a, --texte-normal becomes --b, etc...

This is something I'll definitely have to review some day to make an informed decision about what I'll use from now on...

Conclusion

Anyway, another weekend well spent, since it is finally possible to enjoy LeMOT to its fullest, even if you prefer to use a dark mode!

And to play, it's still there: https://www.solitaire-play.com/lemot/ :)

This post was originally published on blog.pagesd.info.