aboutsummaryrefslogtreecommitdiff
path: root/site/layouts
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2022-11-28 22:30:26 -0800
committerGitHub <[email protected]>2022-11-28 22:30:26 -0800
commitfc3f4b67d65c575daa661ecf31cf59b4ff3cced5 (patch)
tree531f18fff17df1977c1f67b117c48ab9a5fbec87 /site/layouts
parenta1a9895aac0d65ab3cb64a2a64563a645ddb8a31 (diff)
downloadbootstrap-fc3f4b67d65c575daa661ecf31cf59b4ff3cced5.tar.xz
bootstrap-fc3f4b67d65c575daa661ecf31cf59b4ff3cced5.zip
Add dark mode support (#35857)
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <[email protected]> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <[email protected]> * Apply suggestions from code review Co-authored-by: Julien Déramond <[email protected]> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
Diffstat (limited to 'site/layouts')
-rw-r--r--site/layouts/_default/baseof.html2
-rw-r--r--site/layouts/_default/docs.html4
-rw-r--r--site/layouts/partials/docs-navbar.html47
-rw-r--r--site/layouts/partials/docs-versions.html3
-rw-r--r--site/layouts/partials/footer.html8
-rw-r--r--site/layouts/partials/header.html3
-rw-r--r--site/layouts/partials/home/masthead.html2
-rw-r--r--site/layouts/partials/icons.html10
-rw-r--r--site/layouts/shortcodes/added-in.html2
-rw-r--r--site/layouts/shortcodes/callout-deprecated-dark-variants.html9
-rw-r--r--site/layouts/shortcodes/deprecated-in.html5
-rw-r--r--site/layouts/shortcodes/example.html2
12 files changed, 83 insertions, 14 deletions
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index fdf19b31f..0714faf3a 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
<!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
<head>
{{ partial "header" . }}
</head>
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index d534f2c04..2ad46376f 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -31,8 +31,8 @@
</div>
{{ if (eq .Page.Params.toc true) }}
- <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
- <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+ <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
+ <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 68a086e89..4b942a65e 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
+<header class="navbar navbar-expand-lg bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
{{- if eq .Layout "docs" }}
<div class="bd-navbar-toggle">
@@ -72,11 +72,52 @@
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
- <li class="nav-item py-1 col-12 col-lg-auto">
+ <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
- <hr class="d-lg-none text-white-50">
+ <hr class="d-lg-none my-2 text-white-50">
</li>
+
{{ partial "docs-versions" . }}
+
+ <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+ <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+ <hr class="d-lg-none my-2 text-white-50">
+ </li>
+
+ <li class="nav-item dropdown">
+ <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+ id="bd-theme"
+ type="button"
+ aria-expanded="false"
+ data-bs-toggle="dropdown"
+ data-bs-display="static">
+ <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+ <span class="d-lg-none ms-2">Toggle theme</span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
+ Light
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
+ Dark
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
+ Auto
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ </ul>
+ </li>
</ul>
</div>
</div>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index 9b662e608..2d112d347 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -17,8 +17,9 @@
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li>
- <a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
+ <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x)
+ <svg class="bi"><use xlink:href="#check2"></use></svg>
</a>
</li>
<li>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 336032ab1..eda117479 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,12 +1,12 @@
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
- <div class="container py-4 py-md-5 px-4 px-md-3">
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
+ <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
<div class="row">
<div class="col-lg-3 mb-3">
- <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+ <a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
<span class="fs-5">Bootstrap</span>
</a>
- <ul class="list-unstyled small text-muted">
+ <ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index ceeb8b546..327ed1488 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,3 +1,6 @@
+{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
+<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
+
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index ed43f5cda..830407860 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -6,7 +6,7 @@
<span class="text-muted">CSS variables, responsive offcanvas, new utilities, and more!</span>
</a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3">
- <h1 class="mb-3 fw-semibold">Build fast, responsive sites with&nbsp;Bootstrap</h1>
+ <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
</p>
diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html
index 9841e143a..6adbe6461 100644
--- a/site/layouts/partials/icons.html
+++ b/site/layouts/partials/icons.html
@@ -21,6 +21,9 @@
<symbol id="chevron-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
</symbol>
+ <symbol id="circle-half" viewBox="0 0 16 16">
+ <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+ </symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@@ -50,6 +53,10 @@
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
</symbol>
+ <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+ <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+ <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+ </symbol>
<symbol id="palette2" viewBox="0 0 16 16">
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
@@ -60,6 +67,9 @@
<symbol id="plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
+ <symbol id="sun-fill" viewBox="0 0 16 16">
+ <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+ </symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>
diff --git a/site/layouts/shortcodes/added-in.html b/site/layouts/shortcodes/added-in.html
index ca461c2e6..abd8dc4f3 100644
--- a/site/layouts/shortcodes/added-in.html
+++ b/site/layouts/shortcodes/added-in.html
@@ -2,4 +2,4 @@
{{- $version := .Get 0 -}}
-<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v{{ $version }}</small>
diff --git a/site/layouts/shortcodes/callout-deprecated-dark-variants.html b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
new file mode 100644
index 000000000..e682a7fbe
--- /dev/null
+++ b/site/layouts/shortcodes/callout-deprecated-dark-variants.html
@@ -0,0 +1,9 @@
+{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}}
+
+{{- $component := .Get 0 -}}
+
+<div class="bd-callout bd-callout-warning">
+ <p>
+ <strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding <code>.{{ $component }}-dark</code>, set <code>data-bs-theme="dark"</code> on the root element, a parent wrapper, or the component itself.
+ </p>
+</div>
diff --git a/site/layouts/shortcodes/deprecated-in.html b/site/layouts/shortcodes/deprecated-in.html
new file mode 100644
index 000000000..b353368df
--- /dev/null
+++ b/site/layouts/shortcodes/deprecated-in.html
@@ -0,0 +1,5 @@
+{{- /* Outputs badge to identify the version something was deprecated */ -}}
+
+{{- $version := .Get 0 -}}
+
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index dc0e10566..8a9cdff0c 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -28,7 +28,7 @@
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
- <div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
+ <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-27 04:58:07 +0000