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/widgets/category_style.dart
+3 -11
View File
@@ -1,18 +1,10 @@
import 'package:flutter/material.dart';
import 'package:notas/theme/app_colors.dart';
class CategoryStyle {
CategoryStyle._();
static const List<Color> colors = <Color>[
Colors.amber,
Colors.blue,
Colors.green,
Colors.purple,
Colors.red,
Colors.teal,
Colors.orange,
Colors.grey,
];
static const List<Color> colors = AppColors.categoryColors;
static const List<IconData> icons = <IconData>[
Icons.label_outline_rounded,
@@ -38,4 +30,4 @@ class CategoryStyle {
return Icons.folder_outlined;
}
}
}
lib/widgets/menu_drawer.dart
+30 -21
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:notas/models/category.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/widgets/category_style.dart';
class MenuDrawer extends StatelessWidget {
@@ -22,10 +23,8 @@ class MenuDrawer extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 30, 31, 35),
border: Border(
right: BorderSide(color: Colors.white12, width: 0.5),
),
color: AppColors.drawerBackground,
border: Border(right: BorderSide(color: AppColors.border, width: 0.5)),
),
child: Column(
children: [
@@ -50,7 +49,7 @@ class MenuDrawer extends StatelessWidget {
CategoryStyle.iconForCodePoint(
category.iconCodePoint,
);
return _MenuItemTile(
icon: categoryIcon,
label: category.name,
@@ -59,8 +58,14 @@ class MenuDrawer extends StatelessWidget {
onLongPress: onEditCategory == null
? null
: () => onEditCategory?.call(category),
iconColor: Color(category.colorValue ?? 0xFFFFC107),
textColor: Color(category.colorValue ?? 0xFFFFC107),
iconColor: Color(
category.colorValue ??
AppColors.categoryFallback.value,
),
textColor: Color(
category.colorValue ??
AppColors.categoryFallback.value,
),
trailing: IconButton(
padding: const EdgeInsets.all(8),
constraints: const BoxConstraints(
@@ -69,7 +74,7 @@ class MenuDrawer extends StatelessWidget {
),
icon: const Icon(
Icons.more_vert,
color: Colors.white70,
color: AppColors.textSecondary,
size: 20,
),
onPressed: () => onEditCategory?.call(category),
@@ -92,10 +97,10 @@ class MenuDrawer extends StatelessWidget {
label: 'Mis notas borradas',
selected: selectedItem == 'deleted_notes',
onTap: () => onMenuItemTapped?.call('deleted_notes'),
iconColor: Colors.redAccent,
textColor: Colors.redAccent,
iconColor: AppColors.destructiveAccent,
textColor: AppColors.destructiveAccent,
),
const Divider(color: Colors.white12, height: 16),
const Divider(color: AppColors.border, height: 16),
_MenuItemTile(
icon: Icons.settings,
label: 'Configuración',
@@ -140,9 +145,11 @@ class _MenuItemTileState extends State<_MenuItemTile> {
Widget build(BuildContext context) {
final bool active = widget.selected || _hovering;
final Color backgroundColor = active
? Colors.white.withValues(alpha: 0.10)
: Colors.transparent;
final Color foregroundColor = active ? Colors.white : Colors.white70;
? AppColors.hover
: AppColors.transparent;
final Color foregroundColor = active
? AppColors.textPrimary
: AppColors.textSecondary;
final Widget? trailing = _hovering ? widget.trailing : null;
return MouseRegion(
@@ -155,11 +162,7 @@ class _MenuItemTileState extends State<_MenuItemTile> {
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
margin: const EdgeInsets.only(
right: 8,
top: 2,
bottom: 2,
),
margin: const EdgeInsets.only(right: 8, top: 2, bottom: 2),
child: Material(
color: backgroundColor,
borderRadius: const BorderRadius.only(
@@ -169,11 +172,17 @@ class _MenuItemTileState extends State<_MenuItemTile> {
clipBehavior: Clip.antiAlias,
child: ListTile(
contentPadding: const EdgeInsets.only(left: 16, right: 8),
leading: Icon(widget.icon, color: widget.iconColor ?? foregroundColor),
leading: Icon(
widget.icon,
color: widget.iconColor ?? foregroundColor,
),
trailing: trailing,
title: Text(
widget.label,
style: TextStyle(color: widget.textColor ?? foregroundColor, fontSize: 14),
style: TextStyle(
color: widget.textColor ?? foregroundColor,
fontSize: 14,
),
),
onTap: widget.onTap,
onLongPress: widget.onLongPress,
lib/widgets/note_card.dart
+17 -8
View File
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:notas/models/note.dart';
import 'package:notas/theme/app_colors.dart';
// Small presentational widget for a note inside the grid.
// Keep this widget lightweight and layout-agnostic: it should not force
@@ -33,7 +34,9 @@ class _NoteCardState extends State<NoteCard> {
final bool showGrabbing = widget.isDragging || _isPressed;
return MouseRegion(
cursor: showGrabbing ? SystemMouseCursors.grabbing : SystemMouseCursors.grab,
cursor: showGrabbing
? SystemMouseCursors.grabbing
: SystemMouseCursors.grab,
child: GestureDetector(
onTapDown: widget.onTap == null
? null
@@ -60,10 +63,10 @@ class _NoteCardState extends State<NoteCard> {
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: widget.borderColor ?? Colors.white24,
color: widget.borderColor ?? AppColors.textDisabled,
width: 1,
),
),
@@ -87,7 +90,10 @@ class _NoteCardState extends State<NoteCard> {
final TextPainter textPainter = TextPainter(
text: TextSpan(
text: widget.note.body,
style: const TextStyle(color: Colors.white70, fontSize: 14),
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: 14,
),
),
maxLines: 20,
textDirection: TextDirection.ltr,
@@ -105,7 +111,7 @@ class _NoteCardState extends State<NoteCard> {
Text(
widget.note.title,
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
@@ -115,7 +121,10 @@ class _NoteCardState extends State<NoteCard> {
const SizedBox(height: 8),
Text(
widget.note.body,
style: const TextStyle(color: Colors.white70, fontSize: 14),
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: 14,
),
maxLines: 20,
overflow: TextOverflow.clip,
),
@@ -124,7 +133,7 @@ class _NoteCardState extends State<NoteCard> {
const Text(
'...',
style: TextStyle(
color: Colors.white54,
color: AppColors.textMuted,
fontSize: 18,
height: 1,
),
@@ -138,4 +147,4 @@ class _NoteCardState extends State<NoteCard> {
),
);
}
}
}
lib/widgets/search_app_bar.dart
+23 -18
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:notas/theme/app_colors.dart';
class SearchAppBar extends StatefulWidget {
const SearchAppBar({
@@ -53,20 +54,19 @@ class _SearchAppBarState extends State<SearchAppBar> {
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
border: Border(
bottom: BorderSide(
color: Colors.white.withValues(alpha: 0.12),
width: 0.5,
),
),
color: AppColors.transparent,
border: Border(bottom: BorderSide(color: AppColors.border, width: 0.5)),
),
padding: const EdgeInsets.only(left: 8, right: 20, top: 7, bottom: 7),
child: Row(
children: [
IconButton(
onPressed: widget.onLeadingPressed ?? widget.onMenuPressed,
icon: Icon(widget.leadingIcon, color: Colors.white70, size: 20),
icon: Icon(
widget.leadingIcon,
color: AppColors.textSecondary,
size: 20,
),
tooltip: widget.leadingTooltip,
splashRadius: 18,
constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
@@ -84,18 +84,23 @@ class _SearchAppBarState extends State<SearchAppBar> {
child: TextField(
controller: _searchController,
onChanged: widget.onSearchChanged,
style: const TextStyle(color: Colors.white, fontSize: 13),
cursorColor: Colors.white70,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 13,
),
cursorColor: AppColors.textSecondary,
decoration: InputDecoration(
hintText: widget.searchHint,
hintStyle: TextStyle(
color: Colors.white.withValues(alpha: 0.5),
color: AppColors.textSecondary.withValues(
alpha: 0.5,
),
),
suffixIcon: _searchController.text.isNotEmpty
? IconButton(
icon: const Icon(
Icons.clear,
color: Colors.white70,
color: AppColors.textSecondary,
size: 18,
),
onPressed: () {
@@ -111,33 +116,33 @@ class _SearchAppBarState extends State<SearchAppBar> {
padding: EdgeInsets.only(right: 8),
child: Icon(
Icons.search,
color: Colors.white70,
color: AppColors.textSecondary,
size: 18,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
color: Colors.white.withValues(alpha: 0.2),
color: AppColors.borderStrong,
width: 0.5,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
color: Colors.white.withValues(alpha: 0.2),
color: AppColors.borderStrong,
width: 0.5,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
color: Colors.white.withValues(alpha: 0.4),
color: AppColors.searchFocusBorder,
width: 0.5,
),
),
filled: true,
fillColor: Colors.white.withValues(alpha: 0.05),
fillColor: AppColors.fill,
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
@@ -152,7 +157,7 @@ class _SearchAppBarState extends State<SearchAppBar> {
child: Text(
widget.titleText ?? '',
style: const TextStyle(
color: Colors.white,
color: AppColors.textPrimary,
fontSize: 18,
fontWeight: FontWeight.w600,
),
lib/widgets/sync_status_indicator.dart
+14 -9
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/widgets/sync_status.dart';
class SyncStatusIndicator extends StatelessWidget {
@@ -91,7 +92,11 @@ class SyncStatusIndicator extends StatelessWidget {
return Tooltip(
message: _messageForStatus(),
child: _buildIndicator(
const Icon(Icons.cloud_outlined, size: 16, color: Colors.white38),
const Icon(
Icons.cloud_outlined,
size: 16,
color: AppColors.textSubtle,
),
),
);
@@ -101,7 +106,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.sync,
color: const Color.fromARGB(255, 165, 165, 165),
color: AppColors.syncPreparing,
determinate: false,
),
),
@@ -113,7 +118,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.cloud_upload_outlined,
color: const Color.fromARGB(255, 109, 191, 255),
color: AppColors.syncEncrypting,
determinate: true,
),
),
@@ -125,7 +130,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.cloud_upload,
color: const Color.fromARGB(255, 98, 190, 255),
color: AppColors.syncUploading,
determinate: false,
),
),
@@ -137,7 +142,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.cloud_sync_outlined,
color: const Color.fromARGB(255, 150, 150, 150),
color: AppColors.syncWaiting,
determinate: false,
),
),
@@ -149,7 +154,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.cloud_download_outlined,
color: const Color.fromARGB(255, 154, 194, 112),
color: AppColors.syncDecrypting,
determinate: true,
),
),
@@ -161,7 +166,7 @@ class SyncStatusIndicator extends StatelessWidget {
child: _buildIndicator(
_buildStatusBadge(
icon: Icons.sync,
color: const Color.fromARGB(255, 150, 150, 150),
color: AppColors.syncWaiting,
determinate: false,
),
),
@@ -171,7 +176,7 @@ class SyncStatusIndicator extends StatelessWidget {
return Tooltip(
message: _messageForStatus(),
child: _buildIndicator(
const Icon(Icons.check_circle, size: 16, color: Colors.green),
const Icon(Icons.check_circle, size: 16, color: AppColors.success),
),
);
@@ -179,7 +184,7 @@ class SyncStatusIndicator extends StatelessWidget {
return Tooltip(
message: _messageForStatus(),
child: _buildIndicator(
const Icon(Icons.error, size: 16, color: Colors.red),
const Icon(Icons.error, size: 16, color: AppColors.destructive),
),
);
}