Skip to content

Commit

Permalink
Dark mode: Dropdowns
Browse files Browse the repository at this point in the history
  • Loading branch information
@hannahiss @julien-deramond
hannahiss authored and julien-deramond committed Oct 10, 2023
1 parent 7b380d5 commit 7ca68cf
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 5 deletions.
10 changes: 5 additions & 5 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1563,17 +1563,17 @@ $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;

$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
$dropdown-link-hover-bg: var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`

$dropdown-link-active-color: color-contrast($component-active-color) !default; // Boosted mod: instead of `$component-active-color`
$dropdown-link-active-bg: $component-active-color !default; // Boosted mod: instead of `$component-active-bg`
$dropdown-link-active-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
$dropdown-link-active-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`

$dropdown-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`
$dropdown-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`

$dropdown-item-padding-y: $spacer * .5 !default; // Boosted mod: instead of `$spacer * .25`
$dropdown-item-padding-x: $spacer * .5 !default; // Boosted mod: instead of `$spacer`

$dropdown-header-color: $black !default; // Boosted mod: instead of `$gray-600`
$dropdown-header-color: var(--#{$prefix}body-color) !default; // Boosted mod: instead of `$gray-600`
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $spacer !default; // Boosted mod: instead of `$dropdown-padding-y`
// fusv-disable
Expand Down
195 changes: 195 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ sitemap_exclude: true
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-tertiary-bg</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-border-color-translucent</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="light"></div>
Expand Down Expand Up @@ -571,6 +576,196 @@ sitemap_exclude: true
<div class="btn-group"><button class="btn btn-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
</div>

### Dropdowns

<h4 class="mt-3">No theme</h4>

<div class="border border-tertiary p-3">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #282d55">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
Dropdown button
</button>
<ul class="dropdown-menu" data-bs-theme="dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary" data-bs-theme="dark">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" data-bs-theme="dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
Dropdown button
</button>
<ul class="dropdown-menu" data-bs-theme="light">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary" data-bs-theme="light">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" data-bs-theme="light">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>

<div class="border border-tertiary p-3 bg-dark">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary btn-inverse dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary btn-inverse">Action</button>
<button type="button" class="btn btn-secondary btn-inverse dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>


### Local navigation

Expand Down

0 comments on commit 7ca68cf

Please sign in to comment.