|
| 1 | +import { reactive } from "vue"; |
| 2 | + |
| 3 | +// alternatives |
| 4 | +// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"]; |
| 5 | +// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"]; |
| 6 | +// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"]; |
| 7 | +// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF", |
| 8 | +// const COLORS = [ "#0077B6FF", "#00B4D8FF", "#90E0EFFF", "#40A578FF", "#9DDE8BFF", "#F8961EFF", "#F9C74FFF", "#E6FF94FF"]; |
| 9 | + |
| 10 | +const colors = reactive({ |
| 11 | + text: null, |
| 12 | + muted: null, |
| 13 | + border: null, |
| 14 | + self: null, |
| 15 | + grid: null, |
| 16 | + co2PerKWh: null, |
| 17 | + pricePerKWh: null, |
| 18 | + price: "#FF912FFF", |
| 19 | + co2: "#00916EFF", |
| 20 | + background: null, |
| 21 | + selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"], |
| 22 | + palette: [ |
| 23 | + "#03C1EFFF", |
| 24 | + "#FD6158FF", |
| 25 | + "#31AB4AFF", |
| 26 | + "#41517AFF", |
| 27 | + "#FF922EFF", |
| 28 | + "#0F662DFF", |
| 29 | + "#0470D4FF", |
| 30 | + "#FFBD2FFF", |
| 31 | + "#77C93EFF", |
| 32 | + "#4E1D10FF", |
| 33 | + "#0AAFBFFF", |
| 34 | + "#813504FF", |
| 35 | + ], |
| 36 | +}); |
| 37 | + |
| 38 | +function updateCssColors() { |
| 39 | + const style = window.getComputedStyle(document.documentElement); |
| 40 | + colors.text = style.getPropertyValue("--evcc-default-text"); |
| 41 | + colors.muted = style.getPropertyValue("--bs-gray-medium"); |
| 42 | + colors.border = style.getPropertyValue("--bs-border-color-translucent"); |
| 43 | + colors.self = style.getPropertyValue("--evcc-self"); |
| 44 | + colors.grid = style.getPropertyValue("--evcc-grid"); |
| 45 | + colors.background = style.getPropertyValue("--evcc-background"); |
| 46 | + colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium"); |
| 47 | + colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium"); |
| 48 | +} |
| 49 | + |
| 50 | +// update colors on theme change |
| 51 | +window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCssColors); |
| 52 | +updateCssColors(); |
| 53 | + |
| 54 | +export const dimColor = (color) => { |
| 55 | + return color.toLowerCase().replace(/ff$/, "20"); |
| 56 | +}; |
| 57 | + |
| 58 | +export const fullColor = (color) => { |
| 59 | + return color.toLowerCase().replace(/20$/, "ff"); |
| 60 | +}; |
| 61 | + |
| 62 | +export default colors; |
0 commit comments