Richard Feldman (Nov 07 2022 at 17:38): Richard Feldman (Nov 07 2022 at 17:38):I've been working on converting the tutorial (currently just markdown on GitHub) into a web page - here's a deploy preview
some notes about it:
love to hear feedback about it!
Anton (Nov 07 2022 at 17:46):I love the bold font choice for titles and subtitles :)
Kevin Gillette (Nov 09 2022 at 13:54):For dark mode, I wonder if there are alternate colors besides purple and bright blue that'll work well, as I believe blue and purple can cause eye fatigue/strain (for those of us wanting to learn about Roc in the late hours :joy:). I did notice eye fatigue specifically with the bright purple declarations in the dark mode stdlib docs and am just inferring that it may also have the same effect in the tutorial.
Regarding purple, I believe the issue is just the blue-light component, as most monitors can't render true purple, and can confirm that red light generally has lesser impact on eye fatigue.
Kevin Gillette (Nov 09 2022 at 13:57):051e6ac4-1cab-4fc2-bc2e-076305d27326.png
Kevin Gillette (Nov 09 2022 at 13:57):On mobile chrome, the sidenav causes the first section to be cut off, and the following sections only use about half of the available horizontal space.
Kevin Gillette (Nov 09 2022 at 14:00):^^ is in the default render. In desktop mode it actually looks exactly how I'd hope it'd look in mobile view, ironically enough :)
Anton (Nov 09 2022 at 14:04):I agree that it would probably be best to avoid blue-ish colors for dark mode.
Kevin Gillette (Nov 09 2022 at 14:04):Well in desktop mode (on mobile chrome at least) the text in the separated code blocks is a little small, but they look fine in mobile.
In any case, I do like the formatting :)
Richard Feldman (Nov 09 2022 at 15:02):hm, one idea is to use the green for everything in dark mode
Richard Feldman (Nov 09 2022 at 15:02):seems a little weird given that purple is the color of the logo
Kevin Gillette (Nov 09 2022 at 15:08):At least per https://www.canva.com/colors/color-wheel/, green is complementary to purple. Through there are 3 and 4 color combinations that can be explored through that tool as well
Richard Feldman (Nov 09 2022 at 15:10):right, that's why it's paired with it today - I just mean purple specifically is the logo color, so it would be kind of weird to have the whole site not use purple at all in dark mode :big_smile:
Richard Feldman (Nov 09 2022 at 15:10):maybe it's fine?
Kevin Gillette (Nov 09 2022 at 15:10):https://www.sessions.edu/color-calculator/ seems to have more customizability
Kevin Gillette (Nov 09 2022 at 15:12):fwiw some people might color invert the light mode if the dark mode is harder to read at night ;)
Brian Hicks (Nov 09 2022 at 15:12):color in dark mode can be tough. Some things I've used:
In this case, I'd probably just desaturate+lighten the purple and teal. They'll still be in the same color family.
Georges Boris (Nov 09 2022 at 15:12):I liked the purple on darkmode tbh - maybe is just a matter of using it with caution? (e.g. only logo + top headings)
Kevin Gillette (Nov 09 2022 at 15:12):Maybe the Roc has bioluminescent green plumage that displays after sundown
Brian Hicks (Nov 09 2022 at 15:14):about "it'd be weird to not use purple" actually no it wouldn't. What you'd usually do is create a brand palette that has a number of complementary colors, then reserve the logo colors for top nav, links, etc. Since you have that as a logo color, you don't want to splash it all over the page. It's better as an accent. The complementary colors will do the communication work a lot nicer!
Richard Feldman (Nov 09 2022 at 15:15):anyone want to play around with colors by live-editing the CSS on https://roc-alpha.netlify.app/tutorial/ and post screenshots here?
Kevin Gillette (Nov 09 2022 at 15:16):Agreed with Brian. It may just be the intensity with which the purple "pops" in dark mode. A more muted or reddish purple may do pretty well. Especially this is the case in the stdlib docs, where the function declarations are like little spotlights in the night 🫠
Richard Feldman (Nov 09 2022 at 15:17):yeah I'd like to change the styles on the docs page to match the tutorial, including green links in dark mode
Brian Hicks (Nov 09 2022 at 15:19):I wouldn't be able to mess around with it today but if someone wants to, you can use https://www.hsluv.org/ to get nice color interpolations (including saturation and luminance that actually do what you think they do, instead of getting tricked by HSL!)
Brian Hicks (Nov 09 2022 at 15:21):(actually I lied I'm doing it now because I had a meeting get cancelled)
Anton (Nov 09 2022 at 15:26):Just to share; I like this approach for choosing matching colors
Brian Hicks (Nov 09 2022 at 15:34):ok, so limiting myself to just playing around with colors, here's the original: original
Brian Hicks (Nov 09 2022 at 15:35):here's just desaturating the colors: desaturated and lightened
Brian Hicks (Nov 09 2022 at 15:35):I think that's an improvement already—it's already more readable. I think we can make things a little better still, though, by changing which colors go where
Brian Hicks (Nov 09 2022 at 15:36):so here's what it looks like if we use the primary logo color for the H1, then desaturate+lighten it for H2 and beyond primary plus desaturated and lightened
Brian Hicks (Nov 09 2022 at 15:36):(the primary logo color on this BG passes WCAG AAA for large font, but wouldn't be appropriate for body copy)
Brian Hicks (Nov 09 2022 at 15:37):then two last things, what if the links were triadic or inverted color? (first two images are the two triadic hues, the third is the inverted hue.) I also hit these hard with lightness and contrast.
Brian Hicks (Nov 09 2022 at 15:38):(ok that's all my messages. Sorry to send so many in a row, but seeing 5 images without contextualization was gonna be more confusing.)
Brian Hicks (Nov 09 2022 at 15:39):oh, oops: when I said I only desaturated the colors in the first pass, I actually desaturated and lightened them.)
Brian Hicks (Nov 09 2022 at 15:41):also now that I'm looking at it more, it might be good to still desaturate/lighten the logo primary color in the H1 still. It really sticks out as being "deeper" into the page, which kind of breaks the visual hierarchy. Anyway, those are the experiments.
Brian Hicks (Nov 09 2022 at 15:43):argh oops apparently I'm going to keep just typing until someone stops me… if anyone wants to replicate those colors (ish) you'd add or subtract 120 from the hue in HSLuv to get the triadic colors, or subtract 180 for the inversion.
Anton (Nov 09 2022 at 15:46):Thanks @Brian Hicks :)
Could you perhaps edit the filenames of the screenshots in the message to something like 1.png, 2.png, ... ? That makes it easier to talk about a specific option.
Brian Hicks (Nov 09 2022 at 15:59):done!
Brian Hicks (Nov 09 2022 at 16:01):if we're down to that stage, my opinion is that "triadic 2" is the best of the lot (with maybe some tweaks to the H1 necessary still.) The others evoke the ninja turtles a little too much for me, which is not what we're going for (maybe?)
Anton (Nov 09 2022 at 16:18):note: my default screen settings are red-shifted for comfortable viewing
For triadic 2 the in-text links do not stand out enough for me. With my red-shift off I can barely see a difference in color between text and links.
With red shift off, I find that only in the original image the links stand out nicely.
I think I'd like the purple tutorial title with a somewhat desaturated subtitle. The subtitle saturation is a bit too low for me in the last four images.
Anton (Nov 09 2022 at 16:41):In light mode I'd remove the text shadow for h1 and h2.
Brian Hicks (Nov 09 2022 at 16:47):the typographic goal with headers is to create a visual hierarchy so you can keep track of where you are. I don't think a too-low saturation is a problem in this design, because there's a clear demarcation between H1 and H2 with font and size.
That said, yeah: the links could certainly be more saturated without creating a contrast issue.
Anton (Nov 09 2022 at 16:53):I don't think a too-low saturation is a problem in this design, because there's a clear demarcation between H1 and H2 with font and size.
Yeah I agree it's not a problem for clarity, I just personally prefer more saturated colors.
Richard Feldman (Nov 09 2022 at 18:43):so if you (anyone who's interested in this topic!) had to pick one of the above designs, which one would you personally prefer to use for dark mode?
Luke Boswell (Nov 09 2022 at 18:49):Very cool topic, color is super fun to play with. I personally would pick Brians Triadic 1. The one with the green side links.
Richard Feldman (Nov 09 2022 at 19:22):one thing I don't love about that is the contrast between the links and the body text - like comparing the links in the first paragraph under "installation" in that version vs the original, I find the original easier to tell which things are links
Brian Hicks (Nov 09 2022 at 19:39):keep the funky spirit going with text-decoration: 2px wavy underline :wink:
Anton (Nov 09 2022 at 19:43):My preference goes to the original version
Georges Boris (Nov 09 2022 at 22:31):My pref also goes to the original version. I'd twik it of needed but I did not love any of the dissaturated versions.
Last updated: Jun 16 2026 at 16:19 UTC