ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Migrate to Tweakcn themes and enhance UI consistency

Browse Source 
- Replaced references to AppColorPalettes with TweakcnThemes across various files to standardize theme usage.
- Updated the AppTheme and AppColorTokens to utilize TweakcnThemeDefinition for improved theme management.
- Adjusted UI components in ChatPage, ChatsDrawer, AppCustomizationPage, and ProfilePage to align with the new theme structure, ensuring consistent styling and color application.
- Removed the deprecated color_palettes.dart file to streamline the theme architecture.
This commit is contained in:
cogwheel0
2025-10-18 13:58:15 +05:30
parent 23071bb7b1
commit 60883315a2
14 changed files with 1700 additions and 1437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
lib/features/profile/views/app_customization_page.dart
View File

@@ -6,7 +6,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/services/settings_service.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/theme/color_palettes.dart';
import '../../../shared/theme/tweakcn_themes.dart';
import '../../tools/providers/tools_providers.dart';
import '../../../core/models/tool.dart';
import '../../../shared/widgets/conduit_components.dart';
@@ -38,10 +38,10 @@ class AppCustomizationPage extends ConsumerWidget {
final locale = ref.watch(appLocaleProvider);
final currentLanguageCode = locale?.languageCode ?? 'system';
final languageLabel = _resolveLanguageLabel(context, currentLanguageCode);
final activePalette = ref.watch(appThemePaletteProvider);
final activeTheme = ref.watch(appThemePaletteProvider);
return Scaffold(
backgroundColor: context.conduitTheme.surfaceBackground,
backgroundColor: context.sidebarTheme.background,
appBar: _buildAppBar(context),
body: SafeArea(
child: ListView(
@@ -61,7 +61,7 @@ class AppCustomizationPage extends ConsumerWidget {
currentLanguageCode,
languageLabel,
settings,
activePalette,
activeTheme,
),
const SizedBox(height: Spacing.xl),
_buildQuickPillsSection(context, ref, settings),
@@ -78,7 +78,7 @@ class AppCustomizationPage extends ConsumerWidget {
PreferredSizeWidget _buildAppBar(BuildContext context) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
return AppBar(
backgroundColor: context.conduitTheme.surfaceBackground,
backgroundColor: context.sidebarTheme.background,
surfaceTintColor: Colors.transparent,
elevation: Elevation.none,
toolbarHeight: kToolbarHeight,
@@ -116,7 +116,7 @@ class AppCustomizationPage extends ConsumerWidget {
String currentLanguageCode,
String languageLabel,
AppSettings settings,
AppColorPalette palette,
TweakcnThemeDefinition activeTheme,
) {
final theme = context.conduitTheme;
@@ -126,13 +126,13 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
AppLocalizations.of(context)!.display,
style:
theme.headingSmall?.copyWith(color: theme.textPrimary) ??
TextStyle(color: theme.textPrimary, fontSize: 18),
theme.headingSmall?.copyWith(color: theme.sidebarForeground) ??
TextStyle(color: theme.sidebarForeground, fontSize: 18),
),
const SizedBox(height: Spacing.sm),
_buildThemeSelector(context, ref, themeMode, themeDescription),
const SizedBox(height: Spacing.md),
_buildPaletteSelector(context, ref, palette),
_buildPaletteSelector(context, ref, activeTheme),
const SizedBox(height: Spacing.md),
_CustomizationTile(
leading: _buildIconBadge(
@@ -196,7 +196,7 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
AppLocalizations.of(context)!.darkMode,
style: theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: FontWeight.w600,
),
),
@@ -204,7 +204,7 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
themeDescription,
style: theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(alpha: 0.75),
),
),
],
@@ -260,10 +260,10 @@ class AppCustomizationPage extends ConsumerWidget {
Widget _buildPaletteSelector(
BuildContext context,
WidgetRef ref,
AppColorPalette activePalette,
TweakcnThemeDefinition activeTheme,
) {
final theme = context.conduitTheme;
final palettes = AppColorPalettes.all;
final palettes = TweakcnThemes.all;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -272,17 +272,22 @@ class AppCustomizationPage extends ConsumerWidget {
AppLocalizations.of(context)!.themePalette,
style:
theme.bodyLarge?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: FontWeight.w600,
) ??
TextStyle(color: theme.textPrimary, fontWeight: FontWeight.w600),
TextStyle(
color: theme.sidebarForeground,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.xs),
Text(
AppLocalizations.of(context)!.themePaletteDescription,
style:
theme.bodySmall?.copyWith(color: theme.textSecondary) ??
TextStyle(color: theme.textSecondary),
theme.bodySmall?.copyWith(
color: theme.sidebarForeground.withValues(alpha: 0.75),
) ??
TextStyle(color: theme.sidebarForeground.withValues(alpha: 0.75)),
),
const SizedBox(height: Spacing.sm),
ConduitCard(
@@ -291,8 +296,8 @@ class AppCustomizationPage extends ConsumerWidget {
children: [
for (final palette in palettes)
_PaletteOption(
palette: palette,
activeId: activePalette.id,
themeDefinition: palette,
activeId: activeTheme.id,
onSelect: () => ref
.read(appThemePaletteProvider.notifier)
.setPalette(palette.id),
@@ -378,8 +383,8 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
AppLocalizations.of(context)!.onboardQuickTitle,
style:
theme.headingSmall?.copyWith(color: theme.textPrimary) ??
TextStyle(color: theme.textPrimary, fontSize: 18),
theme.headingSmall?.copyWith(color: theme.sidebarForeground) ??
TextStyle(color: theme.sidebarForeground, fontSize: 18),
),
const SizedBox(height: Spacing.sm),
ConduitCard(
@@ -403,7 +408,7 @@ class AppCustomizationPage extends ConsumerWidget {
child: Text(
AppLocalizations.of(context)!.quickActionsDescription,
style: theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(alpha: 0.75),
),
),
),
@@ -461,8 +466,8 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
l10n.chatSettings,
style:
theme.headingSmall?.copyWith(color: theme.textPrimary) ??
TextStyle(color: theme.textPrimary, fontSize: 18),
theme.headingSmall?.copyWith(color: theme.sidebarForeground) ??
TextStyle(color: theme.sidebarForeground, fontSize: 18),
),
const SizedBox(height: Spacing.sm),
_CustomizationTile(
@@ -500,8 +505,8 @@ class AppCustomizationPage extends ConsumerWidget {
Text(
l10n.ttsSettings,
style:
theme.headingSmall?.copyWith(color: theme.textPrimary) ??
TextStyle(color: theme.textPrimary, fontSize: 18),
theme.headingSmall?.copyWith(color: theme.sidebarForeground) ??
TextStyle(color: theme.sidebarForeground, fontSize: 18),
),
const SizedBox(height: Spacing.sm),
// Voice Selection
@@ -621,20 +626,23 @@ class AppCustomizationPage extends ConsumerWidget {
title,
style:
theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: FontWeight.w500,
) ??
TextStyle(color: theme.textPrimary, fontSize: 14),
TextStyle(color: theme.sidebarForeground, fontSize: 14),
),
),
Text(
label,
style:
theme.bodyMedium?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(alpha: 0.75),
fontWeight: FontWeight.w500,
) ??
TextStyle(color: theme.textSecondary, fontSize: 14),
TextStyle(
color: theme.sidebarForeground.withValues(alpha: 0.75),
fontSize: 14,
),
),
],
),
@@ -718,7 +726,7 @@ class AppCustomizationPage extends ConsumerWidget {
showModalBottomSheet<void>(
context: context,
backgroundColor: theme.surfaceBackground,
backgroundColor: theme.sidebarBackground,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
@@ -741,10 +749,10 @@ class AppCustomizationPage extends ConsumerWidget {
l10n.ttsSelectVoice,
style:
theme.headingSmall?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
) ??
TextStyle(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontSize: 18,
fontWeight: FontWeight.bold,
),
@@ -765,18 +773,18 @@ class AppCustomizationPage extends ConsumerWidget {
ios: CupertinoIcons.speaker_3,
android: Icons.record_voice_over,
),
color: theme.textPrimary,
color: theme.sidebarForeground,
),
title: Text(
l10n.ttsSystemDefault,
style:
theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: settings.ttsVoice == null
? FontWeight.bold
: FontWeight.normal,
) ??
TextStyle(color: theme.textPrimary),
TextStyle(color: theme.sidebarForeground),
),
trailing: settings.ttsVoice == null
? Icon(Icons.check, color: theme.buttonPrimary)
@@ -809,11 +817,15 @@ class AppCustomizationPage extends ConsumerWidget {
),
style:
theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
fontWeight: FontWeight.bold,
) ??
TextStyle(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
fontSize: 12,
fontWeight: FontWeight.bold,
),
@@ -831,11 +843,15 @@ class AppCustomizationPage extends ConsumerWidget {
l10n.ttsOtherVoices,
style:
theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
fontWeight: FontWeight.bold,
) ??
TextStyle(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
fontSize: 12,
fontWeight: FontWeight.bold,
),
@@ -866,28 +882,32 @@ class AppCustomizationPage extends ConsumerWidget {
ios: CupertinoIcons.person_fill,
android: Icons.person,
),
color: theme.textPrimary,
color: theme.sidebarForeground,
),
title: Text(
displayName,
style:
theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: isSelected
? FontWeight.bold
: FontWeight.normal,
) ??
TextStyle(color: theme.textPrimary),
TextStyle(color: theme.sidebarForeground),
),
subtitle: subtitle.isNotEmpty
? Text(
subtitle,
style:
theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
) ??
TextStyle(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
fontSize: 12,
),
)
@@ -1162,7 +1182,7 @@ class AppCustomizationPage extends ConsumerWidget {
isScrollControlled: true,
builder: (context) => Container(
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground,
color: context.sidebarTheme.background,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.modal),
),
@@ -1230,26 +1250,20 @@ class AppCustomizationPage extends ConsumerWidget {
class _PaletteOption extends StatelessWidget {
const _PaletteOption({
required this.palette,
required this.themeDefinition,
required this.activeId,
required this.onSelect,
});
final AppColorPalette palette;
final TweakcnThemeDefinition themeDefinition;
final String activeId;
final VoidCallback onSelect;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme;
final isSelected = palette.id == activeId;
final previewColors =
palette.preview ??
<Color>[
palette.light.primary,
palette.light.secondary,
palette.dark.primary,
];
final isSelected = themeDefinition.id == activeId;
final previewColors = themeDefinition.preview;
return InkWell(
onTap: onSelect,
@@ -1274,9 +1288,9 @@ class _PaletteOption extends StatelessWidget {
children: [
Expanded(
child: Text(
palette.label,
themeDefinition.label,
style: theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w500,
@@ -1297,10 +1311,18 @@ class _PaletteOption extends StatelessWidget {
),
const SizedBox(height: Spacing.xxs),
Text(
palette.description,
themeDefinition.description,
style:
theme.bodySmall?.copyWith(color: theme.textSecondary) ??
TextStyle(color: theme.textSecondary),
theme.bodySmall?.copyWith(
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
) ??
TextStyle(
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
),
),
const SizedBox(height: Spacing.xs),
Row(
@@ -1378,14 +1400,16 @@ class _CustomizationTile extends StatelessWidget {
Text(
title,
style: theme.bodyMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.xs),
Text(
subtitle,
style: theme.bodySmall?.copyWith(color: theme.textSecondary),
style: theme.bodySmall?.copyWith(
color: theme.sidebarForeground.withValues(alpha: 0.75),
),
),
],
),

63
lib/features/profile/views/profile_page.dart
View File

@@ -79,7 +79,7 @@ class ProfilePage extends ConsumerWidget {
Scaffold _buildScaffold(BuildContext context, {required Widget body}) {
return Scaffold(
backgroundColor: context.conduitTheme.surfaceBackground,
backgroundColor: context.sidebarTheme.background,
appBar: _buildAppBar(context),
body: body,
);
@@ -88,7 +88,7 @@ class ProfilePage extends ConsumerWidget {
PreferredSizeWidget _buildAppBar(BuildContext context) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
return AppBar(
backgroundColor: context.conduitTheme.surfaceBackground,
backgroundColor: context.sidebarTheme.background,
surfaceTintColor: Colors.transparent,
elevation: Elevation.none,
toolbarHeight: kToolbarHeight,
@@ -156,8 +156,10 @@ class ProfilePage extends ConsumerWidget {
Widget _buildSupportSection(BuildContext context) {
final theme = context.conduitTheme;
final textTheme =
theme.bodySmall?.copyWith(color: theme.textSecondary) ??
TextStyle(color: theme.textSecondary);
theme.bodySmall?.copyWith(
color: theme.sidebarForeground.withValues(alpha: 0.75),
) ??
TextStyle(color: theme.sidebarForeground.withValues(alpha: 0.75));
final supportTiles = [
_buildSupportOption(
@@ -189,7 +191,7 @@ class ProfilePage extends ConsumerWidget {
children: [
Text(
AppLocalizations.of(context)!.supportConduit,
style: theme.headingSmall?.copyWith(color: theme.textPrimary),
style: theme.headingSmall?.copyWith(color: theme.sidebarForeground),
),
const SizedBox(height: Spacing.xs),
Text(
@@ -216,7 +218,6 @@ class ProfilePage extends ConsumerWidget {
final theme = context.conduitTheme;
return _ProfileSettingTile(
onTap: () => _openExternalLink(context, url),
isDestructive: false,
leading: _buildIconBadge(context, icon, color: color),
title: title,
subtitle: subtitle,
@@ -287,15 +288,14 @@ class ProfilePage extends ConsumerWidget {
final email = extractEmail(user) ?? 'No email';
final theme = context.conduitTheme;
final accent = theme.buttonPrimary;
return Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.08),
color: theme.sidebarAccent.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.large),
border: Border.all(
color: accent.withValues(alpha: 0.15),
color: theme.sidebarBorder.withValues(alpha: 0.6),
width: BorderWidth.thin,
),
),
@@ -314,7 +314,7 @@ class ProfilePage extends ConsumerWidget {
Text(
displayName,
style: theme.headingMedium?.copyWith(
color: theme.textPrimary,
color: theme.sidebarForeground,
fontWeight: FontWeight.w600,
),
),
@@ -327,14 +327,18 @@ class ProfilePage extends ConsumerWidget {
android: Icons.mail_outline,
),
size: IconSize.small,
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
),
const SizedBox(width: Spacing.xs),
Flexible(
child: Text(
email,
style: theme.bodySmall?.copyWith(
color: theme.textSecondary,
color: theme.sidebarForeground.withValues(
alpha: 0.75,
),
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
@@ -377,7 +381,6 @@ class ProfilePage extends ConsumerWidget {
title: AppLocalizations.of(context)!.signOut,
subtitle: AppLocalizations.of(context)!.endYourSession,
onTap: () => _signOut(context, ref),
isDestructive: true,
showChevron: false,
),
];
@@ -399,14 +402,12 @@ class ProfilePage extends ConsumerWidget {
required String title,
required String subtitle,
required VoidCallback onTap,
bool isDestructive = false,
bool showChevron = true,
}) {
final theme = context.conduitTheme;
final color = isDestructive ? theme.error : theme.buttonPrimary;
final color = theme.buttonPrimary;
return _ProfileSettingTile(
onTap: onTap,
isDestructive: isDestructive,
leading: _buildIconBadge(context, icon, color: color),
title: title,
subtitle: subtitle,
@@ -456,7 +457,7 @@ class ProfilePage extends ConsumerWidget {
width: 40,
height: 40,
decoration: BoxDecoration(
color: theme.surfaceBackground.withValues(alpha: 0.85),
color: theme.sidebarAccent.withValues(alpha: 0.8),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: theme.cardBorder,
@@ -518,11 +519,10 @@ class ProfilePage extends ConsumerWidget {
ios: CupertinoIcons.exclamationmark_triangle,
android: Icons.error_outline,
),
color: context.conduitTheme.error,
color: Colors.red,
),
title: AppLocalizations.of(context)!.defaultModel,
subtitle: AppLocalizations.of(context)!.failedToLoadModels,
isDestructive: true,
showChevron: false,
onTap: () => ref.invalidate(modelsProvider),
trailing: IconButton(
@@ -533,7 +533,7 @@ class ProfilePage extends ConsumerWidget {
ios: CupertinoIcons.refresh,
android: Icons.refresh,
),
color: context.conduitTheme.error,
color: Colors.red,
size: IconSize.small,
),
),
@@ -589,11 +589,11 @@ class ProfilePage extends ConsumerWidget {
context: context,
builder: (ctx) {
return AlertDialog(
backgroundColor: ctx.conduitTheme.surfaceBackground,
backgroundColor: ctx.sidebarTheme.background,
title: Text(
AppLocalizations.of(ctx)!.aboutConduit,
style: ctx.conduitTheme.headingSmall?.copyWith(
color: ctx.conduitTheme.textPrimary,
color: ctx.sidebarTheme.foreground,
),
),
content: Column(
@@ -605,7 +605,7 @@ class ProfilePage extends ConsumerWidget {
ctx,
)!.versionLabel(info.version, info.buildNumber),
style: ctx.conduitTheme.bodyMedium?.copyWith(
color: ctx.conduitTheme.textSecondary,
color: ctx.sidebarTheme.foreground.withValues(alpha: 0.75),
),
),
const SizedBox(height: Spacing.md),
@@ -704,7 +704,6 @@ class _ProfileSettingTile extends StatelessWidget {
required this.subtitle,
this.onTap,
this.trailing,
this.isDestructive = false,
this.showChevron = true,
});
@@ -713,16 +712,13 @@ class _ProfileSettingTile extends StatelessWidget {
final String subtitle;
final VoidCallback? onTap;
final Widget? trailing;
final bool isDestructive;
final bool showChevron;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme;
final textColor = isDestructive ? theme.error : theme.textPrimary;
final subtitleColor = isDestructive
? theme.error.withValues(alpha: 0.85)
: theme.textSecondary;
final textColor = theme.sidebarForeground;
final subtitleColor = theme.sidebarForeground.withValues(alpha: 0.75);
return ConduitCard(
padding: const EdgeInsets.all(Spacing.md),
@@ -888,7 +884,7 @@ class _DefaultModelBottomSheetState
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground,
color: context.sidebarTheme.background,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.bottomSheet),
),
@@ -1010,8 +1006,9 @@ class _DefaultModelBottomSheetState
vertical: 2,
),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground
.withValues(alpha: 0.6),
color: context.sidebarTheme.background.withValues(
alpha: 0.6,
),
borderRadius: BorderRadius.circular(
AppBorderRadius.xs,
),
@@ -1141,7 +1138,7 @@ class _DefaultModelBottomSheetState
decoration: BoxDecoration(
color: isSelected
? context.conduitTheme.buttonPrimary.withValues(alpha: 0.1)
: context.conduitTheme.surfaceBackground.withValues(alpha: 0.05),
: context.sidebarTheme.background.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: isSelected