/* Material Theme override for Bootstrap 5.3.8 Generated for: - Light theme: Material "light" scheme from Material Theme Builder export - Dark theme: Material "dark" scheme from Material Theme Builder export To use: 1. Place this CSS after your Bootstrap CSS. 2. Make sure [data-bs-theme=dark] is set on or for dark mode. If you want to support "medium-contrast" or "high-contrast", replace the color values accordingly. */ /* LIGHT THEME (default, :root and [data-bs-theme=light]) */ :root, [data-bs-theme=light] { /* Core Bootstrap theme colors */ --bs-primary: #286A48; --bs-primary-rgb: 40, 106, 72; --bs-secondary: #8B4F25; --bs-secondary-rgb: 139, 79, 37; --bs-success: #266A4A; /* mapped to tertiary */ --bs-success-rgb: 38, 106, 74; --bs-info: #0dcaf0; /* not mapped, fallback to Bootstrap default */ --bs-info-rgb: 13, 202, 240; --bs-warning: #FFB688; /* from secondary palette 80 */ --bs-warning-rgb: 255, 182, 136; --bs-danger: #BA1A1A; /* material error */ --bs-danger-rgb: 186, 26, 26; --bs-light: #F5FAFB; /* material surface */ --bs-light-rgb: 245, 250, 251; --bs-dark: #171D19; /* material onBackground */ --bs-dark-rgb: 23, 29, 25; /* Grays and neutrals */ --bs-gray: #C2C2C2; /* neutralVariant */ --bs-gray-100: #F5FAFB; /* surface */ --bs-gray-200: #DBE4E6; /* surfaceVariant */ --bs-gray-300: #E9EFF0; /* surfaceContainer */ --bs-gray-400: #DEE3E5; /* surfaceContainerHighest */ --bs-gray-500: #BFC8CA; /* outlineVariant */ --bs-gray-600: #6F797A; /* outline */ --bs-gray-700: #3F484A; /* onSurfaceVariant */ --bs-gray-800: #171D1E; /* onSurface */ --bs-gray-900: #171D19; /* onBackground */ /* Bootstrap text emphasis colors */ --bs-primary-text-emphasis: #065232; /* onPrimaryContainer */ --bs-secondary-text-emphasis: #6E380F; /* onSecondaryContainer */ --bs-success-text-emphasis: #025233; /* onTertiaryContainer */ --bs-danger-text-emphasis: #93000A; /* onErrorContainer */ --bs-warning-text-emphasis: #512400; /* secondary 20 */ --bs-info-text-emphasis: #055160; /* fallback */ --bs-light-text-emphasis: #3F484A; /* onSurfaceVariant */ --bs-dark-text-emphasis: #171D1E; /* onSurface */ /* Bootstrap background subtles */ --bs-primary-bg-subtle: #ADF2C6; /* primaryContainer */ --bs-secondary-bg-subtle: #FFDBC7; /* secondaryContainer */ --bs-success-bg-subtle: #ACF2C8; /* tertiaryContainer */ --bs-info-bg-subtle: #cff4fc; /* fallback */ --bs-warning-bg-subtle: #FFEDE4; /* secondary 95 */ --bs-danger-bg-subtle: #FFDAD6; /* errorContainer */ --bs-light-bg-subtle: #F6FBF4; /* background */ --bs-dark-bg-subtle: #DBE4E6; /* surfaceVariant */ /* Bootstrap border subtles */ --bs-primary-border-subtle: #92D5AC; /* inversePrimary */ --bs-secondary-border-subtle: #FFB688; /* warning/secondary 80 */ --bs-success-border-subtle: #90D5AD; /* tertiaryFixedDim */ --bs-info-border-subtle: #9eeaf9; /* fallback */ --bs-warning-border-subtle: #FFEDE4; /* secondary 95 */ --bs-danger-border-subtle: #FFDAD6; /* errorContainer */ --bs-light-border-subtle: #DBE4E6; /* surfaceVariant */ --bs-dark-border-subtle: #6F797A; /* outline */ /* Bootstrap link colors */ --bs-link-color: #286A48; --bs-link-hover-color: #065232; /* Body/Surface */ --bs-body-bg: #F6FBF4; /* background */ --bs-body-color: #171D19; /* onBackground */ --bs-body-bg-rgb: 246, 251, 244; --bs-body-color-rgb: 23, 29, 25; /* Other Bootstrap variables mapped to Material */ --bs-heading-color: #286A48; --bs-code-color: #8B4F25; --bs-border-color: #BFC8CA; /* outlineVariant */ --bs-border-color-translucent: rgba(111, 121, 122, 0.25); /* Focus, form, and highlight */ --bs-focus-ring-color: rgba(40, 106, 72, 0.25); /* primary, 25% opacity */ --bs-form-valid-color: #266A4A; --bs-form-invalid-color: #BA1A1A; --bs-highlight-color: #171D19; --bs-highlight-bg: #FFDBC7; } /* DARK THEME (use [data-bs-theme=dark]) */ [data-bs-theme=dark] { color-scheme: dark; --bs-primary: #92D5AC; --bs-primary-rgb: 146, 213, 172; --bs-secondary: #FFB688; --bs-secondary-rgb: 255, 182, 136; --bs-success: #90D5AD; --bs-success-rgb: 144, 213, 173; --bs-info: #0dcaf0; --bs-info-rgb: 13, 202, 240; --bs-warning: #FFDAD6; --bs-warning-rgb: 255, 218, 214; --bs-danger: #FFB4AB; --bs-danger-rgb: 255, 180, 171; --bs-light: #0E1415; --bs-light-rgb: 14, 20, 21; --bs-dark: #DEE3E5; --bs-dark-rgb: 222, 227, 229; /* Grays and neutrals */ --bs-gray: #BFC8CA; /* outlineVariant */ --bs-gray-100: #171D1E; /* onSurface */ --bs-gray-200: #3F484A; /* surfaceVariant */ --bs-gray-300: #1B2122; /* surfaceContainer */ --bs-gray-400: #252B2C; /* surfaceContainerHigh */ --bs-gray-500: #303637; /* surfaceContainerHighest */ --bs-gray-600: #899294; /* outline */ --bs-gray-700: #BFC8CA; /* outlineVariant */ --bs-gray-800: #DEE3E5; /* onSurface */ --bs-gray-900: #DFE4DD; /* onBackground */ /* Bootstrap text emphasis colors */ --bs-primary-text-emphasis: #003921; /* onPrimary */ --bs-secondary-text-emphasis: #512400; /* onSecondary */ --bs-success-text-emphasis: #003822; /* onTertiary */ --bs-danger-text-emphasis: #690005; /* onError */ --bs-warning-text-emphasis: #FFB688; /* secondary 80 */ --bs-info-text-emphasis: #6edff6; --bs-light-text-emphasis: #DEE3E5; /* onSurface */ --bs-dark-text-emphasis: #0E1415; /* surface */ /* Bootstrap background subtles */ --bs-primary-bg-subtle: #065232; /* primaryContainer */ --bs-secondary-bg-subtle: #6E380F; /* secondaryContainer */ --bs-success-bg-subtle: #025233; /* tertiaryContainer */ --bs-info-bg-subtle: #032830; --bs-warning-bg-subtle: #93000A; /* errorContainer */ --bs-danger-bg-subtle: #FFDAD6; /* errorContainer */ --bs-light-bg-subtle: #171D1E; /* onSurface */ --bs-dark-bg-subtle: #3F484A; /* surfaceVariant */ /* Bootstrap border subtles */ --bs-primary-border-subtle: #ADF2C6; /* primaryFixed */ --bs-secondary-border-subtle: #FFDBC7; /* secondaryFixed */ --bs-success-border-subtle: #ACF2C8; /* tertiaryFixed */ --bs-info-border-subtle: #D4DEE0; --bs-warning-border-subtle: #FFDAD6; /* errorContainer */ --bs-danger-border-subtle: #FFDAD6; /* errorContainer */ --bs-light-border-subtle: #3F484A; /* surfaceVariant */ --bs-dark-border-subtle: #BFC8CA; /* outlineVariant */ /* Bootstrap link colors */ --bs-link-color: #92D5AC; --bs-link-hover-color: #286A48; /* Body/Surface */ --bs-body-bg: #0F1511; /* background */ --bs-body-color: #DFE4DD; /* onBackground */ --bs-body-bg-rgb: 15, 21, 17; --bs-body-color-rgb: 223, 228, 221; /* Other Bootstrap variables mapped to Material */ --bs-heading-color: #92D5AC; --bs-code-color: #FFB688; --bs-border-color: #899294; /* outline */ --bs-border-color-translucent: rgba(146, 213, 172, 0.25); /* Focus, form, and highlight */ --bs-focus-ring-color: rgba(146, 213, 172, 0.25); /* primary, 25% opacity */ --bs-form-valid-color: #90D5AD; --bs-form-invalid-color: #FFB4AB; --bs-highlight-color: #DFE4DD; --bs-highlight-bg: #6E380F; }