Refactor theme management: Replace AppColors with AppPalette

- Removed AppColors class and migrated all references to AppPalette.
- Updated VaultAccessScreen, MenuDrawer, NoteCard, SearchAppBar, and other widgets to use AppPalette for color management.
- Introduced AppPalette to handle light and dark themes with appropriate color schemes.
- Adjusted theme application in AppTheme to utilize AppPalette extensions.
- Updated tests to reflect changes in theme structure and color references.
This commit is contained in:
2026-05-23 13:55:40 +02:00
parent 29881183ed
commit 1dede9eb78
16 changed files with 1031 additions and 618 deletions
+76 -64
View File
@@ -15,7 +15,7 @@ import 'package:notas/widgets/note_card.dart';
import 'package:notas/widgets/search_app_bar.dart';
import 'package:notas/widgets/sync_status.dart';
import 'package:notas/widgets/sync_status_indicator.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/theme/app_palette.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({
@@ -489,9 +489,11 @@ class _HomeScreenState extends State<HomeScreen> {
),
);
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return Scaffold(
body: Container(
decoration: const BoxDecoration(gradient: AppColors.backdropGradient),
decoration: BoxDecoration(gradient: palette.backdropGradient),
child: SafeArea(
child: Column(
children: [
@@ -565,7 +567,7 @@ class _HomeScreenState extends State<HomeScreen> {
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _closeMenu,
child: Container(color: AppColors.overlay),
child: Container(color: palette.overlay),
),
),
),
@@ -578,7 +580,7 @@ class _HomeScreenState extends State<HomeScreen> {
bottom: 0,
width: 280,
child: Material(
color: AppColors.cardBackground,
color: palette.cardBackground,
elevation: 8,
child: MenuDrawer(
onMenuItemTapped: _handleMenuItemTapped,
@@ -642,11 +644,13 @@ class _DraggableNote extends StatelessWidget {
final VoidCallback onDraggableCanceled;
final VoidCallback onDragStarted;
Widget _buildFeedback() {
Widget _buildFeedback(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Material(
color: AppColors.transparent,
color: palette.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
@@ -676,7 +680,9 @@ class _DraggableNote extends StatelessWidget {
);
}
Widget _buildChildWhenDragging() {
Widget _buildChildWhenDragging(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Opacity(
@@ -684,10 +690,10 @@ class _DraggableNote extends StatelessWidget {
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.cardBackground,
color: palette.cardBackground,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: borderColor ?? AppColors.textDisabled,
color: borderColor ?? palette.textSecondary,
width: 1,
),
),
@@ -697,8 +703,8 @@ class _DraggableNote extends StatelessWidget {
children: [
Text(
note.title,
style: const TextStyle(
color: AppColors.textPrimary,
style: TextStyle(
color: palette.textPrimary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
@@ -708,10 +714,7 @@ class _DraggableNote extends StatelessWidget {
const SizedBox(height: 8),
Text(
note.body,
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: 14,
),
style: TextStyle(color: palette.textSecondary, fontSize: 14),
maxLines: 20,
overflow: TextOverflow.clip,
),
@@ -724,10 +727,12 @@ class _DraggableNote extends StatelessWidget {
@override
Widget build(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
final Widget content = Container(
decoration: BoxDecoration(
border: isDragTargetActive
? Border.all(color: AppColors.dragTargetBorder, width: 2)
? Border.all(color: palette.dragTargetBorder, width: 2)
: null,
borderRadius: BorderRadius.circular(12),
),
@@ -747,8 +752,8 @@ class _DraggableNote extends StatelessWidget {
onDragStarted: onDragStarted,
onDragEnd: onDragEnd,
onDraggableCanceled: (Velocity _v, Offset _o) => onDraggableCanceled(),
feedback: _buildFeedback(),
childWhenDragging: _buildChildWhenDragging(),
feedback: _buildFeedback(context),
childWhenDragging: _buildChildWhenDragging(context),
child: content,
);
}
@@ -758,8 +763,8 @@ class _DraggableNote extends StatelessWidget {
onDragStarted: onDragStarted,
onDragEnd: onDragEnd,
onDraggableCanceled: (Velocity _v, Offset _o) => onDraggableCanceled(),
feedback: _buildFeedback(),
childWhenDragging: _buildChildWhenDragging(),
feedback: _buildFeedback(context),
childWhenDragging: _buildChildWhenDragging(context),
child: content,
);
}
@@ -778,15 +783,13 @@ class _EmptyState extends StatelessWidget {
@override
Widget build(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.note_add_outlined,
color: AppColors.textMuted,
size: 48,
),
Icon(Icons.note_add_outlined, color: palette.textSecondary, size: 48),
const SizedBox(height: 12),
Text(
searchQuery != null && searchQuery!.isNotEmpty
@@ -796,8 +799,8 @@ class _EmptyState extends StatelessWidget {
: categoryName != null
? 'No hay notas en esta categoría'
: 'Aún no hay notas',
style: const TextStyle(
color: AppColors.textPrimary,
style: TextStyle(
color: palette.textPrimary,
fontSize: 18,
fontWeight: FontWeight.w600,
),
@@ -812,7 +815,7 @@ class _EmptyState extends StatelessWidget {
? 'Pulsa el botón + para crear una nota en “$categoryName”.'
: 'Pulsa el botón + para crear la primera.',
textAlign: TextAlign.center,
style: const TextStyle(color: AppColors.textSecondary),
style: TextStyle(color: palette.textSecondary),
),
],
),
@@ -934,26 +937,31 @@ class _CategoryDialogState extends State<_CategoryDialog> {
Future<void> _deleteCategory() async {
final bool? confirm = await showDialog<bool>(
context: context,
builder: (BuildContext context) => AlertDialog(
backgroundColor: AppColors.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: AppColors.border),
),
title: const Text('Borrar categoría'),
content: const Text('¿Seguro que quieres borrar esta categoría?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: const Text('Cancelar'),
builder: (BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return AlertDialog(
backgroundColor: palette.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: palette.border),
),
TextButton(
style: TextButton.styleFrom(foregroundColor: AppColors.destructive),
onPressed: () => Navigator.pop(context, true),
child: const Text('Borrar'),
),
],
),
title: const Text('Borrar categoría'),
content: const Text('¿Seguro que quieres borrar esta categoría?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: const Text('Cancelar'),
),
TextButton(
style: TextButton.styleFrom(
foregroundColor: palette.destructiveAccent,
),
onPressed: () => Navigator.pop(context, true),
child: const Text('Borrar'),
),
],
);
},
);
if (confirm != true) {
@@ -982,11 +990,13 @@ class _CategoryDialogState extends State<_CategoryDialog> {
@override
Widget build(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return AlertDialog(
backgroundColor: AppColors.cardBackground,
backgroundColor: palette.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: AppColors.border),
side: BorderSide(color: palette.border),
),
title: Text(
widget.category == null ? 'Crear categoría' : 'Editar categoría',
@@ -1018,9 +1028,9 @@ class _CategoryDialogState extends State<_CategoryDialog> {
const SizedBox(height: 16),
Container(
decoration: BoxDecoration(
color: AppColors.fill,
color: palette.fill,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: AppColors.border),
border: Border.all(color: palette.border),
),
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -1049,7 +1059,7 @@ class _CategoryDialogState extends State<_CategoryDialog> {
),
],
),
const Divider(height: 1, color: AppColors.border),
Divider(height: 1, color: palette.border),
Padding(
padding: const EdgeInsets.all(12),
child: AnimatedSwitcher(
@@ -1075,11 +1085,11 @@ class _CategoryDialogState extends State<_CategoryDialog> {
borderRadius: BorderRadius.circular(10),
border: isSelected
? Border.all(
color: AppColors.textPrimary,
color: palette.textPrimary,
width: 2,
)
: Border.all(
color: AppColors.border,
color: palette.border,
width: 1,
),
),
@@ -1105,21 +1115,21 @@ class _CategoryDialogState extends State<_CategoryDialog> {
height: 42,
decoration: BoxDecoration(
color: isSelected
? AppColors.hover
: AppColors.transparent,
? palette.hover
: palette.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSelected
? AppColors.textPrimary
: AppColors.border,
? palette.textPrimary
: palette.border,
width: 1,
),
),
child: Icon(
icon,
color: isSelected
? AppColors.textPrimary
: AppColors.textSecondary,
? palette.textPrimary
: palette.textSecondary,
),
),
);
@@ -1137,9 +1147,9 @@ class _CategoryDialogState extends State<_CategoryDialog> {
if (widget.category != null)
TextButton(
onPressed: _deleteCategory,
child: const Text(
child: Text(
'Borrar',
style: TextStyle(color: AppColors.destructive),
style: TextStyle(color: palette.destructiveAccent),
),
),
TextButton(
@@ -1176,10 +1186,12 @@ class _PickerTabButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return Material(
borderRadius: borderRadius,
clipBehavior: Clip.antiAlias,
color: selected ? AppColors.hover : AppColors.transparent,
color: selected ? palette.hover : palette.transparent,
child: InkWell(
borderRadius: borderRadius,
onTap: onTap,
@@ -1189,7 +1201,7 @@ class _PickerTabButton extends StatelessWidget {
child: Text(
label,
style: TextStyle(
color: selected ? AppColors.textPrimary : AppColors.textMuted,
color: selected ? palette.textPrimary : palette.textSecondary,
fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
),
),