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.

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

docs: use dark theme for devices that prefer dark theme #2337

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

aghArdeshir
Copy link
Contributor

@aghArdeshir aghArdeshir commented Aug 20, 2024

What I did

  • created a dark theme

Here is a comparison of how this dark theme looks like compared to original theme on mobile

ing-lion-dark-light-theme-compare-mobile.webm

The same comparison for desktop (FLASHING warning)

ing-lion-dark-light-theme-compare-desktop.webm

Here is a video of this settings respecting the OS theme setting (FLASHING warning)

ing-lion-dark-light-theme-respect-os-settings.webm

Alternatives I tried/though of

  1. Thought of creating a button that allows switching between dark/light/auto themes, persist in local storage, put it in topbar/sidenav, etc... . But picked delivering a dark theme now over perfecting it.
  2. tried moving the dark theme related styles to a separate file and @import url(./dark-theme.css);. But the problem was I had to put the @import at the beginning of the file, and then the dark theme would lose its specifity and gets overriden by white background of body. Chose not to go with !important for this minimal change and keep it simple for now. The benefit of moving to a separate file (later) would be that we can fine-tune all dark-theme-related styles in that file.

This PR fixes #2336

Copy link

changeset-bot bot commented Aug 20, 2024

⚠️ No Changeset found

Latest commit: 31e5e11

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@aghArdeshir aghArdeshir marked this pull request as draft August 20, 2024 21:58
@aghArdeshir
Copy link
Contributor Author

aghArdeshir commented Aug 20, 2024

Spotted a problem, just above the footer the color changes a bit.

image

I'll fix that, and in addition will make the dark theme's background not so black! (no more #000000). Hoping it to look like this:

image

@aghArdeshir
Copy link
Contributor Author

This PR is also blocked by this: #2339

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs] dark theme
1 participant