[data-bs-theme=light] { --bs-body-bg-untinted: #fff; --bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted)); --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); --bs-danger: #dc3545; --bs-danger-bg-subtle: #f8e6e8; --bs-link-color: color-mix(in srgb, var(--bs-primary) 75%, black); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-body-bg)); --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-body-bg)); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-bg)); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), black); --bs-border-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 85%, var(--bs-body-color)); --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); --bs-tertiary-bg: var(--bs-primary-bg-subtle); --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); } [data-bs-theme=dark] { --bs-body-bg-untinted: #202020; --bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted)); /* --bs-body-bg-rgb: 32, 32, 32;*/ --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); --bs-danger-bg-subtle: #2c0b0e; --bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, white); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); --bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-body-bg)); --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-body-bg)); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-bg)); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), white); --bs-border-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 85%, var(--bs-body-color)); --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); --bs-tertiary-bg: var(--bs-primary-bg-subtle); --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); } .btn-check:checked + .btn-secondary, .btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong) !important; --bs-btn-active-color: var(--bs-body-color); background-color: var(--bs-btn-active-bg) !important; } .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-basic-btn-active-bg-strong); } .accordion { --bs-accordion-border-color: var(--bs-border-color); /* --bs-accordion-active-color: ;*/ } .card { --bs-card-border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent); --bs-card-cap-bg: color-mix(in srgb, var(--bs-primary) 5%, transparent); --bs-card-bg: color-mix(in srgb, var(--bs-primary) 2%, transparent); } .dropdown-menu { --bs-dropdown-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg)); --bs-dropdown-border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent); } [data-bs-theme=light] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 90%, black); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, white); } [data-bs-theme=dark] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 55%, black); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, black); } .dropdown-item.active, .dropdown-item:active { background-color: var(--bs-dropdown-active-bg); } [data-bs-theme="light"] .dropdown-item:hover, [data-bs-theme="light"] .dropdown-item:focus { --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, black); }