Skip to content

feat(frontend): implement dynamic light/dark/system theme switching, accent colors, and reactive settings #204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Joyy-dev wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(frontend): implement dynamic light/dark/system theme switching, accent colors, and reactive settings #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
883a3c1
implement dynamic light/dark/system theme switching
Joyy-dev Sep 19, 2026
ca876cc
refactor: update theme colors and text styles across dashboard compon…
Joyy-dev Sep 19, 2026
0377bcd
refactor: replace HudTheme with Theme.of(context) for consistent them…
Joyy-dev Sep 22, 2026
5ddfdbb
Enhanced theme resolution logic in hud_theme.dart to support dynamic …
Joyy-dev Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions frontend/gs_analyzer_ui/lib/core/theme/hud_colors.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';

class HudColors {
// --------- HUD DARK THEME COLOR ------------------
static const Color darkBgBase = Color(0xFF161616);
static const Color darkBgPanel = Color(0xFF1E1E1E);
static const darkPrimaryBorder = Colors.cyan;

// Text Colors
static const Color darkTextMain = Colors.white;
static const Color darkTextMuted = Colors.white70;
static const Color darkTextDim = Colors.white54;

// --------- HUD LIGHT THEME COLOR -----------------
static const lightBgBase = Color(0xFFF4F7F8);
static const lightBgPanel = Color(0xFFF0F6FF);
static const lightPrimaryBorder = Colors.cyan;

// Text Colors
static const lightTextMain = Colors.black;
static const lightTextMuted = Colors.black87;
static const lightTextDim = Colors.black54;

// --------- ACCENT COLORS ----------------

static const Color lightAccentCyan = Colors.cyan;
static const Color darkAccentCyan = Colors.cyanAccent;

static const Color lightAccentGreen = Colors.green;
static const Color darkAccentGreen = Colors.greenAccent;

static const Color lightAccentRed = Colors.red;
static const Color darkAccentRed = Colors.redAccent;

static const Color lightAccentAmber = Colors.amber;
static const Color darkAccentAmber = Colors.amberAccent;

static const Color lightAccentPurple = Colors.purple;
static const Color darkAccentPurple = Colors.purpleAccent;

static const Color lightAccentBlue = Colors.blue;
static const Color darkAccentBlue = Colors.blueAccent;


static Color resolveAccent(String? accentKey, Brightness brightness) {
final isdark = brightness == Brightness.dark;

switch (accentKey?.toLowerCase()) {
case 'cyan':
return isdark ? darkAccentCyan : lightAccentCyan;
case 'green':
return isdark ? darkAccentGreen : lightAccentGreen;
case 'amber':
return isdark ? darkAccentAmber : lightAccentAmber;
case 'red':
return isdark ? darkAccentRed : lightAccentRed;
case 'purple':
return isdark ? darkAccentPurple : lightAccentPurple;
case 'blue':
return isdark ? darkAccentBlue : lightAccentBlue;
default:
return isdark ? darkAccentCyan : lightAccentCyan;
}
}

static Color fileTypeColor(String category) {
switch (category.toLowerCase()) {
case 'media':
return const Color(0xFF00FFFF);
case 'documents':
return const Color(0xFF4CAF50);
case 'executables':
return const Color(0xFFFF5252);
case 'archives':
return const Color(0xFFFFB300);
case 'code':
return const Color(0xFF9C27B0);
case 'system':
return Colors.white38;
default:
return Colors.white12;
}
}

}
107 changes: 107 additions & 0 deletions frontend/gs_analyzer_ui/lib/core/theme/hud_text_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import 'package:flutter/material.dart';
import 'package:gs_analyzer_ui/core/theme/hud_colors.dart';

class HudTextTheme {

static const String fontCore = 'Courier';

static const light = TextTheme(
headlineMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.lightPrimaryBorder,
fontWeight: FontWeight.bold,
letterSpacing: 2,
fontSize: 18
),

headlineSmall: TextStyle(
fontFamily: fontCore,
fontWeight: FontWeight.w600
),

bodyLarge: TextStyle(
fontFamily: fontCore,
color: HudColors.lightAccentGreen,
fontSize: 14,
fontWeight: FontWeight.bold
),

bodyMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.lightAccentCyan,
fontSize: 13,
fontWeight: FontWeight.bold
),

bodySmall: TextStyle(
fontFamily: fontCore,
color: HudColors.lightAccentGreen,
fontSize: 12,
letterSpacing: 1
),

displayMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.lightAccentRed,
fontSize: 14,
fontWeight: FontWeight.bold,
letterSpacing: 1.5
),

titleMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.lightTextMuted,
fontSize: 13
),
);

static const dark = TextTheme(
headlineMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.darkPrimaryBorder,
fontWeight: FontWeight.bold,
letterSpacing: 2,
fontSize: 18
),

headlineSmall: TextStyle(
fontFamily: fontCore,
fontWeight: FontWeight.w600
),

bodyLarge: TextStyle(
fontFamily: fontCore,
color: HudColors.darkAccentGreen,
fontSize: 14,
fontWeight: FontWeight.bold
),

bodyMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.darkAccentCyan,
fontSize: 13,
fontWeight: FontWeight.bold
),

bodySmall: TextStyle(
fontFamily: fontCore,
color: HudColors.darkTextDim,
fontSize: 12,
letterSpacing: 1
),

displayMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.darkAccentRed,
fontSize: 14,
fontWeight: FontWeight.bold,
letterSpacing: 1.5
),

titleMedium: TextStyle(
fontFamily: fontCore,
color: HudColors.darkTextMuted,
fontSize: 13
),
);
}
85 changes: 85 additions & 0 deletions frontend/gs_analyzer_ui/lib/core/theme/hud_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import 'package:gs_analyzer_ui/core/theme/hud_colors.dart';
import 'package:gs_analyzer_ui/core/theme/hud_text_theme.dart';

class HudTheme {
static ThemeData lightTheme(Color accentColor) {
return ThemeData(
brightness: Brightness.light,

scaffoldBackgroundColor: HudColors.lightBgBase,

textTheme: HudTextTheme.light,

colorScheme: ColorScheme.light(
primary: accentColor,
surface: HudColors.lightBgPanel,
onSurface: HudColors.lightTextMain,
outline: HudColors.lightPrimaryBorder,
error: HudColors.lightAccentRed,
onPrimary: HudColors.lightAccentCyan,
secondary: HudColors.lightAccentGreen,
tertiary: HudColors.lightAccentAmber,
onSecondary: HudColors.lightAccentPurple,
onTertiary: HudColors.lightAccentBlue,
surfaceDim: HudColors.lightTextDim
),

cardTheme: CardThemeData(
color: HudColors.lightBgPanel
),

dividerTheme: DividerThemeData(
color: Colors.black12
)
);
}

static ThemeData darkTheme(Color accentColor) {
return ThemeData(
brightness: Brightness.dark,

scaffoldBackgroundColor: HudColors.darkBgBase,

textTheme: HudTextTheme.dark,

colorScheme: ColorScheme.dark(
primary: accentColor,
surface: HudColors.darkBgPanel,
onSurface: HudColors.darkTextMain,
outline: HudColors.darkPrimaryBorder,
error: HudColors.darkAccentRed,
onPrimary: HudColors.darkAccentCyan,
secondary: HudColors.darkAccentGreen,
tertiary: HudColors.darkAccentAmber,
onSecondary: HudColors.darkAccentPurple,
onTertiary: HudColors.darkAccentBlue,
surfaceDim: HudColors.darkTextDim
),

cardTheme: CardThemeData(
color: HudColors.darkBgPanel
),

dividerTheme: DividerThemeData(
color: Colors.white10
)
);
}

static ThemeMode resolveThemeMode(String? theme) {
switch (theme?.toLowerCase()) {
case 'cyber_light':
case 'light':
return ThemeMode.light;

case 'cyber_dark':
case 'dark':
return ThemeMode.dark;

case 'system':
default:
return ThemeMode.system;
}
}
}
0 ...d/gs_analyzer_ui/lib/utils/hud_theme.dart → ...nalyzer_ui/lib/core/theme/hudd_theme.dart
View file
Open in desktop
File renamed without changes.
11 changes: 8 additions & 3 deletions frontend/gs_analyzer_ui/lib/features/dashboard/screens/dashboard_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import 'package:gs_analyzer_ui/features/dashboard/widgets/custom_button.dart';
import 'package:gs_analyzer_ui/features/dashboard/widgets/net_rate.dart';
import 'package:gs_analyzer_ui/features/dashboard/widgets/thermal_sensor.dart';
import 'package:gs_analyzer_ui/providers/hud_density_provider.dart';
import 'package:gs_analyzer_ui/utils/hud_theme.dart';

