| 14 | }; |
| 15 | |
| 16 | export const setTheme = (isLightProse?: boolean) => { |
| 17 | /** |
| 18 | * Set the global report theme based on global CSS vars, |
| 19 | * and set text brightness based on `isLightProse` |
| 20 | */ |
| 21 | const lightFontColor = isLightProse |
| 22 | ? "rgb(209, 213, 219)" |
| 23 | : "rgb(107, 114, 128)"; /* gray-300 : gray-500 */ |
| 24 | const darkFontColor = isLightProse |
| 25 | ? "rgb(107, 114, 128)" |
| 26 | : "rgb(55, 65, 81)"; /* gray-500 : gray-700 */ |
| 27 | |
| 28 | const accentColor = getCssVar("--dp-accent-color"); |
| 29 | const root = document.documentElement; |
| 30 | |
| 31 | try { |
| 32 | const color = chroma(accentColor); |
| 33 | root.style.setProperty( |
| 34 | "--dp-accent-secondary-color", |
| 35 | color.alpha(0.14).hex(), |
| 36 | ); |
| 37 | root.style.setProperty( |
| 38 | "--dp-accent-text", |
| 39 | color.get("lab.l") < 70 ? "white" : "black", |
| 40 | ); |
| 41 | root.style.setProperty("--dp-light-gray", lightFontColor); |
| 42 | root.style.setProperty("--dp-dark-gray", darkFontColor); |
| 43 | } catch (e) { |
| 44 | console.error("An error occurred while setting a theme property: ", e); |
| 45 | } |
| 46 | }; |