add temporary color var and delete dark mode styling

This commit is contained in:
LailaWulandarii 2025-12-12 19:06:59 +07:00
parent 4c1e926957
commit 5ffb8c8fb5
1 changed files with 6 additions and 225 deletions

View File

@ -107,16 +107,12 @@ @media screen and (-ms-high-contrast: active),
:root,
[data-bs-theme=light] {
--bs-blue: #435ebe;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-primary: #3B8181;
--bs-brick: #E66351;
--bs-red: #DC464F;
--bs-orange: #FF975A;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
@ -129,7 +125,6 @@ [data-bs-theme=light] {
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #435ebe;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
@ -145,6 +140,8 @@ [data-bs-theme=light] {
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 206, 212, 218;
--bs-dark-rgb: 19, 19, 19;
--bs-primary-text-emphasis: #1b264c;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
@ -225,61 +222,6 @@ [data-bs-theme=light] {
--bs-form-invalid-border-color: #dc3545
}
[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, .75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, .5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #8e9ed8;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #0d1326;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #283872;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #8e9ed8;
--bs-link-hover-color: #a5b1e0;
--bs-link-color-rgb: 142, 158, 216;
--bs-link-hover-color-rgb: 165, 177, 224;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, .15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f
}
*,
*:before,
@ -2433,20 +2375,6 @@ .table-light {
border-color: var(--bs-table-border-color)
}
.table-dark {
--bs-table-color: #000;
--bs-table-bg: #f2f7ff;
--bs-table-border-color: #dadee6;
--bs-table-striped-bg: #e6ebf2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dadee6;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e0e4ec;
--bs-table-hover-color: #000;
color: var(--bs-table-color);
border-color: var(--bs-table-border-color)
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch
@ -2755,10 +2683,6 @@ .form-select-lg {
border-radius: .3rem
}
[data-bs-theme=dark] .form-select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}
.form-check {
display: block;
min-height: 1.5rem;
@ -2915,9 +2839,6 @@ .btn-check:disabled+.btn {
opacity: .65
}
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")
}
.form-range {
width: 100%;
@ -3657,23 +3578,6 @@ .btn-light {
--bs-btn-disabled-border-color: #ced4da
}
.btn-dark {
--bs-btn-color: #fff;
--bs-btn-bg: #131313;
--bs-btn-border-color: #131313;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #363636;
--bs-btn-hover-border-color: #2b2b2b;
--bs-btn-focus-shadow-rgb: 54, 54, 54;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #424242;
--bs-btn-active-border-color: #2b2b2b;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #131313;
--bs-btn-disabled-border-color: #131313
}
.btn-outline-primary {
--bs-btn-color: #435ebe;
--bs-btn-border-color: #435ebe;
@ -3793,23 +3697,6 @@ .btn-outline-light {
--bs-gradient: none
}
.btn-outline-dark {
--bs-btn-color: #131313;
--bs-btn-border-color: #131313;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #131313;
--bs-btn-hover-border-color: #131313;
--bs-btn-focus-shadow-rgb: 19, 19, 19;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #131313;
--bs-btn-active-border-color: #131313;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
--bs-btn-disabled-color: #131313;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #131313;
--bs-gradient: none
}
.btn-link {
--bs-btn-font-weight: 400;
--bs-btn-color: #435ebe;
@ -4235,21 +4122,6 @@ .dropdown-item-text {
color: var(--bs-dropdown-link-color)
}
.dropdown-menu-dark {
--bs-dropdown-color: #dee2e6;
--bs-dropdown-bg: #343a40;
--bs-dropdown-border-color: rgba(0, 0, 0, .15);
--bs-dropdown-box-shadow: ;
--bs-dropdown-link-color: #dee2e6;
--bs-dropdown-link-hover-color: #fff;
--bs-dropdown-divider-bg: rgb(189, 199, 209);
--bs-dropdown-link-hover-bg: rgba(255, 255, 255, .15);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: #435ebe;
--bs-dropdown-link-disabled-color: #adb5bd;
--bs-dropdown-header-color: #adb5bd
}
.btn-group,
.btn-group-vertical {
position: relative;
@ -5000,22 +4872,6 @@ .navbar-expand .offcanvas .offcanvas-body {
overflow-y: visible
}
.navbar-dark,
.navbar[data-bs-theme=dark] {
--bs-navbar-color: rgba(255, 255, 255, .55);
--bs-navbar-hover-color: rgba(255, 255, 255, .75);
--bs-navbar-disabled-color: rgba(255, 255, 255, .25);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
--bs-navbar-toggler-border-color: rgba(255, 255, 255, .1);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
[data-bs-theme=dark] .navbar-toggler-icon {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.card {
--bs-card-spacer-y: 1rem;
--bs-card-spacer-x: 1rem;
@ -5373,11 +5229,6 @@ .accordion-flush .accordion-item .accordion-button.collapsed {
border-radius: 0
}
[data-bs-theme=dark] .accordion-button:after {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238e9ed8'%3e%3cpath 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'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238e9ed8'%3e%3cpath 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'/%3e%3c/svg%3e")
}
.breadcrumb {
--bs-breadcrumb-padding-x: 0;
--bs-breadcrumb-padding-y: 0;
@ -5626,13 +5477,6 @@ .alert-light {
--bs-alert-link-color: var(--bs-light-text-emphasis)
}
.alert-dark {
--bs-alert-color: var(--bs-dark-text-emphasis);
--bs-alert-bg: var(--bs-dark-bg-subtle);
--bs-alert-border-color: var(--bs-dark-border-subtle);
--bs-alert-link-color: var(--bs-dark-text-emphasis)
}
@keyframes progress-bar-stripes {
0% {
background-position-x: 1rem
@ -6076,19 +5920,6 @@ .list-group-item-light {
--bs-list-group-active-border-color: var(--bs-light-text-emphasis)
}
.list-group-item-dark {
--bs-list-group-color: var(--bs-dark-text-emphasis);
--bs-list-group-bg: var(--bs-dark-bg-subtle);
--bs-list-group-border-color: var(--bs-dark-border-subtle);
--bs-list-group-action-hover-color: var(--bs-emphasis-color);
--bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
--bs-list-group-action-active-color: var(--bs-emphasis-color);
--bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
--bs-list-group-active-color: var(--bs-dark-bg-subtle);
--bs-list-group-active-bg: var(--bs-dark-text-emphasis);
--bs-list-group-active-border-color: var(--bs-dark-text-emphasis)
}
.btn-close {
--bs-btn-close-color: #000;
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
@ -6128,10 +5959,6 @@ .btn-close.disabled {
opacity: var(--bs-btn-close-disabled-opacity)
}
.btn-close-white,
[data-bs-theme=dark] .btn-close {
filter: var(--bs-btn-close-white-filter)
}
.toast {
--bs-toast-zindex: 1090;
@ -7039,36 +6866,6 @@ .carousel-caption {
text-align: center
}
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
filter: invert(1) grayscale(100)
}
.carousel-dark .carousel-indicators [data-bs-target] {
background-color: #000
}
.carousel-dark .carousel-caption {
color: #000
}
[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel .carousel-control-next-icon,
[data-bs-theme=dark].carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon {
filter: invert(1) grayscale(100)
}
[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],
[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] {
background-color: #000
}
[data-bs-theme=dark] .carousel .carousel-caption,
[data-bs-theme=dark].carousel .carousel-caption {
color: #000
}
.spinner-grow,
.spinner-border {
display: inline-block;
@ -7813,11 +7610,6 @@ .text-bg-light {
background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important
}
.text-bg-dark {
color: #fff !important;
background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important
}
.link-primary {
color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important
@ -7895,17 +7687,6 @@ .link-light:focus {
text-decoration-color: RGBA(216, 221, 225, var(--bs-link-underline-opacity, 1)) !important
}
.link-dark {
color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important
}
.link-dark:hover,
.link-dark:focus {
color: RGBA(15, 15, 15, var(--bs-link-opacity, 1)) !important;
text-decoration-color: RGBA(15, 15, 15, var(--bs-link-underline-opacity, 1)) !important
}
.link-body-emphasis {
color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important