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
+112 -68
View File
@@ -1,5 +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/widgets/search_app_bar.dart';
import 'package:notas/data/api_client.dart';
@@ -29,30 +30,35 @@ class _SettingsScreenState extends State<SettingsScreen> {
bool _isServerDeleting = false;
bool _isThemeSaving = false;
final TextEditingController _endpointController = TextEditingController();
final TextEditingController _encryptionKeyController = TextEditingController();
final TextEditingController _encryptionKeyController =
TextEditingController();
bool _endpointLoading = true;
bool _encryptionKeyLoading = false;
bool _encryptionKeyVisible = false;
late Color _selectedSeedColor;
static const List<Color> _themeColorOptions = <Color>[
Colors.amber,
Colors.blue,
Colors.teal,
Colors.green,
Colors.pink,
Colors.purple,
];
static const List<Color> _themeColorOptions = AppColors.themeSeedColors;
Future<void> _confirmAndDeleteAll() async {
final bool? confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
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.'),
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: const Text('Borrar', style: TextStyle(color: Colors.red))),
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text(
'Borrar',
style: TextStyle(color: AppColors.destructive),
),
),
],
),
);
@@ -69,7 +75,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Todos los datos locales han sido eliminados.')),
const SnackBar(
content: Text('Todos los datos locales han sido eliminados.'),
),
);
} catch (error) {
if (!mounted) return;
@@ -101,7 +109,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
onPressed: () => Navigator.of(context).pop(true),
child: const Text(
'Borrar',
style: TextStyle(color: Colors.red),
style: TextStyle(color: AppColors.destructive),
),
),
],
@@ -115,11 +123,13 @@ class _SettingsScreenState extends State<SettingsScreen> {
});
try {
final Map<String, dynamic> response =
await AuthApi.instance.deleteAllServerData();
final Map<String, dynamic> response = await AuthApi.instance
.deleteAllServerData();
if (response['error'] == true) {
throw Exception(response['body'] ?? response['message'] ?? 'Error desconocido');
throw Exception(
response['body'] ?? response['message'] ?? 'Error desconocido',
);
}
await AuthApi.instance.clearTokens();
@@ -127,7 +137,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Toda la información del servidor ha sido eliminada.')),
const SnackBar(
content: Text('Toda la información del servidor ha sido eliminada.'),
),
);
} catch (error) {
if (!mounted) return;
@@ -239,7 +251,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
});
try {
final String? encryptionKey = await LocalVaultService.instance.readEncryptionKey();
final String? encryptionKey = await LocalVaultService.instance
.readEncryptionKey();
if (!mounted) return;
@@ -286,8 +299,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
}) {
return ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent,
foregroundColor: Colors.white,
backgroundColor: AppColors.destructiveAccent,
foregroundColor: AppColors.textPrimary,
textStyle: const TextStyle(fontWeight: FontWeight.w600),
),
onPressed: onPressed,
@@ -306,8 +319,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
final bool isSelected = _selectedSeedColor.value == color.value;
final Color foregroundColor =
ThemeData.estimateBrightnessForColor(color) == Brightness.dark
? Colors.white
: Colors.black;
? AppColors.textPrimary
: AppColors.textOnAccent;
return Semantics(
button: true,
@@ -326,12 +339,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
color: color,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected ? Colors.white : Colors.white24,
color: isSelected
? AppColors.textPrimary
: AppColors.textDisabled,
width: isSelected ? 2.5 : 1.2,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.25),
color: AppColors.shadowSoft,
blurRadius: 8,
offset: const Offset(0, 3),
),
@@ -341,11 +356,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
alignment: Alignment.center,
children: [
if (isSelected)
Icon(
Icons.check,
size: 22,
color: foregroundColor,
),
Icon(Icons.check, size: 22, color: foregroundColor),
],
),
),
@@ -366,10 +377,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
try {
await ApiConfig.setEndpoint(value);
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Endpoint guardado')));
ScaffoldMessenger.of(
context,
).showSnackBar(const SnackBar(content: Text('Endpoint guardado')));
} catch (e) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error guardando endpoint: $e')));
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('Error guardando endpoint: $e')));
}
}
@@ -378,7 +393,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
final String endpoint = await ApiConfig.getEndpoint();
if (!mounted) return;
_endpointController.text = endpoint;
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Endpoint restaurado al valor por defecto')));
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Endpoint restaurado al valor por defecto')),
);
}
Widget _buildResponsiveInputActionsRow({
@@ -433,17 +450,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
Widget build(BuildContext context) {
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: [
@@ -462,9 +469,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
children: [
Row(
children: [
const Expanded(
child: Text('Borrar datos locales:'),
),
const Expanded(child: Text('Borrar datos locales:')),
_buildDestructiveButton(
label: 'Borrar',
onPressed: (_isBusy || _isServerDeleting)
@@ -483,7 +488,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
_buildDestructiveButton(
label: 'Borrar',
onPressed: (_isBusy || _isSyncing || _isServerDeleting)
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _confirmAndDeleteServerData,
isLoading: _isServerDeleting,
@@ -498,14 +504,17 @@ class _SettingsScreenState extends State<SettingsScreen> {
child: Text('Forzar sincronizacion total:'),
),
ElevatedButton.icon(
onPressed: (_isBusy || _isSyncing || _isServerDeleting)
onPressed:
(_isBusy || _isSyncing || _isServerDeleting)
? null
: _forceSync,
icon: _isSyncing
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Icon(Icons.sync),
label: const Text('Sincronizar'),
@@ -524,31 +533,49 @@ class _SettingsScreenState extends State<SettingsScreen> {
],
),
const SizedBox(height: 24),
const Text('API endpoint (ej: https://notas-api.lpncnd.es/api)'),
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()))
? const SizedBox(
height: 48,
child: Center(
child: CircularProgressIndicator(),
),
)
: TextField(
controller: _endpointController,
style: const TextStyle(color: Colors.white),
style: const TextStyle(
color: AppColors.textPrimary,
),
keyboardType: TextInputType.url,
decoration: InputDecoration(
labelText: 'API endpoint',
labelStyle: TextStyle(color: Colors.white.withValues(alpha: 0.7)),
labelStyle: const TextStyle(
color: AppColors.textSecondary,
),
filled: true,
fillColor: Colors.white.withValues(alpha: 0.05),
fillColor: AppColors.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.12)),
borderSide: const BorderSide(
color: AppColors.border,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.12)),
borderSide: const BorderSide(
color: AppColors.border,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Colors.amber, width: 1.2),
borderSide: const BorderSide(
color: AppColors.accent,
width: 1.2,
),
),
),
),
@@ -573,39 +600,56 @@ class _SettingsScreenState extends State<SettingsScreen> {
obscureText: !_encryptionKeyVisible,
enableSuggestions: false,
autocorrect: false,
style: const TextStyle(color: Colors.white),
style: const TextStyle(color: AppColors.textPrimary),
decoration: InputDecoration(
labelText: _encryptionKeyVisible ? 'Clave de cifrado' : 'Oculta hasta pulsar mostrar',
labelStyle: TextStyle(color: Colors.white.withValues(alpha: 0.7)),
labelText: _encryptionKeyVisible
? 'Clave de cifrado'
: 'Oculta hasta pulsar mostrar',
labelStyle: const TextStyle(
color: AppColors.textSecondary,
),
filled: true,
fillColor: Colors.white.withValues(alpha: 0.05),
fillColor: AppColors.fill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.12)),
borderSide: const BorderSide(
color: AppColors.border,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.12)),
borderSide: const BorderSide(
color: AppColors.border,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Colors.amber, width: 1.2),
borderSide: const BorderSide(
color: AppColors.accent,
width: 1.2,
),
),
),
),
actions: [
ElevatedButton(
onPressed: _encryptionKeyLoading ? null : _loadEncryptionKey,
onPressed: _encryptionKeyLoading
? null
: _loadEncryptionKey,
child: _encryptionKeyLoading
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Text('Mostrar'),
),
OutlinedButton(
onPressed: _encryptionKeyVisible ? _hideEncryptionKey : null,
onPressed: _encryptionKeyVisible
? _hideEncryptionKey
: null,
child: const Text('Ocultar'),
),
],