Theme fix

[DukeManh]

Issue This PR Addresses

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

I wanted to steal how Telescope does dark theme and noticed some changes can be made.
This PR does the following:

• Use system theme by default
• Add theme switch color transition to avoid flash
• Fix <li> cannot appear as a descendant of <li> error

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[humphd]

I think this works well, but a few things I notice:

1. When we toggle the theme, the entire side-bar animates again. I think the transition is applying to too many elements. This isn't new, but I just noticed it:

2. When you are in dark mode, close the window, and re-open, it starts out in light mode and transitions to dark vs. beginning with dark.

[DukeManh]

@humphd I noticed that too but wasn't sure how to fix it, maybe I should file an issue.

The background color starts out white until the page is styled and becomes dark. Maybe we should apply the style in the document level? It's interesting to see pages like MUI or NodeJS also have this problem.

[huyxgit]

@DukeManh don't need to use transition while switching between light/dark (+it's laggy already everytime we switch, adding transitions will make it even worse), I recommend you to remove those transition lines you added. which also causes some weird black/white color fading.

[DukeManh]

@huynguyez details?

[DukeManh]

@huynguyez Interesting, I think adding transition makes it feel less laggy.

[DukeManh]

@humphd, I just updated. Can you test it again.

[huyxgit]

@DukeManh the theme seems it cannot be changed immediately but need to refresh everytime

[DukeManh]

@huynguyez I forgot to stage changes. It should be ok now.

[DukeManh]

It seems to still start out in light mode unfortunately.

[PedroFonsecaDEV]

I would suggest you go a bit slow:

Fixing the <li> cannot appear as a descendant of <li> error seems to be a good start point in this PR. And then investigate the solution for the transitions and so on in follow-ups.

[DukeManh]

@PedroFonsecaDEV I see. I filed #2222 and #2223 to investigate the issues which exist before my PR. And this PR will do 2 things only:

• Use system theme by default, @tonyvugithub did this but for some reason, MUI's useMediaQuery weren't working but React-use's useMedia will.
• Fix <li> cannot appear as a descendant of <li> error

@humphd , @huynguyez

[huyxgit]

@DukeManh the default theme fix is good, but whtat is Fix <li> cannot appear as a descendant of <li> error? You meant nested <li>?

which post/where can I test it? I saw some posts with nested <li> without problem

[DukeManh]

@huynguyez the error doesn't always appear. It's a quick fix so I didn't mind taking screenshots. People have this problem too mui/material-ui#19827

[PedroFonsecaDEV]

LGTM.

[humphd]

@tonyvugithub can you take a quick look at this, since you wrote so much of the theme code?