:root { color-scheme: light; --easylife-bootstrap-splash-background: var(--el-background-color, #EAFAF5); --easylife-bootstrap-splash-text: var(--bulma-text, hsl(162 40% 18%)); --easylife-bootstrap-splash-accent: var(--bulma-primary, hsl(162 40% 33%)); --easylife-bootstrap-splash-logo-background: transparent; } /* Three-state theming, matching how useTheme resolves it: an explicit data-theme on wins in either direction, and prefers-color-scheme covers the window before useTheme has stamped one. The Teams body classes are kept because useTheme only reflects them into data-theme once it runs. These redefine the variables rather than restating background-color, so nothing downstream has to compete with them at equal specificity. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --easylife-bootstrap-splash-background: var(--el-background-color, hsl(162, calc(40% * 0.3), 10%)); --easylife-bootstrap-splash-text: var(--bulma-text, hsl(0 0% 93%)); } } :root[data-theme='dark'], body.theme--dark { --easylife-bootstrap-splash-background: var(--el-background-color, hsl(162, calc(40% * 0.3), 10%)); --easylife-bootstrap-splash-text: var(--bulma-text, hsl(0 0% 93%)); } :root[data-theme='contrast'], body.theme--contrast { --easylife-bootstrap-splash-background: var(--el-background-color, #202020); --easylife-bootstrap-splash-text: var(--bulma-text, hsl(0 0% 100%)); } html, body { min-height: 100%; } body { margin: 0; background-color: var(--easylife-bootstrap-splash-background); color: var(--easylife-bootstrap-splash-text); font-family: Inter, BlinkMacSystemFont, "Segoe UI", sans-serif; } #root { min-height: 100vh; } .bootstrap-splash { display: flex; min-height: 100vh; align-items: center; justify-content: center; width: 100%; background-color: var(--easylife-bootstrap-splash-background); color: var(--easylife-bootstrap-splash-text); } @supports (height: 100dvh) { .bootstrap-splash { min-height: 100dvh; } } .bootstrap-splash-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; box-sizing: border-box; } .bootstrap-splash__logo-frame { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 0; background-color: var(--easylife-bootstrap-splash-logo-background); } .bootstrap-splash-logo { display: block; width: min(192px, 45vw); height: auto; max-height: min(96px, 12vh); max-width: 100%; object-fit: contain; } .bootstrap-splash-logo--custom { width: min(160px, 45vw); }