mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-18 12:39:41 +03:00
Mark Otto
015d729445
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).
36 lines
1.7 KiB
HTML
36 lines
1.7 KiB
HTML
{{- $url := split .Permalink "/" -}}
|
|
{{- $group_slug := index $url (sub (len $url) 3) -}}
|
|
{{- $page_slug := index $url (sub (len $url) 2) -}}
|
|
|
|
<li class="nav-item dropdown">
|
|
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
|
<span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }}
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
|
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center justify-content-between current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
|
|
Latest ({{ .Site.Params.docs_version }}.x)
|
|
<svg class="bi"><use xlink:href="#check2"></use></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $group_slug }}/{{ $page_slug }}/">v5.1.3</a>
|
|
</li>
|
|
<li>
|
|
{{- if eq .Page.Params.added "5.1" }}
|
|
<div class="dropdown-item disabled">v5.0.2</div>
|
|
{{- else }}
|
|
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $group_slug }}/{{ $page_slug }}/">v5.0.2</a>
|
|
{{- end }}
|
|
</li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
|
</ul>
|
|
</li>
|