https://www.vorhersagezentrale.de/theme.js

1// theme.js
2
3function setTheme(theme) {
4    document.documentElement.setAttribute('data-theme', theme);
5    localStorage.setItem('theme', theme);
6    
7    // Update checkbox state
8    const themeCheckbox = document.getElementById('theme-checkbox');
9    if (themeCheckbox) {
10        themeCheckbox.checked = theme === 'dark';
11    }
12    
13    // Update Highcharts theme
14    updateHighchartsTheme(theme);
15
16    // Dispatch custom event for other components (e.g., radar base layer switching)
17    window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } }));
18}
19
20// Function to update Highcharts theme
21function updateHighchartsTheme(theme) {
22    if (typeof Highcharts === 'undefined' || !Highcharts.charts || Highcharts.charts.length === 0) {
23        return;
24    }
25
26    const isDark = theme === 'dark';
27
28    const backgroundColor = isDark ? '#333' : '#ffffff';
29    const textColor = isDark ? '#ffffff' : '#000000';
30    const plotLineColor = isDark ? '#666' : '#888888';
31    const gridLineColor = isDark ? '#555' : '#e6e6e6';
32    const zeroLineColor = isDark ? '#e6e6e6' : '#000000';
33
34    Highcharts.charts.forEach(chart => {
35        if (!chart) return;
36
37        chart.update({
38            chart: {
39                backgroundColor: backgroundColor,

40                plotBackgroundColor: null
41            },
42            xAxis: {
43                labels: {
44                    style: {
45                        color: textColor,
46                        fontSize: '8px',
47                        fontWeight: 'normal',
48                        opacity: 1
49                    },
50                    enabled: true
51                },
52                gridLineColor: gridLineColor,
53                lineColor: gridLineColor,
54                tickColor: gridLineColor
55            },
56            yAxis: [{
57                labels: {
58                    enabled: true,
59                    style: {
60                        color: textColor,
61                        fontSize: '8px',
62                        opacity: 1
63                    }
64                },
65                gridLineColor: gridLineColor,
66                lineColor: gridLineColor,
67                tickColor: gridLineColor,
68                title: {
69                    style: {
70                        color: '#FF0000',
71                        fontSize: '9px'
72                    }
73                }
74            }, {
75                labels: {
76                    enabled: true,
77                    style: {
78                        color: textColor,
79                        fontSize: '8px',
80                        opacity: 1
81                    }
82                },
83                gridLineColor: gridLineColor,
84                lineColor: gridLineColor,
85                tickColor: gridLineColor,
86                title: {
87                    style: {
88                        color: '#4572A7',
89                        fontSize: '9px'
90                    }
91                }
92            }]
93        }, false, true, false);
94
95        const primaryXAxis = chart.xAxis && chart.xAxis[0];
96        if (primaryXAxis && primaryXAxis.plotLinesAndBands) {
97            primaryXAxis.plotLinesAndBands.forEach(pl => {
98                if (pl && pl.svgElem) {
99                    pl.svgElem.attr({ stroke: plotLineColor });
100                }
101                if (pl && pl.label) {
102                    pl.label.css({ color: textColor, opacity: 1 });
103                }
104            });
105        }
106
107        const primaryYAxis = chart.yAxis && chart.yAxis[0];
108        if (primaryYAxis && typeof primaryYAxis.removePlotLine === 'function' && typeof primaryYAxis.addPlotLine === 'function') {
109            primaryYAxis.removePlotLine('zero-line');
110            primaryYAxis.addPlotLine({
111                id: 'zero-line',
112                color: zeroLineColor,
113                width: 1.5,
114                value: 0,
115                zIndex: 1,
116                dashStyle: 'Solid',
117                label: {
118                    text: '0°C',
119                    style: { color: textColor, fontSize: '9px', fontWeight: 'bold', opacity: 1 },
120                    align: 'right',
121                    x: -5
122                }
123            });
124        }
125
126        chart.redraw(false);
127    });
128}
129
130function toggleTheme() {
131    const currentTheme = localStorage.getItem('theme') || 'light';
132    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
133    setTheme(newTheme);
134}
135
136// Initialize theme toggle when DOM is loaded
137document.addEventListener('DOMContentLoaded', function() {
138    const themeCheckbox = document.getElementById('theme-checkbox');
139    if (themeCheckbox) {
140        // Set initial state based on current theme
141        const currentTheme = localStorage.getItem('theme') || 'light';
142        themeCheckbox.checked = currentTheme === 'dark';
143        
144        // Add event listener to checkbox
145        themeCheckbox.addEventListener('change', function() {
146            const newTheme = this.checked ? 'dark' : 'light';
147            setTheme(newTheme);
148        });
149    }
150});