Add dark-mode

[dem4ron]

I might need to go through this list again before merging - 21:47, Apr 28, 2023

Pick a dark variant for these:

#D85050 - Appears eg. in settings reset box
#271B72 - Markdown inline codeblock
#F2F0FC - used on hover - Impact page/Stats box/first element
#ECF2FF - team page/"thousands of people" container background

Notes:

• Modals have another theme-(dark|light) switch

Things out of colour:

General:

Header

• Header's bottom border
• Notification bell
• Donation text colour
• SVGs all over the place

Footer

• bg-color is textColor2 and its dark-theme is a bright colour, looks not pleasant - pick a better dark-theme colour? - same issue at many other places
  Maybe change it to textColor2's value?

Scrollbars

• bg-color

Markdown

• c-textblock-header background
• c-textblock-content background
• ^^ These 2 above need a review and confirmation - seem too dark now ^^
• inline codeblock text - #271B72 - needs a theme-dark color

Dashboard:

• Announcement-bar's bg is also textColor2. Font colours are non-variables
• Community Posts' background is just white - needs to be a variable
• "Where to start" dividers
• "Your tracks" progress bar bg
• 12in23 background?

Tracks

• Top page selector bar's svgs need a filter in darkmode too

Overview

Pretty OK overall

• Showing N tracks' background is off - needs to be a variable
  it is #FFF3E1 - it doesn't have a dark-theme variant
• Track progress bars
• Joined + tick SVG
• --new has an --orange-filter that has a dark-theme and becomes yellow, but the "New" text next to it doesn't have, nor does the background of the container

Syllabus

• layer bg
• concept-map-line-available is too bright

Exercises

Pretty good

• Consider adding a dark-theme style for easy-medium-hard labels

About

• taste of the concepts is an image, has a white fadeout - needs updating or getting rid of the fadeout and adding it programatically

Build

• Everything that is white, needs to be backgroundColorA
• Header's jpg has white background which messes up the look in dark mode. - decide
• Health-status colors need a dark-theme
• Highlight svg is disturbing in darkmode

tracks/[track]

• #page-track-show article has a whiteish background that masks the whole page - needs to be a variable or deleted
• three dots next to contributors - border or shadow is too bright
• stats-box has a white background - needs to be a variable or deleted
• "From the Forum" has a white background - needs to be a variable or deleted
• "We 💙 our contributors" bg
• exercise dots are a bit too bright (c-ed)
• progress bar's background can be reused all over the site

tracks/[track]/exercises/[exercise]

• Track breadcrumbs need dark-theme border colour
• track header's textColor7 needs a filter
• update-bar needs a dark colour background
• tooltip hover's bg needs to be decided - too bright with backgroundColorH

Overview

Pretty good overall

• You've completed [exercise] - green needs a dark theme
• .concept - outline glow is not suited for dark theme

Your iterations

Also pretty good

• Tabs border colour
• iteration view border colour
• Get mentoring background
• All SVGs need to be brighter

Dig deeper

• Introduction container background should be a variable
• Same with approaches snippet
• Same with article snippet
• Same with Community Video container
• Same when there are no videos

Community Solutions

Also pretty good

• solution code snippet's border is off
• black SVGs need dark theme
• Sort by...'s glow is bit too glow-y, but not problematic - decide its fate

Mentoring

Looks really good

• 'It's absolutely free' button's text colour doesn't work with bright yellow bg

Approach - show, Blogpost, Article

The blog post itself is pretty good

• Approach recommendation (bottom containers) background needs to be a variable
• Same with the link to exercise (top right)

Mentoring

Your workspace

Pretty good, don't see anything

Queue

• Handle is not visible on list-element hover - it is textColor2, requires a hover prop?
• SolutionList's bottom border is white needs to be a variable maybe?

Testimonials

Looks good. Like all modals, it has a separate theme-dark switch

Automation

• Introducer background
• Criteria filter, sorter background
• List element on hover - same issue as above

mentoring/automation

• "Solution #n", "How important is this" - text-primaryBtnBorder needs to be replaced with the correct class
• MD editor needs a dark-theme background
• Scratchpad needs a dark-theme background
• Black SVGs

Preview modal

This needs the most work so far - nothing is dark mode but the code block

• Lot of white background - needs proper variables
• Codeblock hover - too bright

Community-page

• Header needs a dark-theme background - the light theme is a linear-gradient
• Community story container bg needs to be a variable
• Same with Help us change lives
• Explore our swag border-b-6's colour is off
• 'Learn from our community' - container bg
• 'Learn from our community' - each video bg
• Contributors' list's border bottom is too bright - currently is borderColor7

Donate

• Stripe form card number's color needs to be updated programatically
• Box elements' (lhs) bg should be variable

Public profile

• RHS labels need styling e.g. 'Exercism staff', 'Maintainer'

Summary

• c-contributions-summary bg should be a variable

Contributions

• introducer bg

Published solutions

• Same as Community solutions
• introducer bg

Badges

• introducer bg

Your journey

Pretty much good as it is
Keep in mind:

• Applying theme-dark to the whole app will change the 'Your Journey' and some other texts that weren't meant to be changed

Settings

Account settings

• "How would you like to be addressed? (optional)" - testimonial, commonly-used bg should be a variable
• Reset account bg
• Delete account bg

Preferences, Communication Preferences

• tick SVG is black - barely visible

Donations

• subscription-box bg

Impact page

• Highlight svg - same as above
• Header has gradient background - similar as above
• Stats container elements
• map
• status report on top of map
• short description background needs to be a variable - currently bg-bgGray
• Contributors' container bg needs to be a variable
• Become rocket fuel background

Our team

• "Thousands of people..." background

Supporters

• header

12in23

• site container bg, all elements bg - needs to be a variable