Fix white screen caused by theme defaulting to 'light'
The app is a dark-mode design but all theme defaults were 'light'. Once the theme setting was wired to data-theme, it applied light mode overrides that turned the app background white while panels stayed dark. - Changed all server-side theme defaults from 'light' to 'dark' - Added data-theme="dark" to index.html so the correct theme applies before React loads (eliminates any white flash on first render) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
a8fca2d1a1
commit
50f4f73af1
3 files changed
+6
-6
No files matched your search
@@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/app-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/app-icon.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.1e7808e0.js"></script><link href="/static/css/main.67d2dbc4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en" data-theme="dark"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/app-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/app-icon.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.1e7808e0.js"></script><link href="/static/css/main.67d2dbc4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="%PUBLIC_URL%/app-icon.png" />
|
||||
|
||||
+4
-4
@@ -135,7 +135,7 @@ function buildSettingsFromDb(dbSettings = {}) {
|
||||
default_sort: dbSettings.default_sort || process.env.DEFAULT_SORT || 'name',
|
||||
items_per_page: parseInt(dbSettings.items_per_page || process.env.ITEMS_PER_PAGE) || 20,
|
||||
refresh_interval: parseInt(dbSettings.refresh_interval || process.env.REFRESH_INTERVAL) || 5000,
|
||||
theme: dbSettings.theme || process.env.THEME || 'light',
|
||||
theme: dbSettings.theme || process.env.THEME || 'dark',
|
||||
incident_failure_threshold: parseInt(dbSettings.incident_failure_threshold || process.env.INCIDENT_FAILURE_THRESHOLD) || 10,
|
||||
webhook_template: dbSettings.webhook_template || process.env.WEBHOOK_TEMPLATE || '',
|
||||
};
|
||||
@@ -747,7 +747,7 @@ ESCALATION_HOURS=${escalation_hours || 4}
|
||||
DEFAULT_SORT=${default_sort || 'name'}
|
||||
ITEMS_PER_PAGE=${items_per_page || 20}
|
||||
REFRESH_INTERVAL=${refresh_interval || 5000}
|
||||
THEME=${theme || 'light'}
|
||||
THEME=${theme || 'dark'}
|
||||
INCIDENT_FAILURE_THRESHOLD=${incident_failure_threshold || 10}
|
||||
WEBHOOK_TEMPLATE=${webhook_template || ''}
|
||||
`;
|
||||
@@ -782,7 +782,7 @@ WEBHOOK_TEMPLATE=${webhook_template || ''}
|
||||
process.env.DEFAULT_SORT = default_sort || 'name';
|
||||
process.env.ITEMS_PER_PAGE = String(items_per_page || 20);
|
||||
process.env.REFRESH_INTERVAL = String(refresh_interval || 5000);
|
||||
process.env.THEME = theme || 'light';
|
||||
process.env.THEME = theme || 'dark';
|
||||
process.env.INCIDENT_FAILURE_THRESHOLD = String(incident_failure_threshold || 10);
|
||||
process.env.WEBHOOK_TEMPLATE = webhook_template || '';
|
||||
|
||||
@@ -814,7 +814,7 @@ WEBHOOK_TEMPLATE=${webhook_template || ''}
|
||||
{ key: 'items_per_page', value: String(items_per_page || 20) },
|
||||
{ key: 'refresh_interval', value: String(refresh_interval || 5000) },
|
||||
{ key: 'auto_cleanup_enabled', value: String(auto_cleanup_enabled || false) },
|
||||
{ key: 'theme', value: theme || 'light' },
|
||||
{ key: 'theme', value: theme || 'dark' },
|
||||
{ key: 'incident_failure_threshold', value: String(incident_failure_threshold || 10) },
|
||||
];
|
||||
|
||||
|
||||
Reference in new issue
Block a user