Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

frontend: enable dark mode #2933

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

frontend: enable dark mode #2933

wants to merge 5 commits into from

Commits on Jun 6, 2024

  1. add storybook's theming addon

    @jecr
    jecr committed Jun 6, 2024
    Configuration menu
    Copy the full SHA
    df4724b View commit details
    Browse the repository at this point in the history

  2. enable auto dark mode

    @jecr
    jecr committed Jun 6, 2024
    Configuration menu
    Copy the full SHA
    afad3a3 View commit details
    Browse the repository at this point in the history

  3. use selected theme for background

    @jecr
    jecr committed Jun 6, 2024
    Configuration menu
    Copy the full SHA
    642ed2c View commit details
    Browse the repository at this point in the history

Commits on Jun 11, 2024

  1. frontend: Adjust current palette for accessibility / look for compone… 

    …nts where the switch between light/dark/else affects readability (#3038)

**Search Icon Button:** in both light and dark mode the background where
this component is used is dark, so there is no need to use the
contrastColor value here:

<img width="678" alt="Screenshot 2024-06-11 at 2 04 36 p m"
src="https://github.com/lyft/clutch/assets/25833665/5b77032d-e555-44ba-b57b-dcb88049c617">

<img width="681" alt="Screenshot 2024-06-11 at 2 04 46 p m"
src="https://github.com/lyft/clutch/assets/25833665/9bac1163-dba2-4486-b092-0a7a80462c91">

**Horizontal Rule:** Opacity was too low:

<img width="679" alt="Screenshot 2024-06-11 at 2 05 05 p m"
src="https://github.com/lyft/clutch/assets/25833665/6a5a9510-ad98-464e-aebe-55583ccb0aa5">

<img width="681" alt="Screenshot 2024-06-11 at 2 05 13 p m"
src="https://github.com/lyft/clutch/assets/25833665/2e44fc32-c2b7-4e18-bfef-4cdf07899a11">

**Stepper:** Inactive options opacity was too low:

<img width="680" alt="Screenshot 2024-06-11 at 2 05 35 p m"
src="https://github.com/lyft/clutch/assets/25833665/e386b359-8702-4ba2-9509-bc0d565fc909">

<img width="678" alt="Screenshot 2024-06-11 at 2 05 44 p m"
src="https://github.com/lyft/clutch/assets/25833665/3ad81fe3-6d72-4acf-8bf3-d2d6c9c20a13">
    @lucechal14
    lucechal14 authored Jun 11, 2024
    Configuration menu
    Copy the full SHA
    226a9de View commit details
    Browse the repository at this point in the history

  2. frontend: Implement a theme switcher input to select from multiple th… 

    …emes (#3039)

Added theme option to user preferences:

<img width="314" alt="Screenshot 2024-06-11 at 4 28 08 p m"
src="https://github.com/lyft/clutch/assets/25833665/71b27cfc-54d7-410f-aa8e-dad609508f82">


<img width="305" alt="Screenshot 2024-06-11 at 4 28 47 p m"
src="https://github.com/lyft/clutch/assets/25833665/c198409f-ee2e-493a-b15b-f096cda8e9e1">
    @lucechal14
    lucechal14 authored Jun 11, 2024
    Configuration menu
    Copy the full SHA
    fcb4270 View commit details
    Browse the repository at this point in the history