| 1441 |
ariadna |
1 |
// Dark color mode variables
|
|
|
2 |
//
|
|
|
3 |
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
|
|
4 |
|
|
|
5 |
//
|
|
|
6 |
// Global colors
|
|
|
7 |
//
|
|
|
8 |
|
|
|
9 |
// scss-docs-start sass-dark-mode-vars
|
|
|
10 |
// scss-docs-start theme-text-dark-variables
|
|
|
11 |
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
|
|
|
12 |
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
|
|
|
13 |
$success-text-emphasis-dark: tint-color($success, 40%) !default;
|
|
|
14 |
$info-text-emphasis-dark: tint-color($info, 40%) !default;
|
|
|
15 |
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
|
|
|
16 |
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
|
|
|
17 |
$light-text-emphasis-dark: $gray-100 !default;
|
|
|
18 |
$dark-text-emphasis-dark: $gray-300 !default;
|
|
|
19 |
// scss-docs-end theme-text-dark-variables
|
|
|
20 |
|
|
|
21 |
// scss-docs-start theme-bg-subtle-dark-variables
|
|
|
22 |
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
|
|
|
23 |
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
|
|
|
24 |
$success-bg-subtle-dark: shade-color($success, 80%) !default;
|
|
|
25 |
$info-bg-subtle-dark: shade-color($info, 80%) !default;
|
|
|
26 |
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
|
|
27 |
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
|
|
28 |
$light-bg-subtle-dark: $gray-800 !default;
|
|
|
29 |
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
|
|
|
30 |
// scss-docs-end theme-bg-subtle-dark-variables
|
|
|
31 |
|
|
|
32 |
// scss-docs-start theme-border-subtle-dark-variables
|
|
|
33 |
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
|
|
|
34 |
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
|
|
|
35 |
$success-border-subtle-dark: shade-color($success, 40%) !default;
|
|
|
36 |
$info-border-subtle-dark: shade-color($info, 40%) !default;
|
|
|
37 |
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
|
|
|
38 |
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
|
|
|
39 |
$light-border-subtle-dark: $gray-700 !default;
|
|
|
40 |
$dark-border-subtle-dark: $gray-800 !default;
|
|
|
41 |
// scss-docs-end theme-border-subtle-dark-variables
|
|
|
42 |
|
|
|
43 |
$body-color-dark: $gray-300 !default;
|
|
|
44 |
$body-bg-dark: $gray-900 !default;
|
|
|
45 |
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
|
|
46 |
$body-secondary-bg-dark: $gray-800 !default;
|
|
|
47 |
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
|
|
48 |
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
|
|
|
49 |
$body-emphasis-color-dark: $white !default;
|
|
|
50 |
$border-color-dark: $gray-700 !default;
|
|
|
51 |
$border-color-translucent-dark: rgba($white, .15) !default;
|
|
|
52 |
$headings-color-dark: inherit !default;
|
|
|
53 |
$link-color-dark: tint-color($primary, 40%) !default;
|
|
|
54 |
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
|
|
55 |
$code-color-dark: tint-color($code-color, 40%) !default;
|
|
|
56 |
$mark-color-dark: $body-color-dark !default;
|
|
|
57 |
$mark-bg-dark: $yellow-800 !default;
|
|
|
58 |
|
|
|
59 |
|
|
|
60 |
//
|
|
|
61 |
// Forms
|
|
|
62 |
//
|
|
|
63 |
|
|
|
64 |
$form-select-indicator-color-dark: $body-color-dark !default;
|
|
|
65 |
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
|
|
66 |
|
|
|
67 |
$form-switch-color-dark: rgba($white, .25) !default;
|
|
|
68 |
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
|
|
69 |
|
|
|
70 |
// scss-docs-start form-validation-colors-dark
|
|
|
71 |
$form-valid-color-dark: $green-300 !default;
|
|
|
72 |
$form-valid-border-color-dark: $green-300 !default;
|
|
|
73 |
$form-invalid-color-dark: $red-300 !default;
|
|
|
74 |
$form-invalid-border-color-dark: $red-300 !default;
|
|
|
75 |
// scss-docs-end form-validation-colors-dark
|
|
|
76 |
|
|
|
77 |
|
|
|
78 |
//
|
|
|
79 |
// Accordion
|
|
|
80 |
//
|
|
|
81 |
|
|
|
82 |
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
|
|
|
83 |
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
|
|
|
84 |
|
|
|
85 |
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
|
86 |
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
|
87 |
// scss-docs-end sass-dark-mode-vars
|