Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 14:50:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: Resolve light/dark theme issues across dashboards and settings

Browse Source 
- Add missing setThemePreference() and setAnimationsEnabled() functions
  to settings-manager.js; sync theme/animations dropdowns in _updateUI
- Fix base.html toggleTheme() saving to wrong localStorage key ('theme'
  instead of 'intercept-theme'), causing theme not to persist in ADS-B
  and AIS dashboards; also sync button icon and persist to server
- Add [data-theme="light"] CSS variable overrides to adsb_dashboard.css
  and ais_dashboard.css so the dashboards respond to light theme
- Fix GPS sky view canvas (gps.js) to read grid/label colours from CSS
  variables instead of hardcoded dark hex values; add MutationObserver
  to redraw immediately on theme change
- Fix satellite_dashboard.html polar plot functions to read background,
  accent and text colours from CSS variables

Closes #139

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-02-18 13:58:49 +00:00
parent 4df112e712
commit 6c6cd8a280
6 changed files with 163 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
static/js/modes/gps.js
View File

@@ -23,6 +23,16 @@ const GPS = (function() {
function init() {
drawEmptySkyView();
connect();
// Redraw sky view when theme changes
const observer = new MutationObserver(() => {
if (lastSky) {
drawSkyView(lastSky.satellites || []);
} else {
drawEmptySkyView();
}
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
}
function connect() {
@@ -316,13 +326,18 @@ const GPS = (function() {
ctx.clearRect(0, 0, w, h);
const cs = getComputedStyle(document.documentElement);
const bgColor = cs.getPropertyValue('--bg-card').trim() || '#0d1117';
const gridColor = cs.getPropertyValue('--border-color').trim() || '#2a3040';
const dimColor = cs.getPropertyValue('--text-dim').trim() || '#555';
const secondaryColor = cs.getPropertyValue('--text-secondary').trim() || '#888';
// Background
const bgStyle = getComputedStyle(document.documentElement).getPropertyValue('--bg-card').trim();
ctx.fillStyle = bgStyle || '#0d1117';
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, w, h);
// Elevation rings (0, 30, 60, 90)
ctx.strokeStyle = '#2a3040';
ctx.strokeStyle = gridColor;
ctx.lineWidth = 0.5;
[90, 60, 30].forEach(el => {
const gr = r * (1 - el / 90);
@@ -330,7 +345,7 @@ const GPS = (function() {
ctx.arc(cx, cy, gr, 0, Math.PI * 2);
ctx.stroke();
// Label
ctx.fillStyle = '#555';
ctx.fillStyle = dimColor;
ctx.font = '9px Roboto Condensed, monospace';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
@@ -338,14 +353,14 @@ const GPS = (function() {
});
// Horizon circle
ctx.strokeStyle = '#3a4050';
ctx.strokeStyle = gridColor;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2);
ctx.stroke();
// Cardinal directions
ctx.fillStyle = '#888';
ctx.fillStyle = secondaryColor;
ctx.font = 'bold 11px Roboto Condensed, monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
@@ -355,7 +370,7 @@ const GPS = (function() {
ctx.fillText('W', cx - r - 12, cy);
// Crosshairs
ctx.strokeStyle = '#2a3040';
ctx.strokeStyle = gridColor;
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(cx, cy - r);
@@ -365,7 +380,7 @@ const GPS = (function() {
ctx.stroke();
// Zenith dot
ctx.fillStyle = '#333';
ctx.fillStyle = dimColor;
ctx.beginPath();
ctx.arc(cx, cy, 2, 0, Math.PI * 2);
ctx.fill();