Dark mode with one switch
Two modes, one set of names
In Banana I made ten colour variables and gave each a Day and a Night value. Screens use the variable, never the colour, so switching a frame to Night changes everything at once.
Changes
Text #000 → #FFF, background #F8F8F8 → #181818, cards #FFF → #1E1E1E, secondary button #FFF4C2 → #FFAE00.
Stays
The yellow primary button #FFD400 and the stars #FFDF13: the brand and the rewards look the same day and night.
What I learned
- Decide which colours carry the brand and keep them fixed.
- Dark mode is not inverted colours: cards sit slightly lighter than the background to keep depth.
- Spacing (4 to 64) and radius (12, 20, 32) are variables too, so both modes share the same rhythm.
