html[data-bs-theme="light"] {
color-scheme: light;
--cl-black: #f2f5f3;
--cl-carbon: #e8eeea;
--cl-ink: #fff;
--cl-surface: #fff;
--cl-surface-2: #edf2ef;
--cl-green: #087849;
--cl-magenta: #a8185b;
--cl-orange: #98500b;
--cl-white: #17231c;
--cl-text: #1d2b23;
--cl-muted: #526259;
--cl-rule: rgb(24 55 39 / 0.22);
--cl-edge-soft: rgb(24 55 39 / 0.22);
--cl-edge-bright: rgb(8 120 73 / 0.5);
--cl-edge-quiet: rgb(24 55 39 / 0.14);
--cl-danger: #a8185b;
--cl-warning: #98500b;
--cl-shadow: 0 12px 30px rgb(29 43 35 / 0.09),
0 1px 2px rgb(29 43 35 / 0.08);
--cl-mode-canvas: #f2f5f3;
--cl-mode-panel: #fffdf8;
--cl-mode-panel-raised: #fff;
--cl-mode-panel-muted: #edf2ef;
--cl-mode-accent-wash: rgb(8 120 73 / 0.075);
--cl-mode-critical-wash: rgb(168 24 91 / 0.065);
--bs-body-bg: var(--cl-mode-canvas);
--bs-body-color: var(--cl-text);
--bs-border-color: var(--cl-rule);
--bs-secondary-color: var(--cl-muted);
}
html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
background-color: var(--cl-mode-canvas) !important;
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] body {
background-image: radial-gradient(
circle at 8% 0%,
rgb(8 120 73 / 0.07),
transparent 30rem
),
radial-gradient(
circle at 100% 22%,
rgb(168 24 91 / 0.045),
transparent 28rem
),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cpath d='M36 0H72L90 31L72 62H36L18 31ZM0 0L18 31L0 62M108 0L90 31L108 62' fill='none' stroke='%23183727' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E") !important;
}
html[data-bs-theme="light"] body::before {
background: repeating-linear-gradient(
to bottom,
rgb(8 120 73 / 0.025) 0,
rgb(8 120 73 / 0.025) 1px,
transparent 1px,
transparent 4px
);
}
html[data-bs-theme="light"] h1,
html[data-bs-theme="light"] h2,
html[data-bs-theme="light"] h3,
html[data-bs-theme="light"] h4,
html[data-bs-theme="light"] h5,
html[data-bs-theme="light"] h6,
html[data-bs-theme="light"] label,
html[data-bs-theme="light"] legend,
html[data-bs-theme="light"] .challenge-name,
html[data-bs-theme="light"] .challenge-desc {
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .navbar.cl-site-nav {
--cl-white: #f7faf8;
--cl-muted: #c4d0c8;
--cl-green: #35ff95;
--cl-edge-soft: rgb(255 255 255 / 0.2);
background: #07110c !important;
border-bottom-color: rgb(53 255 149 / 0.24) !important;
}
html[data-bs-theme="light"] .cl-site-nav__menu,
html[data-bs-theme="light"] .cl-site-nav .dropdown-menu,
html[data-bs-theme="light"] .cl-site-nav .navbar-collapse {
background: #08130d !important;
border-color: rgb(255 255 255 / 0.2) !important;
}
html[data-bs-theme="light"] .cl-site-nav .dropdown-item,
html[data-bs-theme="light"] .cl-site-nav__menu-link,
html[data-bs-theme="light"] .cl-site-nav__menu-link strong,
html[data-bs-theme="light"] .cl-site-nav__utility .nav-link {
color: #f7faf8 !important;
}
html[data-bs-theme="light"] .cl-site-nav__menu-link span {
color: #c4d0c8 !important;
}
html[data-bs-theme="light"] .jumbotron,
html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .list-group-item,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .popover,
html[data-bs-theme="light"] .dropdown-menu:not(.cl-site-nav .dropdown-menu),
html[data-bs-theme="light"] .cl-home__step,
html[data-bs-theme="light"] .cl-resource-feature,
html[data-bs-theme="light"] .cl-scoreboard-perspectives,
html[data-bs-theme="light"] .cl-scoreboard-panel,
html[data-bs-theme="light"] .cl-module-flow,
html[data-bs-theme="light"] .cl-cp,
html[data-bs-theme="light"] .cl-challenge-view-controls,
html[data-bs-theme="light"] .cl-learning-split__toolbar,
html[data-bs-theme="light"] .cl-learning-split__guide,
html[data-bs-theme="light"] .cl-learning-split > .cl-challenge-board--split,
html[data-bs-theme="light"] .cl-challenge-split__placeholder,
html[data-bs-theme="light"] .cl-catalog-day,
html[data-bs-theme="light"] .cl-catalog-module,
html[data-bs-theme="light"] .cl-notepad-panel,
html[data-bs-theme="light"] .cl-tools-menu,
html[data-bs-theme="light"] .cl-workbench--focused .cl-workbench__policy {
background: var(--cl-mode-panel) !important;
border-color: var(--cl-rule) !important;
box-shadow: none !important;
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .modal-header,
html[data-bs-theme="light"] .modal-footer,
html[data-bs-theme="light"] .card-header,
html[data-bs-theme="light"] .card-footer,
html[data-bs-theme="light"] .cl-learning-split__guide-header,
html[data-bs-theme="light"] .cl-book__cover,
html[data-bs-theme="light"] .cl-book__method li,
html[data-bs-theme="light"] .cl-book__card,
html[data-bs-theme="light"] .cl-chapter__rail,
html[data-bs-theme="light"] .cl-chapter__steps li,
html[data-bs-theme="light"] .cl-chapter__flow li,
html[data-bs-theme="light"] .cl-chapter__definition-grid > div,
html[data-bs-theme="light"] .cl-chapter__role-grid > section,
html[data-bs-theme="light"] .cl-day-template__notice,
html[data-bs-theme="light"] .cl-day-template__programs li,
html[data-bs-theme="light"] .cl-day-template__module,
html[data-bs-theme="light"] .cl-day-template__flow li,
html[data-bs-theme="light"] .cl-day-template__guardrail,
html[data-bs-theme="light"] .cl-reference__head,
html[data-bs-theme="light"] .cl-reference__note,
html[data-bs-theme="light"] .cl-notepad-timeline__item {
background: var(--cl-mode-panel-muted) !important;
border-color: var(--cl-rule) !important;
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] input,
html[data-bs-theme="light"] select,
html[data-bs-theme="light"] textarea,
html[data-bs-theme="light"] .cl-challenge-catalog-search__input,
html[data-bs-theme="light"] .cl-workbench__search,
html[data-bs-theme="light"] .cl-notepad-panel textarea,
html[data-bs-theme="light"] .cl-notepad-panel input,
html[data-bs-theme="light"] .cl-notepad-panel select {
background-color: var(--cl-mode-panel-raised) !important;
border-color: var(--cl-rule) !important;
box-shadow: none !important;
color: var(--cl-text) !important;
-webkit-text-fill-color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .table {
--bs-table-bg: transparent;
--bs-table-color: var(--cl-text);
--bs-table-border-color: var(--cl-rule);
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .cl-catalog-day__header,
html[data-bs-theme="light"] .cl-learning-split__toolbar,
html[data-bs-theme="light"] .cl-chapter__masthead,
html[data-bs-theme="light"] .cl-day-template__cover {
background: linear-gradient(
90deg,
var(--cl-mode-accent-wash),
transparent
) !important;
border-color: var(--cl-rule) !important;
}
html[data-bs-theme="light"] .cl-chapter__question,
html[data-bs-theme="light"] .cl-day-template__question,
html[data-bs-theme="light"] .clq-question-ui {
background: var(--cl-mode-accent-wash) !important;
border-color: var(--cl-rule) !important;
}
html[data-bs-theme="light"] .cl-chapter__notice,
html[data-bs-theme="light"] blockquote {
background: var(--cl-mode-critical-wash) !important;
border-color: var(--cl-rule) !important;
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .cl-catalog-module__panel .challenge-button:hover,
html[data-bs-theme="light"] .cl-catalog-module__panel .challenge-button:focus-visible,
html[data-bs-theme="light"] .cl-resource-link:hover,
html[data-bs-theme="light"] .cl-resource-link:focus-visible,
html[data-bs-theme="light"] .cl-workbench--focused .cl-workbench__tool:focus-visible {
background: var(--cl-mode-accent-wash) !important;
}
html[data-bs-theme="light"] .cl-cp__track,
html[data-bs-theme="light"] .cl-cm__track,
html[data-bs-theme="light"] .progress,
html[data-bs-theme="light"] pre,
html[data-bs-theme="light"] code,
html[data-bs-theme="light"] .cl-challenge-view-switch__track {
background: var(--cl-mode-panel-muted) !important;
border-color: var(--cl-rule) !important;
color: var(--cl-text) !important;
}
html[data-bs-theme="light"] .cl-utility-launchers .cl-tools-launcher,
html[data-bs-theme="light"] .cl-utility-launchers .cl-notepad-launcher {
background: #07110c !important;
border-color: rgb(255 255 255 / 0.28) !important;
color: #f7faf8 !important;
}
html[data-bs-theme="light"] .modal-content .btn-close,
html[data-bs-theme="light"] #challenge-window .btn-close {
filter: none !important;
}
.theme-switch.cl-color-mode-toggle {
align-items: center;
display: inline-flex;
gap: 0.32rem;
justify-content: center;
min-width: 7.05rem;
white-space: nowrap;
}
.cl-color-mode-toggle__label {
color: #87938c;
font: 700 0.56rem/1 var(--cl-font-mono, "Roboto Mono", monospace);
letter-spacing: 0.025em;
text-transform: uppercase;
}
.cl-color-mode-toggle__track {
background: #252b27;
border: 1px solid #68736d;
border-radius: 999px;
box-sizing: border-box;
display: inline-flex;
flex: 0 0 1.82rem;
height: 1rem;
padding: 0.12rem;
}
.cl-color-mode-toggle__thumb {
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
display: block;
height: 0.64rem;
transform: translateX(0);
width: 0.64rem;
}
.theme-switch.cl-color-mode-toggle[aria-checked="true"] .cl-color-mode-toggle__track {
background: rgb(53 255 149 / 0.2);
border-color: #35ff95;
}
.theme-switch.cl-color-mode-toggle[aria-checked="true"] .cl-color-mode-toggle__thumb {
background: #35ff95;
transform: translateX(0.78rem);
}
.theme-switch.cl-color-mode-toggle[aria-checked="false"] .cl-color-mode-toggle__label--light,
.theme-switch.cl-color-mode-toggle[aria-checked="true"] .cl-color-mode-toggle__label--dark {
color: #35ff95;
}
.cl-color-mode-toggle__stock-icon {
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.theme-switch.cl-color-mode-toggle:focus-visible {
border-color: #35ff95 !important;
outline: 2px solid #35ff95 !important;
outline-offset: 2px !important;
}
@media (max-width: 84.99rem) and (min-width: 62rem) {
.theme-switch.cl-color-mode-toggle {
min-width: 6.55rem !important;
padding-inline: 0.22rem !important;
}
.cl-color-mode-toggle__label {
font-size: 0.52rem;
}
}
@media (max-width: 61.99rem) {
.cl-site-nav__utility .theme-switch.cl-color-mode-toggle {
justify-content: flex-start;
min-width: 0;
width: 100%;
}
}
@media (pointer: coarse) {
.theme-switch.cl-color-mode-toggle {
min-height: 2.75rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.cl-color-mode-toggle__track,
.cl-color-mode-toggle__thumb,
.cl-color-mode-toggle__label {
transition: background-color 160ms ease, border-color 160ms ease,
color 160ms ease, transform 160ms ease;
}
}
@media (forced-colors: active) {
.cl-color-mode-toggle__track,
.cl-color-mode-toggle__thumb {
forced-color-adjust: none;
}
.cl-color-mode-toggle__track {
background: Canvas;
border-color: ButtonText;
}
.cl-color-mode-toggle__thumb {
background: ButtonText;
}
.theme-switch.cl-color-mode-toggle:focus-visible {
outline-color: Highlight !important;
}
}
@media print {
.theme-switch.cl-color-mode-toggle {
display: none !important;
}
}