Refactor theme colors and styles across the application

- Introduced AppColors class to centralize color definitions for better maintainability and consistency.
- Updated various screens (Settings, Vault Access, Note Card, etc.) to use AppColors for styling instead of hardcoded colors.
- Enhanced UI elements with improved color contrast and accessibility.
- Replaced gradient backgrounds with defined color schemes for a cohesive look.
- Refactored button styles and text colors to align with the new theme structure.
This commit is contained in:
2026-05-23 09:38:26 +02:00
parent 814f8f7c04
commit f4bb5104e2
14 changed files with 488 additions and 300 deletions
+40 -32
View File
@@ -15,6 +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';
class HomeScreen extends StatefulWidget {
const HomeScreen({
@@ -490,13 +491,7 @@ class _HomeScreenState extends State<HomeScreen> {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF191A1D), Color(0xFF222326), Color(0xFF101114)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
decoration: const BoxDecoration(gradient: AppColors.backdropGradient),
child: SafeArea(
child: Column(
children: [
@@ -570,7 +565,7 @@ class _HomeScreenState extends State<HomeScreen> {
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _closeMenu,
child: Container(color: Colors.black),
child: Container(color: AppColors.overlay),
),
),
),
@@ -583,7 +578,7 @@ class _HomeScreenState extends State<HomeScreen> {
bottom: 0,
width: 280,
child: Material(
color: const Color.fromRGBO(24, 25, 26, 1),
color: AppColors.cardBackground,
elevation: 8,
child: MenuDrawer(
onMenuItemTapped: _handleMenuItemTapped,
@@ -651,7 +646,7 @@ class _DraggableNote extends StatelessWidget {
return MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Material(
color: Colors.transparent,
color: AppColors.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
@@ -689,9 +684,12 @@ class _DraggableNote extends StatelessWidget {
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromRGBO(24, 25, 26, 1),
color: AppColors.cardBackground,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: borderColor ?? Colors.white24, width: 1),
border: Border.all(
color: borderColor ?? AppColors.textDisabled,
width: 1,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -700,7 +698,7 @@ class _DraggableNote extends StatelessWidget {
Text(
note.title,
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
@@ -710,7 +708,10 @@ class _DraggableNote extends StatelessWidget {
const SizedBox(height: 8),
Text(
note.body,
style: const TextStyle(color: Colors.white70, fontSize: 14),
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: 14,
),
maxLines: 20,
overflow: TextOverflow.clip,
),
@@ -726,7 +727,7 @@ class _DraggableNote extends StatelessWidget {
final Widget content = Container(
decoration: BoxDecoration(
border: isDragTargetActive
? Border.all(color: Colors.blue.shade400, width: 2)
? Border.all(color: AppColors.dragTargetBorder, width: 2)
: null,
borderRadius: BorderRadius.circular(12),
),
@@ -781,7 +782,11 @@ class _EmptyState extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.note_add_outlined, color: Colors.white54, size: 48),
const Icon(
Icons.note_add_outlined,
color: AppColors.textMuted,
size: 48,
),
const SizedBox(height: 12),
Text(
searchQuery != null && searchQuery!.isNotEmpty
@@ -792,7 +797,7 @@ class _EmptyState extends StatelessWidget {
? 'No hay notas en esta categoría'
: 'Aún no hay notas',
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 18,
fontWeight: FontWeight.w600,
),
@@ -807,7 +812,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: Colors.white70),
style: const TextStyle(color: AppColors.textSecondary),
),
],
),
@@ -1000,9 +1005,9 @@ class _CategoryDialogState extends State<_CategoryDialog> {
const SizedBox(height: 16),
Container(
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.04),
color: AppColors.fill,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: Colors.white12),
border: Border.all(color: AppColors.border),
),
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -1031,7 +1036,7 @@ class _CategoryDialogState extends State<_CategoryDialog> {
),
],
),
const Divider(height: 1, color: Colors.white12),
const Divider(height: 1, color: AppColors.border),
Padding(
padding: const EdgeInsets.all(12),
child: AnimatedSwitcher(
@@ -1057,11 +1062,11 @@ class _CategoryDialogState extends State<_CategoryDialog> {
borderRadius: BorderRadius.circular(10),
border: isSelected
? Border.all(
color: Colors.white,
color: AppColors.textPrimary,
width: 2,
)
: Border.all(
color: Colors.white12,
color: AppColors.border,
width: 1,
),
),
@@ -1087,21 +1092,21 @@ class _CategoryDialogState extends State<_CategoryDialog> {
height: 42,
decoration: BoxDecoration(
color: isSelected
? Colors.white10
: Colors.transparent,
? AppColors.hover
: AppColors.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSelected
? Colors.white
: Colors.white12,
? AppColors.textPrimary
: AppColors.border,
width: 1,
),
),
child: Icon(
icon,
color: isSelected
? Colors.white
: Colors.white70,
? AppColors.textPrimary
: AppColors.textSecondary,
),
),
);
@@ -1119,7 +1124,10 @@ class _CategoryDialogState extends State<_CategoryDialog> {
if (widget.category != null)
TextButton(
onPressed: _deleteCategory,
child: const Text('Borrar', style: TextStyle(color: Colors.red)),
child: const Text(
'Borrar',
style: TextStyle(color: AppColors.destructive),
),
),
TextButton(
onPressed: () => Navigator.pop(context),
@@ -1158,7 +1166,7 @@ class _PickerTabButton extends StatelessWidget {
return Material(
borderRadius: borderRadius,
clipBehavior: Clip.antiAlias,
color: selected ? Colors.white10 : Colors.transparent,
color: selected ? AppColors.hover : AppColors.transparent,
child: InkWell(
borderRadius: borderRadius,
onTap: onTap,
@@ -1168,7 +1176,7 @@ class _PickerTabButton extends StatelessWidget {
child: Text(
label,
style: TextStyle(
color: selected ? Colors.white : Colors.white54,
color: selected ? AppColors.textPrimary : AppColors.textMuted,
fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
),
),