Vaibhav Surve
04da062f4f
- Updated various screens to replace hardcoded color values with contentTheme.buttonColor for consistency. - Changed icons in NotesView, UserDocumentsPage, EmployeeDetailPage, EmployeesScreen, ExpenseDetailScreen, and others to use updated icon styles. - Refactored OfflineScreen and TenantSelectionScreen to utilize new wave background widget. - Introduced ThemeEditorWidget in UserProfileBar for dynamic theme adjustments. - Enhanced logout confirmation dialog styling to align with new theme colors.
291 lines
9.0 KiB
Dart
291 lines
9.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:marco/helpers/theme/theme_customizer.dart';
|
|
|
|
enum LeftBarThemeType { light, dark }
|
|
|
|
enum ContentThemeType { light, dark }
|
|
|
|
enum RightBarThemeType { light, dark }
|
|
|
|
enum ContentThemeColor {
|
|
primary,
|
|
secondary,
|
|
success,
|
|
info,
|
|
warning,
|
|
danger,
|
|
light,
|
|
dark,
|
|
pink,
|
|
red,
|
|
brand,
|
|
button;
|
|
|
|
Color get color {
|
|
return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]
|
|
?['color']) ??
|
|
Colors.black;
|
|
}
|
|
|
|
Color get onColor {
|
|
return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]
|
|
?['onColor']) ??
|
|
Colors.white;
|
|
}
|
|
}
|
|
|
|
class LeftBarTheme {
|
|
final Color background, onBackground;
|
|
final Color labelColor;
|
|
final Color activeItemColor, activeItemBackground;
|
|
|
|
LeftBarTheme({
|
|
this.background = const Color(0xffffffff),
|
|
this.onBackground = const Color(0xff313a46),
|
|
this.labelColor = const Color(0xff663399),
|
|
this.activeItemColor = const Color(0xff663399),
|
|
this.activeItemBackground = const Color(0x15663399),
|
|
});
|
|
|
|
static final LeftBarTheme lightLeftBarTheme = LeftBarTheme();
|
|
|
|
static final LeftBarTheme darkLeftBarTheme = LeftBarTheme(
|
|
background: const Color(0xff282c32),
|
|
onBackground: const Color(0xffdcdcdc),
|
|
labelColor: const Color(0xff32BFAE),
|
|
activeItemBackground: const Color(0x1532BFAE),
|
|
activeItemColor: const Color(0xff32BFAE));
|
|
|
|
static LeftBarTheme getThemeFromType(LeftBarThemeType leftBarThemeType) {
|
|
switch (leftBarThemeType) {
|
|
case LeftBarThemeType.light:
|
|
return lightLeftBarTheme;
|
|
case LeftBarThemeType.dark:
|
|
return darkLeftBarTheme;
|
|
}
|
|
}
|
|
}
|
|
|
|
class TopBarTheme {
|
|
final Color background;
|
|
final Color onBackground;
|
|
|
|
TopBarTheme({
|
|
this.background = const Color(0xffffffff),
|
|
this.onBackground = const Color(0xff313a46),
|
|
});
|
|
|
|
static final TopBarTheme lightTopBarTheme = TopBarTheme();
|
|
|
|
static final TopBarTheme darkTopBarTheme = TopBarTheme(
|
|
background: const Color(0xff2c3036),
|
|
onBackground: const Color(0xffdcdcdc));
|
|
}
|
|
|
|
class RightBarTheme {
|
|
final Color disabled, onDisabled;
|
|
final Color activeSwitchBorderColor, inactiveSwitchBorderColor;
|
|
|
|
RightBarTheme({
|
|
this.disabled = const Color(0xffffffff),
|
|
this.activeSwitchBorderColor = const Color(0xff727cf5),
|
|
this.inactiveSwitchBorderColor = const Color(0xffdee2e6),
|
|
this.onDisabled = const Color(0xff313a46),
|
|
});
|
|
|
|
static final RightBarTheme lightRightBarTheme = RightBarTheme(
|
|
disabled: const Color(0xffffffff),
|
|
onDisabled: const Color(0xffdee2e6),
|
|
activeSwitchBorderColor: const Color(0xff727cf5),
|
|
inactiveSwitchBorderColor: const Color(0xffdee2e6));
|
|
|
|
static final RightBarTheme darkRightBarTheme = RightBarTheme(
|
|
disabled: const Color(0xff444d57),
|
|
activeSwitchBorderColor: const Color(0xff727cf5),
|
|
inactiveSwitchBorderColor: const Color(0xffdee2e6),
|
|
onDisabled: const Color(0xff515a65));
|
|
}
|
|
|
|
class ContentTheme {
|
|
final Color background, onBackground;
|
|
|
|
final Color primary, onPrimary;
|
|
final Color secondary, onSecondary;
|
|
final Color success, onSuccess;
|
|
final Color danger, onDanger;
|
|
final Color warning, onWarning;
|
|
final Color info, onInfo;
|
|
final Color light, onLight;
|
|
final Color dark, onDark;
|
|
final Color pink, onPink;
|
|
final Color red, onRed;
|
|
|
|
final Color brandColor, onBrandColor;
|
|
final Color buttonColor, onButtonColor;
|
|
|
|
final Color cardBackground, cardShadow, cardBorder, cardText, cardTextMuted;
|
|
final Color title;
|
|
final Color disabled, onDisabled;
|
|
|
|
Map<ContentThemeColor, Map<String, Color>> get getMappedIntoThemeColor {
|
|
var c = this;
|
|
return {
|
|
ContentThemeColor.primary: {'color': c.primary, 'onColor': c.onPrimary},
|
|
ContentThemeColor.secondary: {
|
|
'color': c.secondary,
|
|
'onColor': c.onSecondary
|
|
},
|
|
ContentThemeColor.success: {'color': c.success, 'onColor': c.onSuccess},
|
|
ContentThemeColor.info: {'color': c.info, 'onColor': c.onInfo},
|
|
ContentThemeColor.warning: {'color': c.warning, 'onColor': c.onWarning},
|
|
ContentThemeColor.danger: {'color': c.danger, 'onColor': c.onDanger},
|
|
ContentThemeColor.light: {'color': c.light, 'onColor': c.onLight},
|
|
ContentThemeColor.dark: {'color': c.dark, 'onColor': c.onDark},
|
|
ContentThemeColor.pink: {'color': c.pink, 'onColor': c.onPink},
|
|
ContentThemeColor.red: {'color': c.red, 'onColor': c.onRed},
|
|
ContentThemeColor.brand: {
|
|
'color': c.brandColor,
|
|
'onColor': c.onBrandColor
|
|
},
|
|
ContentThemeColor.button: {
|
|
'color': c.buttonColor,
|
|
'onColor': c.onButtonColor
|
|
},
|
|
};
|
|
}
|
|
|
|
ContentTheme({
|
|
this.background = const Color(0xfffafbfe),
|
|
this.onBackground = const Color(0xff313a46),
|
|
this.primary = const Color(0xFF49BF3C),
|
|
this.onPrimary = Colors.white,
|
|
this.secondary = const Color(0xff6c757d),
|
|
this.onSecondary = Colors.white,
|
|
this.success = const Color(0xff00be82),
|
|
this.onSuccess = Colors.white,
|
|
this.danger = const Color(0xffdc3545),
|
|
this.onDanger = Colors.white,
|
|
this.warning = const Color(0xffffc107),
|
|
this.onWarning = const Color(0xff313a46),
|
|
this.info = const Color(0xff0dcaf0),
|
|
this.onInfo = Colors.white,
|
|
this.light = const Color(0xffeef2f7),
|
|
this.onLight = const Color(0xff313a46),
|
|
this.dark = const Color(0xff313a46),
|
|
this.onDark = Colors.white,
|
|
this.pink = const Color(0xffFF1087),
|
|
this.onPink = Colors.white,
|
|
this.red = const Color(0xffFF0000),
|
|
this.onRed = Colors.white,
|
|
this.brandColor = const Color(0xffff0000),
|
|
this.onBrandColor = Colors.white,
|
|
this.buttonColor = const Color(0xFF2196F3),
|
|
this.onButtonColor = Colors.white,
|
|
this.cardBackground = const Color(0xffffffff),
|
|
this.cardShadow = const Color(0xffffffff),
|
|
this.cardBorder = const Color(0xffffffff),
|
|
this.cardText = const Color(0xff6c757d),
|
|
this.cardTextMuted = const Color(0xff98a6ad),
|
|
this.title = const Color(0xff6c757d),
|
|
this.disabled = const Color(0xffffffff),
|
|
this.onDisabled = const Color(0xffffffff),
|
|
});
|
|
|
|
// copyWith for dynamic updates
|
|
ContentTheme copyWith({
|
|
Color? primary,
|
|
Color? brandColor,
|
|
Color? buttonColor,
|
|
}) {
|
|
return ContentTheme(
|
|
primary: primary ?? this.primary,
|
|
brandColor: brandColor ?? this.brandColor,
|
|
buttonColor: buttonColor ?? this.buttonColor,
|
|
);
|
|
}
|
|
|
|
static final ContentTheme lightContentTheme = ContentTheme(
|
|
primary: Colors.indigo,
|
|
background: const Color(0xfffafbfe),
|
|
onBackground: const Color(0xff313a46),
|
|
cardBorder: const Color(0xffe8ecf1),
|
|
cardBackground: const Color(0xffffffff),
|
|
cardShadow: const Color(0xff9aa1ab),
|
|
cardText: const Color(0xff6c757d),
|
|
title: const Color(0xff6c757d),
|
|
cardTextMuted: const Color(0xff98a6ad),
|
|
brandColor: const Color(0xffff0000),
|
|
onBrandColor: Colors.white,
|
|
);
|
|
|
|
static final ContentTheme darkContentTheme = ContentTheme(
|
|
primary: Colors.indigo,
|
|
background: const Color(0xff343a40),
|
|
onBackground: const Color(0xffF1F1F2),
|
|
disabled: const Color(0xff444d57),
|
|
onDisabled: const Color(0xff515a65),
|
|
cardBorder: const Color(0xff464f5b),
|
|
cardBackground: const Color(0xff37404a),
|
|
cardShadow: const Color(0xff01030E),
|
|
cardText: const Color(0xffaab8c5),
|
|
title: const Color(0xffaab8c5),
|
|
cardTextMuted: const Color(0xff8391a2),
|
|
brandColor: const Color(0xffff0000),
|
|
onBrandColor: Colors.white,
|
|
);
|
|
}
|
|
|
|
class AdminTheme {
|
|
final LeftBarTheme leftBarTheme;
|
|
final RightBarTheme rightBarTheme;
|
|
final TopBarTheme topBarTheme;
|
|
final ContentTheme contentTheme;
|
|
|
|
AdminTheme({
|
|
required this.leftBarTheme,
|
|
required this.topBarTheme,
|
|
required this.rightBarTheme,
|
|
required this.contentTheme,
|
|
});
|
|
|
|
static AdminTheme theme = AdminTheme(
|
|
leftBarTheme: LeftBarTheme.lightLeftBarTheme,
|
|
topBarTheme: TopBarTheme.lightTopBarTheme,
|
|
rightBarTheme: RightBarTheme.lightRightBarTheme,
|
|
contentTheme: ContentTheme.lightContentTheme);
|
|
|
|
static void setTheme() {
|
|
theme = AdminTheme(
|
|
leftBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? LeftBarTheme.darkLeftBarTheme
|
|
: LeftBarTheme.lightLeftBarTheme,
|
|
topBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? TopBarTheme.darkTopBarTheme
|
|
: TopBarTheme.lightTopBarTheme,
|
|
rightBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? RightBarTheme.darkRightBarTheme
|
|
: RightBarTheme.lightRightBarTheme,
|
|
contentTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? ContentTheme.darkContentTheme
|
|
: ContentTheme.lightContentTheme);
|
|
}
|
|
|
|
// Dynamic theme color update
|
|
static void updateThemeColors({
|
|
Color? primary,
|
|
Color? brandColor,
|
|
Color? buttonColor,
|
|
}) {
|
|
theme = AdminTheme(
|
|
leftBarTheme: theme.leftBarTheme,
|
|
topBarTheme: theme.topBarTheme,
|
|
rightBarTheme: theme.rightBarTheme,
|
|
contentTheme: theme.contentTheme.copyWith(
|
|
primary: primary,
|
|
brandColor: brandColor,
|
|
buttonColor: buttonColor,
|
|
),
|
|
);
|
|
}
|
|
}
|