/* ========================================================================== Dark mode (affects dark mode only; light mode is untouched) The djibe Material theme implements dark mode natively: it applies `filter: invert(1) hue-rotate(180deg)` to when data-theme="dark", then re-inverts img / video / .prevent-dark-theme so media looks normal. 1) Soften it. Plain invert turns white into pure #000 (a harsh black) and makes the inverted hues very saturated ("citric"). We override the root filter to add: - contrast(0.83): lifts the pure black to a soft ~#161616 and softens harsh white text to a light grey; - saturate(0.8): tones the strong colours down. invert(1) hue-rotate(180deg) is kept as-is so the theme's media re-invert still cancels cleanly. Tune the two numbers to taste: lower contrast() = softer black, lower saturate() = duller colours. 2) Fix saturated brand hues (red, orange, purple). hue-rotate(180deg) desaturates exactly these hues, so danger goes faded pink, warning goes brown and the primary purple looks washed out. We re-invert those elements (same trick as .prevent-dark-theme) to cancel the hue rotation, then set real vivid colours. Colours set on a re-inverted element display ~as-authored (the double invert cancels), picking up only the same mild softening as the rest of the theme, so all three now sit at the same intensity. To recolour: edit the hexes in the rules below. 3) Re-invert iframes (YouTube embeds in the homepage modals, reCAPTCHA), which the theme re-inverts neither as img nor video. ========================================================================== */ /* --- 1) soften the whole dark theme ------------------------------------- */ html[data-theme="dark"] { -webkit-filter: invert(1) hue-rotate(180deg) saturate(0.8) contrast(0.83); filter: invert(1) hue-rotate(180deg) saturate(0.8) contrast(0.83); } /* --- 2) red (danger) & orange (warning) --------------------------------- */ /* Opt these elements out of the hue rotation so we control their colour. */ html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .btn-outline-danger, html[data-theme="dark"] .badge-danger, html[data-theme="dark"] .badge-warning, html[data-theme="dark"] .text-danger, html[data-theme="dark"] .text-warning, html[data-theme="dark"] .material-icons.red { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } /* Danger = #ef5350, Warning = #ffa726. Alerts get a dark tinted bg so the light coloured text stays readable. */ html[data-theme="dark"] .alert-danger { background-color: #2d1517; color: #ef5350; } html[data-theme="dark"] .alert-warning { background-color: #2e1f0c; color: #ffa726; } html[data-theme="dark"] .btn-danger { background-color: #ef5350; color: #2a0a0b; } html[data-theme="dark"] .btn-danger:hover, html[data-theme="dark"] .btn-danger:focus { background-color: #e53935; color: #2a0a0b; } html[data-theme="dark"] .btn-outline-danger { color: #ef5350; border-color: #ef5350; } html[data-theme="dark"] .btn-outline-danger:hover, html[data-theme="dark"] .btn-outline-danger:focus { background-color: #ef5350; color: #2a0a0b; } html[data-theme="dark"] .badge-danger { background-color: #ef5350; color: #2a0a0b; } html[data-theme="dark"] .badge-warning { background-color: #ffa726; color: #2a1500; } html[data-theme="dark"] .text-danger { color: #ef5350 !important; } html[data-theme="dark"] .text-warning { color: #ffa726 !important; } html[data-theme="dark"] .material-icons.red { color: #ef5350; } /* Primary purple = #7c4dff (fills, with white text) / #b388ff (text & accents on the dark background). Same re-invert treatment so it matches the red and orange in intensity instead of looking washed out. */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-outline-primary, html[data-theme="dark"] .badge-primary, html[data-theme="dark"] .bg-primary, html[data-theme="dark"] .text-primary, html[data-theme="dark"] .btn-flat-primary { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .badge-primary { background-color: #7c4dff; color: #fff; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus { background-color: #6c3fff; color: #fff; } html[data-theme="dark"] .text-primary { color: #b388ff !important; } html[data-theme="dark"] .btn-flat-primary { color: #b388ff; } html[data-theme="dark"] .btn-outline-primary { color: #b388ff; border-color: #b388ff; } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-primary:focus { background-color: #7c4dff; color: #fff; } html[data-theme="dark"] .bg-primary { border-bottom-color: #b388ff; } /* --- 3) re-invert iframes the theme misses ------------------------------ */ html[data-theme="dark"] iframe { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); }