Design: Themes

[olehkrupko]

Sidenotes:

• Please don't click "Convert to Issue" button on the left
• Does not require working on everything in direct order
• This task might require some restructuring

We need to support themes working on this task in a few steps:

• [ ] Step 1. Bright theme (something similar to current one)
  • [ ] Prepare color scheme we will use. It can be based on current colours, or something else. I recommend looking through react-bootstrap variant system as it's most likely that those ones will be enough for us
  • [ ] Write decisions down and get them discussed/approved
  • [ ] Apply color scheme to the project as it is
  • [ ] ????
• [ ] Step 2. Dark theme (dark colours for night usage)
  • [ ] Suggested colors: black background, dark-grey for things that are not important, white/off-white/light grey/something similar for important stuff and red for accents. Yes, I suggest colour scheme used at http://krupko.space:30001/fU/Linus:index (try clicking a few links there) and to try cross-referencing them against react-bootstrap variants
  • [ ] Write decisions down and get them discussed/approved
  • [ ] ????
• [ ] Step 3. Theme auto-switcher: switch bright and dark themes depending on time of the day
  • [ ] Check if we can properly receive current theme used from Mac and implement receiving it (at least as a test message)
  • [ ] Prepare ability to change themes. No idea how it is done, but suppose it is quite problematic)
    • [ ] See how themes are configured in other projects. I guess themes can be stored as a bunch of JSON files called by functions/hooks?
    • [ ] Save "current" theme somewhere: cookies, session or else. There will be at least four possible states there: auto, auto (use mac theme), bright and dark. Names can be surely discussed
    • [ ] Make sure that new themes can be added later without too much hassle
  • [ ] ????

[olehkrupko]

Use https://react-bootstrap.netlify.app/docs/getting-started/color-modes/ ?

[olehkrupko]

Used react-bootstrap themes via data-bs-theme attribute and allowed everything to work properly without major configurations