Add support for dark mode #28
Conversation
|
For now the colorscheme is selected via the Here are some screenshots: Dark mode
Light mode on this PR (for reference, it shouldn't be different from prod)
Light mode in prod
|
How about one of these places? |
|
do you want a "light/dark" or a "light/dark/auto" selector? edit: I went with the first one, with light as default |
This comment was marked as outdated.
This comment was marked as outdated.
|
Would you prefer if I carried over the color palette from the docs' template and used that instead? More generally, do you think it would make sense to develop a basic "css library" of colors, fonts and sizes that are already in use to aid in keeping things consistent? I'm thinking of having a base css file to be used for things such as packages website, the tour, docs, website, etc |
We've decided on discord to go with that |
This comment was marked as outdated.
This comment was marked as outdated.
priv/static/common.css
Outdated
| --col-magenta-800: #584355; | ||
| --col-magenta-300: #ffaff3; | ||
| --col-cyan-200: #a6f0fc; | ||
| --col-green-200: #c8ffa7; | ||
| --col-yellow-300: #ffd596; | ||
| --col-orange-400: #ff9d35; | ||
| --col-red-400: #ff6262; |
There was a problem hiding this comment.
What happened to the colour names? What do these numbers mean?
There was a problem hiding this comment.
This file comes from this branding PR gleam-lang/branding#12
The original color names weren't well received*, so instead I chose to do something similar to what tailwind does where the name specifies the general hue and intensity.
You can think of the numbers as of font weights, the larger numbers mean bolder font -> darker color.
Generally these names are considered "private" to the common.css file and the "semantic" names that appear later in the file should be used
*Hayleigh pointed out they don't explain well enough what the color looks like, and you didn't like how some names referenced countries/cultures
There was a problem hiding this comment.
The original color names weren't well received
We want to keep the named colours for sure. Any shades of them can use numbered variations of them 👍
Having names makes it clearer what colours they are (as opposed to just "yellow", which is very unclear) and are more fun and memorable.
There was a problem hiding this comment.
updated, is this what you had in mind?
|
The styles got a bit messy after this conflict, I'll clean it up |
The JS code was carried over from my other PR in the language-tour repo (gleam-lang/language-tour#26)
|
New screenshots
|
Closes #16
This PR adds a dark mode based on the current color palette.