class DashboardScreen extends ConsumerStatefulWidget {
const DashboardScreen({super.key});
Expand All @@ -21,6 +20,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
@override
Widget build(BuildContext context) {
final d = ref.watch(hudDensityProvider);
final theme = Theme.of(context);

return LayoutBuilder(
builder: (context, constraints) {
Expand Down Expand Up @@ -50,11 +50,16 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
children: [
Text(
'System_Overview'.toUpperCase(),
style:HudTheme.headerCyan
style:TextStyle(
fontSize: 19,
color: theme.colorScheme.primary,
fontWeight: FontWeight.bold,
letterSpacing: 2
)
),
Text(
'Real-Time Telemetry Stream'.toUpperCase(),
style: HudTheme.labelMuted,
style: theme.textTheme.titleMedium,
)
],
),
Expand Down
19 changes: 10 additions & 9 deletions frontend/gs_analyzer_ui/lib/features/dashboard/widgets/active_process.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import 'package:gs_analyzer_ui/features/dashboard/widgets/process_table.dart';
import 'package:gs_analyzer_ui/features/dashboard/widgets/status.dart';
import 'package:gs_analyzer_ui/providers/hud_density_provider.dart';
import 'package:gs_analyzer_ui/providers/process_explorer_provider.dart';
import 'package:gs_analyzer_ui/utils/hud_theme.dart';
import 'package:gs_analyzer_ui/widgets/custom_container.dart';

class ActiveProcess extends ConsumerStatefulWidget {
Expand All @@ -22,9 +21,10 @@ class _ActiveProcessState extends ConsumerState<ActiveProcess> {
final processes = ref.watch(filteredProcessesProvider).take(4).toList();
final d = ref.watch(hudDensityProvider);
final selectedPid = ref.watch(selectedProcessPidProvider);
final theme = Theme.of(context);

return CustomContainer(
color: HudTheme.bgPanel,
color: theme.cardColor,
padding: EdgeInsets.all(20),
child: Column(
children: [
Expand All @@ -34,7 +34,7 @@ class _ActiveProcessState extends ConsumerState<ActiveProcess> {
Expanded(
child: Text(
'ACTIVE PROCESS TREE',
style: HudTheme.labelMuted,
style: Theme.of(context).textTheme.headlineSmall,
overflow: TextOverflow.ellipsis,
),
),
Expand All @@ -49,7 +49,7 @@ class _ActiveProcessState extends ConsumerState<ActiveProcess> {
final isCpuHot = group.totalCpuPercent > 10.0;
final isMemHot = group.totalPercentMem > 10.0;
final isHot = isCpuHot || isMemHot;
final textColor = isHot ? HudTheme.accentAmber : HudTheme.textMain;
final textColor = isHot ? theme.colorScheme.tertiary : theme.colorScheme.onSurface;

return SizedBox(
height: d.rowHeight + 16,
Expand All @@ -59,32 +59,33 @@ class _ActiveProcessState extends ConsumerState<ActiveProcess> {
Expanded(
child: Text(
group.primaryPid.toString(),
style: HudTheme.bodyText,
style: theme.textTheme.bodySmall,
),
),
Expanded(
child: Text(
displayName,
overflow: TextOverflow.ellipsis,
style: HudTheme.bodyText.copyWith(color: isSelected ? HudTheme.accentCyan : textColor),
style: theme.textTheme.bodyMedium?.copyWith(color: isSelected ? theme.colorScheme.onPrimary : textColor),
),
),
Expanded(
child: Text(
group.primaryUser,
style: HudTheme.bodyText,
style: Theme.of(context).textTheme.bodySmall,
// style: HudTheme.bodyText,
),
),
Expanded(
child: Text(
'${group.totalCpuPercent.toStringAsFixed(1)}%',
style: HudTheme.statGreen.copyWith(color: isCpuHot ? HudTheme.accentAmber : HudTheme.accentCyan),
style: theme.textTheme.bodySmall?.copyWith(color: isCpuHot ? theme.colorScheme.tertiary : theme.colorScheme.onPrimary),
),
),
Expanded(
child: Text(
'${group.totalPercentMem.toStringAsFixed(1)}%',
style: HudTheme.statGreen.copyWith(color: textColor),
style: Theme.of(context).textTheme.bodySmall?.copyWith(color: textColor),
),
),
Expanded(
Expand Down
Loading
Loading