mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Add dark mode to docs
This commit is contained in:
Mark Otto
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
// Tooltip and popover demos
|
||||
document.querySelectorAll('.tooltip-demo')
|
||||
document.querySelectorAll('.tooltip-demo, .bd-navbar')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip, {
|
||||
selector: '[data-bs-toggle="tooltip"]'
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript 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/.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
const root = document.documentElement
|
||||
const activeTheme = localStorage.getItem('theme')
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active use')
|
||||
|
||||
const checkSystemTheme = function () {
|
||||
// if OS dark mode is set, and there's no stored theme, set the theme to dark (but don't store it)
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches && !activeTheme) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
// otherwise, set the theme to the default (light)
|
||||
document.documentElement.removeAttribute('data-theme')
|
||||
}
|
||||
}
|
||||
|
||||
const setTheme = function (theme) {
|
||||
document.querySelectorAll('[data-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
|
||||
// const btnToActive = document.querySelector('[data-theme-value="' + theme + '"]')
|
||||
const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||
|
||||
btnToActive.classList.add('active')
|
||||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-theme-value')
|
||||
|
||||
setTheme(theme)
|
||||
|
||||
if (theme === 'auto') {
|
||||
root.removeAttribute('data-theme')
|
||||
localStorage.removeItem('theme')
|
||||
checkSystemTheme()
|
||||
} else {
|
||||
root.setAttribute('data-theme', theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (activeTheme) {
|
||||
root.setAttribute('data-theme', activeTheme)
|
||||
setTheme(activeTheme)
|
||||
} else {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
checkSystemTheme()
|
||||
})
|
||||
checkSystemTheme()
|
||||
}
|
||||
})()
|
||||
@@ -14,10 +14,10 @@
|
||||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: $gray-100;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
|
||||
a {
|
||||
color: $gray-800;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -34,5 +34,5 @@
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: $gray-700 !important;
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
.btn-bd-light {
|
||||
--bs-btn-color: var(--bs-gray-600);
|
||||
--bs-btn-border-color: var(--bs-gray-400);
|
||||
--bs-btn-border-color: var(--bs-border-color);
|
||||
--bs-btn-hover-color: var(--bd-violet);
|
||||
--bs-btn-hover-border-color: var(--bd-violet);
|
||||
--bs-btn-active-color: var(--bd-violet);
|
||||
@@ -43,3 +43,7 @@
|
||||
--bs-btn-focus-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
}
|
||||
|
||||
.btn-bd-lg {
|
||||
padding: .8rem 2rem;
|
||||
}
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
display: block;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
background-color: $gray-100;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: 0;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
@@ -42,10 +42,3 @@
|
||||
margin-top: .75rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
.btn-clipboard {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
+ .bd-code-snippet {
|
||||
@include border-top-radius(0);
|
||||
border: solid $border-color;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
|
||||
@@ -129,12 +129,12 @@
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
background-color: rgba(var(--bs-violet-rgb), .1);
|
||||
}
|
||||
|
||||
.bd-example-flex div {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
background-color: rgba(var(--bs-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bs-violet-rgb), .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
@@ -176,8 +176,8 @@
|
||||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
|
||||
> div {
|
||||
@@ -262,7 +262,7 @@
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -284,13 +284,13 @@
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
background-color: var(--bs-body-color);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
@@ -325,7 +325,7 @@
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@@ -348,7 +348,7 @@
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
color: var(--bs-body-color); // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
@@ -373,6 +373,12 @@
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
border: solid $border-color;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
|
||||
.btn-clipboard {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,9 @@
|
||||
// Override Bootstrap defaults
|
||||
> .table,
|
||||
> .table-responsive .table {
|
||||
--bs-table-border-color: var(--bs-border-color);
|
||||
|
||||
max-width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
@include font-size(.875rem);
|
||||
|
||||
@@ -80,6 +83,11 @@
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.table-swatches {
|
||||
td:first-child { width: 340px; }
|
||||
td:nth-child(2) { width: 200px; }
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
@include font-size(3rem);
|
||||
}
|
||||
@@ -89,13 +97,10 @@
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bd-bg-violet {
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -.125em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
@@ -124,3 +129,28 @@
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-color-mode
|
||||
[data-theme="blue"] {
|
||||
--bs-body-color: var(--bs-white);
|
||||
--bs-body-color-rgb: #{to-rgb($white)};
|
||||
--bs-body-bg: var(--bs-blue);
|
||||
--bs-body-bg-rgb: #{to-rgb($blue)};
|
||||
--bs-tertiary-bg: #{$blue-600};
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-active-bg: #{$blue-700};
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
|
||||
--bs-btn-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
|
||||
--bs-btn-hover-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
|
||||
--bs-btn-active-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
// scss-docs-end custom-color-mode
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
|
||||
.bd-footer {
|
||||
a {
|
||||
color: $gray-700;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,13 +11,12 @@
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
@@ -37,8 +36,7 @@
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@@ -48,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
.bd-masthead-followup {
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,13 @@
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
|
||||
[data-theme="dark"] & {
|
||||
backdrop-filter: blur(.25rem);
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .75));
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
@@ -69,17 +75,67 @@
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$variable-prefix}dropdown-min-width: 12rem;
|
||||
--#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
|
||||
--bs-dropdown-min-width: 12rem;
|
||||
--bs-dropdown-padding: .25rem;
|
||||
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
|
||||
@include font-size(.875rem);
|
||||
@include border-radius(.5rem);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
li + li {
|
||||
margin-top: .125rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:active {
|
||||
.bi {
|
||||
color: inherit !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
|
||||
.bi {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-theme-toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-theme-toggle-checkbox {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(100%);
|
||||
white-space: nowrap;
|
||||
|
||||
~ .bd-theme-toggle-light { display: none; }
|
||||
~ .bd-theme-toggle-dark { display: block; }
|
||||
|
||||
&:checked {
|
||||
~ .bd-theme-toggle-light { display: block; }
|
||||
~ .bd-theme-toggle-dark { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.bd-theme-toggle-light {
|
||||
color: var(--bs-warning);
|
||||
}
|
||||
|
||||
.bd-theme-toggle-dark {
|
||||
color: var(--bs-navbar-brand-color);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,13 @@
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.offcanvas-lg {
|
||||
border-right-color: var(--bs-border-color);
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
@@ -35,16 +42,16 @@
|
||||
.bd-links-link {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1rem;
|
||||
color: rgba($black, .65);
|
||||
margin-left: 1.125rem;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: rgba($black, .85);
|
||||
color: var(--bs-heading-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
background-color: var(--bd-sidebar-link-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
:root {
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--base00: #fff;
|
||||
--base01: #f5f5f5;
|
||||
--base02: #c8c8fa;
|
||||
@@ -17,6 +18,25 @@
|
||||
--base0F: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--base00: #282c34;
|
||||
--base01: #353b45;
|
||||
--base02: #3e4451;
|
||||
--base03: #545862;
|
||||
--base04: #565c64;
|
||||
--base05: #abb2bf;
|
||||
--base06: #b6bdca;
|
||||
--base07: #d19a66;
|
||||
--base08: #e06c75;
|
||||
--base09: #d19a66;
|
||||
--base0A: #e5c07b;
|
||||
--base0B: #98c379;
|
||||
--base0C: #56b6c2;
|
||||
--base0D: #61afef;
|
||||
--base0E: #c678dd;
|
||||
--base0F: #be5046;
|
||||
}
|
||||
|
||||
.hl { background-color: var(--base02); }
|
||||
.c { color: var(--base03); }
|
||||
.err { color: var(--base08); }
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
@include border-radius(.4rem);
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -5,7 +5,6 @@ $bd-purple: #4c0bce;
|
||||
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-accent: #ffe484;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
|
||||
|
||||
$bd-gutter-x: 3rem;
|
||||
@@ -19,4 +18,11 @@ $bd-callout-variants: info, warning, danger !default;
|
||||
--bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
--bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
--bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bd-violet: #{mix($bd-violet, $black, 75%)};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user