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
+309 -240
View File
@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:notas/data/local_vault_service.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/theme/app_palette.dart';
import 'package:notas/widgets/search_app_bar.dart';
import 'package:notas/data/api_client.dart';
@@ -12,6 +12,8 @@ class SettingsScreen extends StatefulWidget {
required this.onForceSync,
required this.currentSeedColor,
required this.onThemeColorSelected,
required this.currentThemeMode,
required this.onThemeModeSelected,
});
final Future<void> Function() onDeleteAllData;
@@ -19,6 +21,8 @@ class SettingsScreen extends StatefulWidget {
final Future<void> Function() onForceSync;
final Color currentSeedColor;
final Future<void> Function(Color color) onThemeColorSelected;
final ThemeMode currentThemeMode;
final Future<void> Function(ThemeMode mode) onThemeModeSelected;
@override
State<SettingsScreen> createState() => _SettingsScreenState();
@@ -36,36 +40,40 @@ class _SettingsScreenState extends State<SettingsScreen> {
bool _encryptionKeyLoading = false;
bool _encryptionKeyVisible = false;
late Color _selectedSeedColor;
late ThemeMode _selectedThemeMode;
static const List<Color> _themeColorOptions = AppColors.themeSeedColors;
static const List<Color> _themeColorOptions = AppPalette.themeSeedColors;
Future<void> _confirmAndDeleteAll() async {
final bool? confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
backgroundColor: AppColors.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: AppColors.border),
),
title: const Text('Borrar todos los datos'),
content: const Text(
'¿Estás seguro? Esta acción eliminará la base de datos local y la clave de cifrado. Asegúrate de tener una copia de seguridad si es necesario o cuenta sincronizada.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancelar'),
builder: (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(
onPressed: () => Navigator.of(context).pop(true),
child: const Text(
'Borrar',
style: TextStyle(color: AppColors.destructive),
title: const Text('Borrar todos los datos'),
content: const Text(
'¿Estás seguro? Esta acción eliminará la base de datos local y la clave de cifrado. Asegúrate de tener una copia de seguridad si es necesario o cuenta sincronizada.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancelar'),
),
),
],
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text(
'Borrar',
style: TextStyle(color: palette.destructiveAccent),
),
),
],
);
},
);
if (confirmed != true) return;
@@ -100,30 +108,33 @@ class _SettingsScreenState extends State<SettingsScreen> {
Future<void> _confirmAndDeleteServerData() async {
final bool? confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
backgroundColor: AppColors.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: AppColors.border),
),
title: const Text('Borrar toda la info del servidor'),
content: const Text(
'¿Estás seguro? Esta acción eliminará toda la información almacenada en el servidor y no se puede deshacer.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancelar'),
builder: (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(
onPressed: () => Navigator.of(context).pop(true),
child: const Text(
'Borrar',
style: TextStyle(color: AppColors.destructive),
title: const Text('Borrar toda la info del servidor'),
content: const Text(
'¿Estás seguro? Esta acción eliminará toda la información almacenada en el servidor y no se puede deshacer.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancelar'),
),
),
],
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text(
'Borrar',
style: TextStyle(color: palette.destructiveAccent),
),
),
],
);
},
);
if (confirmed != true) return;
@@ -234,6 +245,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
void initState() {
super.initState();
_selectedSeedColor = widget.currentSeedColor;
_selectedThemeMode = widget.currentThemeMode;
_loadEndpoint();
}
@@ -244,6 +256,26 @@ class _SettingsScreenState extends State<SettingsScreen> {
widget.currentSeedColor != _selectedSeedColor) {
_selectedSeedColor = widget.currentSeedColor;
}
if (oldWidget.currentThemeMode != widget.currentThemeMode) {
_selectedThemeMode = widget.currentThemeMode;
}
}
Future<void> _selectThemeMode(ThemeMode mode) async {
if (_selectedThemeMode == mode) return;
setState(() {
_selectedThemeMode = mode;
});
try {
await widget.onThemeModeSelected(mode);
} catch (e) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('No se pudo guardar la preferencia de tema: $e'),
),
);
}
}
Future<void> _loadEndpoint() async {
@@ -307,10 +339,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
required bool isLoading,
required IconData icon,
}) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
return ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.destructiveAccent,
foregroundColor: AppColors.textPrimary,
backgroundColor: palette.destructiveAccent,
foregroundColor: palette.textPrimary,
textStyle: const TextStyle(fontWeight: FontWeight.w600),
),
onPressed: onPressed,
@@ -326,11 +360,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
}
Widget _buildThemeColorButton(Color color) {
final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
final bool isSelected = _selectedSeedColor.value == color.value;
final Color foregroundColor =
ThemeData.estimateBrightnessForColor(color) == Brightness.dark
? AppColors.textPrimary
: AppColors.textOnAccent;
? palette.textPrimary
: palette.textOnAccent;
return Semantics(
button: true,
@@ -349,14 +384,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
color: color,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected
? AppColors.textPrimary
: AppColors.textDisabled,
color: isSelected ? palette.textPrimary : palette.textSecondary,
width: isSelected ? 2.5 : 1.2,
),
boxShadow: [
BoxShadow(
color: AppColors.shadowSoft,
color: palette.shadowSoft,
blurRadius: 8,
offset: const Offset(0, 3),
),
@@ -458,9 +491,11 @@ class _SettingsScreenState extends State<SettingsScreen> {
}
Widget build(BuildContext context) {
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: [
@@ -472,199 +507,233 @@ class _SettingsScreenState extends State<SettingsScreen> {
titleText: 'Configuración',
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Expanded(child: Text('Borrar datos locales:')),
_buildDestructiveButton(
label: 'Borrar',
onPressed: (_isBusy || _isServerDeleting)
? null
: _confirmAndDeleteAll,
isLoading: _isBusy,
icon: Icons.delete_forever,
),
],
),
const SizedBox(height: 16),
Row(
children: [
const Expanded(
child: Text('Borrar info del servidor:'),
),
_buildDestructiveButton(
label: 'Borrar',
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _confirmAndDeleteServerData,
isLoading: _isServerDeleting,
icon: Icons.cloud_off,
),
],
),
const SizedBox(height: 16),
Row(
children: [
const Expanded(
child: Text('Forzar sincronizacion total:'),
),
ElevatedButton.icon(
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _forceSync,
icon: _isSyncing
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Icon(Icons.sync),
label: const Text('Sincronizar'),
),
],
),
const SizedBox(height: 24),
const Text('Color del esquema'),
const SizedBox(height: 8),
Wrap(
spacing: 12,
runSpacing: 12,
children: [
for (final Color color in _themeColorOptions)
_buildThemeColorButton(color),
],
),
const SizedBox(height: 24),
const Text(
'API endpoint (ej: https://notas-api.lpncnd.es/api)',
),
const SizedBox(height: 8),
_buildResponsiveInputActionsRow(
input: _endpointLoading
? const SizedBox(
height: 48,
child: Center(
child: CircularProgressIndicator(),
),
)
: TextField(
controller: _endpointController,
style: const TextStyle(
color: AppColors.textPrimary,
),
keyboardType: TextInputType.url,
decoration: InputDecoration(
labelText: 'API endpoint',
labelStyle: const TextStyle(
color: AppColors.textSecondary,
),
filled: true,
fillColor: AppColors.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.border,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.border,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.accent,
width: 1.2,
),
),
),
),
actions: [
ElevatedButton(
onPressed: _endpointLoading ? null : _saveEndpoint,
child: const Text('Guardar'),
),
OutlinedButton(
onPressed: _endpointLoading ? null : _resetEndpoint,
child: const Text('Restaurar'),
),
],
),
const SizedBox(height: 24),
const Text('Clave de cifrado local'),
const SizedBox(height: 8),
_buildResponsiveInputActionsRow(
input: TextField(
controller: _encryptionKeyController,
readOnly: true,
obscureText: !_encryptionKeyVisible,
enableSuggestions: false,
autocorrect: false,
style: const TextStyle(color: AppColors.textPrimary),
decoration: InputDecoration(
labelText: _encryptionKeyVisible
? 'Clave de cifrado'
: 'Oculta hasta pulsar mostrar',
labelStyle: const TextStyle(
color: AppColors.textSecondary,
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Expanded(
child: Text('Borrar datos locales:'),
),
filled: true,
fillColor: AppColors.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.border,
),
_buildDestructiveButton(
label: 'Borrar',
onPressed: (_isBusy || _isServerDeleting)
? null
: _confirmAndDeleteAll,
isLoading: _isBusy,
icon: Icons.delete_forever,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.border,
),
],
),
const SizedBox(height: 16),
Row(
children: [
const Expanded(
child: Text('Borrar info del servidor:'),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: AppColors.accent,
width: 1.2,
),
_buildDestructiveButton(
label: 'Borrar',
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _confirmAndDeleteServerData,
isLoading: _isServerDeleting,
icon: Icons.cloud_off,
),
],
),
const SizedBox(height: 16),
Row(
children: [
const Expanded(
child: Text('Forzar sincronizacion total:'),
),
ElevatedButton.icon(
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _forceSync,
icon: _isSyncing
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Icon(Icons.sync),
label: const Text('Sincronizar'),
),
],
),
const SizedBox(height: 24),
const Text('Apariencia'),
const SizedBox(height: 8),
Column(
children: [
RadioListTile<ThemeMode>(
title: const Text('Seguir modo del sistema'),
value: ThemeMode.system,
groupValue: _selectedThemeMode,
onChanged: (ThemeMode? v) =>
_selectThemeMode(ThemeMode.system),
),
RadioListTile<ThemeMode>(
title: const Text('Modo claro'),
value: ThemeMode.light,
groupValue: _selectedThemeMode,
onChanged: (ThemeMode? v) =>
_selectThemeMode(ThemeMode.light),
),
RadioListTile<ThemeMode>(
title: const Text('Modo oscuro'),
value: ThemeMode.dark,
groupValue: _selectedThemeMode,
onChanged: (ThemeMode? v) =>
_selectThemeMode(ThemeMode.dark),
),
],
),
const SizedBox(height: 16),
const Text('Color del esquema'),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Wrap(
spacing: 12,
runSpacing: 12,
children: [
for (final Color color in _themeColorOptions)
_buildThemeColorButton(color),
],
),
),
actions: [
ElevatedButton(
onPressed: _encryptionKeyLoading
? null
: _loadEncryptionKey,
child: _encryptionKeyLoading
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
const SizedBox(height: 24),
const Text(
'API endpoint (ej: https://notas-api.lpncnd.es/api)',
),
const SizedBox(height: 8),
_buildResponsiveInputActionsRow(
input: _endpointLoading
? const SizedBox(
height: 48,
child: Center(
child: CircularProgressIndicator(),
),
)
: TextField(
controller: _endpointController,
style: TextStyle(color: palette.textPrimary),
keyboardType: TextInputType.url,
decoration: InputDecoration(
labelText: 'API endpoint',
labelStyle: TextStyle(
color: palette.textSecondary,
),
)
: const Text('Mostrar'),
filled: true,
fillColor: palette.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(
color: palette.border,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(
color: palette.border,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(
color: palette.accent,
width: 1.2,
),
),
),
),
actions: [
ElevatedButton(
onPressed: _endpointLoading
? null
: _saveEndpoint,
child: const Text('Guardar'),
),
OutlinedButton(
onPressed: _endpointLoading
? null
: _resetEndpoint,
child: const Text('Restaurar'),
),
],
),
const SizedBox(height: 24),
const Text('Clave de cifrado local'),
const SizedBox(height: 8),
_buildResponsiveInputActionsRow(
input: TextField(
controller: _encryptionKeyController,
readOnly: true,
obscureText: !_encryptionKeyVisible,
enableSuggestions: false,
autocorrect: false,
style: TextStyle(color: palette.textPrimary),
decoration: InputDecoration(
labelText: _encryptionKeyVisible
? 'Clave de cifrado'
: 'Oculta hasta pulsar mostrar',
labelStyle: TextStyle(
color: palette.textSecondary,
),
filled: true,
fillColor: palette.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: palette.border),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: palette.border),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(
color: palette.accent,
width: 1.2,
),
),
),
),
OutlinedButton(
onPressed: _encryptionKeyVisible
? _hideEncryptionKey
: null,
child: const Text('Ocultar'),
),
],
),
],
actions: [
ElevatedButton(
onPressed: _encryptionKeyLoading
? null
: _loadEncryptionKey,
child: _encryptionKeyLoading
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Text('Mostrar'),
),
OutlinedButton(
onPressed: _encryptionKeyVisible
? _hideEncryptionKey
: null,
child: const Text('Ocultar'),
),
],
),
],
),
),
),
),