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

Add hint to reduce screen flickering #38426

Merged
merged 2 commits into from Apr 10, 2023
Merged

Add hint to reduce screen flickering #38426

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fbd432e
Add hint to reduce screen flickering
markdumay Apr 8, 2023
7de4a32
Merge branch 'main' into color-mode-hint
markdumay Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/content/docs/5.3/customize/color-modes.md
View file
Open in desktop
Expand Up @@ -181,7 +181,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu

To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.

Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.

{{< example lang="js" show_preview="false" >}}
{{< js.inline >}}
Expand Down