Marcos/notas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor theme colors and styles across the application

Browse Source 
- 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:
Marcos
2026-05-23 09:38:26 +02:00
parent 814f8f7c04
commit f4bb5104e2
14 changed files with 488 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/note_editor_screen.dart
+42 -34
View File
@@ -7,6 +7,7 @@ import 'package:intl/intl.dart';
import 'package:notas/models/category.dart';
import 'package:notas/models/note.dart';
import 'package:notas/platform/app_platform.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/widgets/category_style.dart';
// NoteEditorScreen: unified UI for creating and editing notes.
@@ -41,7 +42,7 @@ class NoteEditorScreen extends StatefulWidget {
return showGeneralDialog<dynamic>(
context: context,
barrierDismissible: false,
barrierColor: Colors.transparent,
barrierColor: AppColors.transparent,
transitionDuration: const Duration(milliseconds: 200),
pageBuilder: (context, animation, secondaryAnimation) {
return NoteEditorScreen(
@@ -201,30 +202,30 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
final bool isDeletedNote = _currentNote.isDeleted;
return AlertDialog(
backgroundColor: const Color(0xFF303134),
backgroundColor: AppColors.surfaceElevated,
title: Text(
isDeletedNote ? 'Eliminar permanentemente' : 'Eliminar nota',
style: const TextStyle(color: Colors.white),
style: const TextStyle(color: AppColors.textPrimary),
),
content: Text(
isDeletedNote
? 'Esta nota ya está borrada. Si la eliminas ahora, se borrará permanentemente.'
: '¿Estás seguro de que deseas eliminar esta nota?',
style: const TextStyle(color: Colors.white70),
style: const TextStyle(color: AppColors.textSecondary),
),
actions: [
TextButton(
onPressed: () => onConfirmed(false),
child: const Text(
'Cancelar',
style: TextStyle(color: Colors.white70),
style: TextStyle(color: AppColors.textSecondary),
),
),
TextButton(
onPressed: () => onConfirmed(true),
child: Text(
isDeletedNote ? 'Eliminar permanentemente' : 'Eliminar',
style: const TextStyle(color: Colors.red),
style: const TextStyle(color: AppColors.destructive),
),
),
],
@@ -236,7 +237,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
final bool? confirmed = await showDialog<bool>(
context: context,
barrierDismissible: false,
barrierColor: Colors.transparent,
barrierColor: AppColors.transparent,
builder: (BuildContext dialogContext) {
return _buildDeleteConfirmationDialog(
onConfirmed: (bool confirmed) =>
@@ -253,7 +254,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
final bool? confirmed = await showDialog<bool>(
context: context,
barrierDismissible: false,
barrierColor: Colors.transparent,
barrierColor: AppColors.transparent,
builder: (BuildContext dialogContext) {
return _buildDeleteConfirmationDialog(
onConfirmed: (bool confirmed) =>
@@ -282,13 +283,13 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
};
return Material(
color: Colors.transparent,
color: AppColors.transparent,
child: Stack(
children: [
const Positioned.fill(
child: ModalBarrier(
dismissible: false,
color: Color.fromARGB(140, 0, 0, 0),
color: AppColors.overlay,
),
),
Center(
@@ -319,7 +320,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Color _categoryBackgroundColor(Category? category) {
if (category?.colorValue == null) {
return Colors.white.withValues(alpha: 0.08);
return AppColors.borderMuted;
}
return Color(category!.colorValue!);
@@ -327,11 +328,13 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Color _categoryForegroundColor(Category? category) {
if (category == null || category.colorValue == null) {
return Colors.white;
return AppColors.textPrimary;
}
final Color background = Color(category.colorValue!);
return background.computeLuminance() > 0.55 ? Colors.black87 : Colors.white;
return background.computeLuminance() > 0.55
? AppColors.textOnSurfaceDark
: AppColors.textPrimary;
}
Widget _buildCategorySelectorBox({Category? category}) {
@@ -351,7 +354,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
border: Border.all(
color: category?.colorValue != null
? backgroundColor.withValues(alpha: 0.85)
: Colors.white24,
: AppColors.textDisabled,
),
),
child: Row(
@@ -407,7 +410,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
final double menuHeight = math.min(screenSize.height - 32, 360);
return Material(
color: Colors.transparent,
color: AppColors.transparent,
child: Stack(
children: [
Positioned.fill(
@@ -425,7 +428,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
),
child: Material(
elevation: 10,
color: const Color(0xFF303134),
color: AppColors.surfaceElevated,
borderRadius: BorderRadius.circular(12),
clipBehavior: Clip.antiAlias,
child: ListView(
@@ -485,7 +488,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
color: isSelected ? Colors.white.withValues(alpha: 0.08) : null,
color: isSelected ? AppColors.hover : null,
child: Row(
children: [
Container(
@@ -497,7 +500,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
border: Border.all(
color: category?.colorValue != null
? backgroundColor.withValues(alpha: 0.85)
: Colors.white24,
: AppColors.textDisabled,
),
),
child: Icon(icon, size: 16, color: foregroundColor),
@@ -553,13 +556,15 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.white12, width: 1)),
border: Border(
bottom: BorderSide(color: AppColors.border, width: 1),
),
),
child: Row(
children: [
IconButton(
onPressed: _closeWithoutSaving,
icon: const Icon(Icons.close, color: Colors.white70),
icon: const Icon(Icons.close, color: AppColors.textSecondary),
tooltip: 'Cerrar sin guardar',
),
const SizedBox(width: 8),
@@ -571,14 +576,14 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Text(
'Posicion: ${_currentNote.position}',
style: const TextStyle(
color: Colors.white54,
color: AppColors.textMuted,
fontSize: 12,
),
),
Text(
'Creado: ${_formatDate(_currentNote.createdAt)}',
style: const TextStyle(
color: Colors.white54,
color: AppColors.textMuted,
fontSize: 12,
),
),
@@ -586,7 +591,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Text(
'Modificado: ${_formatDate(_currentNote.updatedAt)}',
style: const TextStyle(
color: Colors.white54,
color: AppColors.textMuted,
fontSize: 12,
),
),
@@ -621,13 +626,13 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
TextField(
controller: _titleController,
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 28,
fontWeight: FontWeight.bold,
),
decoration: const InputDecoration(
hintText: 'Título',
hintStyle: TextStyle(color: Colors.white30),
hintStyle: TextStyle(color: AppColors.textHint),
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
@@ -640,13 +645,13 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
maxLines: null,
expands: true,
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 16,
height: 1.6,
),
decoration: const InputDecoration(
hintText: 'Escribe tu nota...',
hintStyle: TextStyle(color: Colors.white30),
hintStyle: TextStyle(color: AppColors.textHint),
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
@@ -659,7 +664,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
border: Border(top: BorderSide(color: Colors.white12, width: 1)),
border: Border(top: BorderSide(color: AppColors.border, width: 1)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -667,7 +672,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
if (!_isNewNote)
IconButton(
onPressed: _deleteNote,
icon: const Icon(Icons.delete_outline, color: Colors.red),
icon: const Icon(
Icons.delete_outline,
color: AppColors.destructive,
),
tooltip: 'Eliminar nota',
)
else
@@ -684,10 +692,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Widget build(BuildContext context) {
if (_isMobileLayout) {
return Material(
color: Colors.transparent,
color: AppColors.transparent,
child: SafeArea(
child: Container(
color: const Color.fromARGB(255, 24, 25, 26),
color: AppColors.cardBackground,
child: _buildEditorContent(isMobile: true),
),
),
@@ -704,7 +712,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
Positioned.fill(
child: ModalBarrier(
dismissible: false,
color: const Color.fromARGB(54, 0, 0, 0).withValues(alpha: 0.5),
color: AppColors.shadowDim,
),
),
Positioned.fill(
@@ -713,10 +721,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
width: maxWidth,
height: maxHeight,
child: Material(
color: const Color.fromRGBO(24, 25, 26, 1),
color: AppColors.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: Colors.white24, width: 1),
side: BorderSide(color: AppColors.textDisabled, width: 1),
),
clipBehavior: Clip.antiAlias,
child: _buildEditorContent(isMobile: false),