diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-11-13 07:40:27 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-13 07:40:27 +0300 |
| commit | 554e8b6c21589784f726a95728ba12f2dd712a8e (patch) | |
| tree | f6ef60326a209d7c3ba319a7ed5b34c66a43e55d | |
| parent | 46fcd27587c4fd734bd2c0aa81cc880ea23e5d84 (diff) | |
Include JS snippet in color modes page
| -rw-r--r-- | site/assets/js/color-modes/index.js | 8 | ||||
| -rw-r--r-- | site/content/docs/5.2/customize/color-modes.md | 12 |
2 files changed, 13 insertions, 7 deletions
diff --git a/site/assets/js/color-modes/index.js b/site/assets/js/color-modes/index.js index 189d3f492b..51bfd40a71 100644 --- a/site/assets/js/color-modes/index.js +++ b/site/assets/js/color-modes/index.js @@ -1,13 +1,7 @@ -// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT -// IT'S ALL JUST JUNK FOR OUR DOCS! -// ++++++++++++++++++++++++++++++++++++++++++ - /*! - * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. - * For details, see https://creativecommons.org/licenses/by/3.0/. */ (() => { diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md index c9d74e5590..356042fd05 100644 --- a/site/content/docs/5.2/customize/color-modes.md +++ b/site/content/docs/5.2/customize/color-modes.md @@ -206,3 +206,15 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu ... </div> ``` + +## JavaScript + +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. + +{{< example lang="js" show_preview="false" >}} +{{< js.inline >}} +{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}} +{{< /js.inline >}} +{{< /example >}} |