mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Mark Otto
b85169ef1c
Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself. - Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage. - Color modes can also be set via data attribute thanks to `data-theme` (with light or dark options available currently). - Docs are heavily WIP for demonstrating the dark mode. - In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., `--bs-secondary-bg` and `--bs-tertiary-bg`). In addition, I've added new global CSS variables like `--bs-border-color` and more. So, in addition to general color modes and theming support, we get greater real-time customization, too. Todos and open questions: - [ ] Do we refer to these as themes or color modes? - [ ] Do we provide a color mode toggler JS plugin? - [ ] Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see `$dropdown-*` Sass variable changes in the diff).
142 lines
8.0 KiB
HTML
142 lines
8.0 KiB
HTML
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
|
<nav class="container bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
|
{{- if eq .Layout "docs" }}
|
|
<button class="navbar-toggler p-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
|
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
|
|
<span class="d-none fs-6 pe-1">Browse</span>
|
|
</button>
|
|
{{- else }}
|
|
<div class="d-lg-none" style="width: 2.25rem;"></div>
|
|
{{- end }}
|
|
|
|
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
|
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
|
|
</a>
|
|
|
|
<div class="d-flex d-lg-none order-3">
|
|
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
|
|
<div class="offcanvas-header px-4 pb-0">
|
|
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
|
</div>
|
|
|
|
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
|
<hr class="d-lg-none text-white-50">
|
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="d-lg-none text-white-50">
|
|
|
|
{{ if eq .Layout "docs" }}
|
|
<form class="bd-search" data-shortcut="⌘K">
|
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
|
|
</form>
|
|
|
|
<hr class="d-lg-none text-white-50">
|
|
{{ end }}
|
|
|
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
|
|
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
|
<small class="d-lg-none ms-2">GitHub</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
|
|
{{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
|
<small class="d-lg-none ms-2">Twitter</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
|
|
{{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
|
<small class="d-lg-none ms-2">Slack</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-lg-auto">
|
|
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
|
|
{{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
|
<small class="d-lg-none ms-2">Open Collective</small>
|
|
</a>
|
|
</li>
|
|
<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>
|
|
|
|
{{ 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">
|
|
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
|
<svg class="bi my-1"><use href="#circle-half"></use></svg>
|
|
<span class="d-lg-none ms-2">Toggle theme</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end bd-theme-toggles" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
|
<li>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-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-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 class="current">
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-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>
|
|
|
|
<!-- <hr class="d-md-none text-white-50"> -->
|
|
|
|
<!-- <div class="vr d-none d-lg-flex mx-lg-2 my-lg-1 text-white"></div>
|
|
|
|
<div class="d-flex flex-row-reverse flex-lg-row">
|
|
<label class="bd-theme-toggle align-self-center ms-auto p-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Toggle mode">
|
|
<input type="checkbox" class="bd-theme-toggle-checkbox" id="checkbox">
|
|
<div class="visually-hidden">Toggle mode</div>
|
|
<svg class="bd-theme-toggle-dark bi"><use xlink:href="#moon-stars-fill"></use></svg>
|
|
<svg class="bd-theme-toggle-light bi"><use xlink:href="#sun-fill"></use></svg>
|
|
</label>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|