284 lines
9.1 KiB
Dart
284 lines
9.1 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 }
|
|
|
|
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),
|
|
);
|
|
}
|
|
|
|
enum ContentThemeColor {
|
|
primary,
|
|
secondary,
|
|
success,
|
|
info,
|
|
warning,
|
|
danger,
|
|
light,
|
|
dark,
|
|
pink,
|
|
green,
|
|
red;
|
|
|
|
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 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 purple, onPurple;
|
|
final Color pink, onPink;
|
|
final Color red, onRed;
|
|
|
|
final Color cardBackground, cardShadow, cardBorder, cardText, cardTextMuted;
|
|
final Color title;
|
|
final Color disabled, onDisabled;
|
|
|
|
ContentTheme({
|
|
this.background = const Color(0xfffafbfe),
|
|
this.onBackground = const Color(0xffF1F1F2),
|
|
this.primary = const Color(0xff663399),
|
|
this.onPrimary = const Color(0xffffffff),
|
|
this.secondary = const Color(0xff6c757d),
|
|
this.onSecondary = const Color(0xffffffff),
|
|
this.success = const Color(0xff00be82),
|
|
this.onSuccess = const Color(0xffffffff),
|
|
this.danger = const Color(0xffdc3545),
|
|
this.onDanger = const Color(0xffffffff),
|
|
this.warning = const Color(0xffffc107),
|
|
this.onWarning = const Color(0xff313a46),
|
|
this.info = const Color(0xff0dcaf0),
|
|
this.onInfo = const Color(0xffffffff),
|
|
this.light = const Color(0xffeef2f7),
|
|
this.onLight = const Color(0xff313a46),
|
|
this.dark = const Color(0xff313a46),
|
|
this.onDark = const Color(0xffffffff),
|
|
this.purple = const Color(0xff800080),
|
|
this.onPurple = const Color(0xffffffff),
|
|
this.pink = const Color(0xffff1087),
|
|
this.onPink = const Color(0xffffffff),
|
|
this.red = const Color(0xffff0000),
|
|
this.onRed = const Color(0xffffffff),
|
|
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),
|
|
});
|
|
|
|
Map<ContentThemeColor, Map<String, Color>> get getMappedIntoThemeColor {
|
|
return {
|
|
ContentThemeColor.primary: {'color': primary, 'onColor': onPrimary},
|
|
ContentThemeColor.secondary: {'color': secondary, 'onColor': onSecondary},
|
|
ContentThemeColor.success: {'color': success, 'onColor': onSuccess},
|
|
ContentThemeColor.info: {'color': info, 'onColor': onInfo},
|
|
ContentThemeColor.warning: {'color': warning, 'onColor': onWarning},
|
|
ContentThemeColor.danger: {'color': danger, 'onColor': onDanger},
|
|
ContentThemeColor.light: {'color': light, 'onColor': onLight},
|
|
ContentThemeColor.dark: {'color': dark, 'onColor': onDark},
|
|
ContentThemeColor.pink: {'color': pink, 'onColor': onPink},
|
|
ContentThemeColor.red: {'color': red, 'onColor': onRed},
|
|
};
|
|
}
|
|
|
|
ContentTheme copyWith({
|
|
Color? primary,
|
|
Color? onPrimary,
|
|
Color? secondary,
|
|
Color? onSecondary,
|
|
Color? background,
|
|
Color? onBackground,
|
|
}) {
|
|
return ContentTheme(
|
|
primary: primary ?? this.primary,
|
|
onPrimary: onPrimary ?? this.onPrimary,
|
|
secondary: secondary ?? this.secondary,
|
|
onSecondary: onSecondary ?? this.onSecondary,
|
|
background: background ?? this.background,
|
|
onBackground: onBackground ?? this.onBackground,
|
|
success: success,
|
|
onSuccess: onSuccess,
|
|
danger: danger,
|
|
onDanger: onDanger,
|
|
warning: warning,
|
|
onWarning: onWarning,
|
|
info: info,
|
|
onInfo: onInfo,
|
|
light: light,
|
|
onLight: onLight,
|
|
dark: dark,
|
|
onDark: onDark,
|
|
purple: purple,
|
|
onPurple: onPurple,
|
|
pink: pink,
|
|
onPink: onPink,
|
|
red: red,
|
|
onRed: onRed,
|
|
cardBackground: cardBackground,
|
|
cardShadow: cardShadow,
|
|
cardBorder: cardBorder,
|
|
cardText: cardText,
|
|
cardTextMuted: cardTextMuted,
|
|
title: title,
|
|
disabled: disabled,
|
|
onDisabled: onDisabled,
|
|
);
|
|
}
|
|
|
|
static ContentTheme withColorTheme(
|
|
ColorThemeType colorTheme, {
|
|
ThemeMode mode = ThemeMode.light,
|
|
}) {
|
|
final baseTheme = mode == ThemeMode.light
|
|
? ContentTheme()
|
|
: ContentTheme(
|
|
primary: const Color(0xff32BFAE),
|
|
background: const Color(0xff343a40),
|
|
onBackground: const Color(0xffF1F1F2),
|
|
cardBorder: const Color(0xff464f5b),
|
|
cardBackground: const Color(0xff37404a),
|
|
cardShadow: const Color(0xff01030E),
|
|
cardText: const Color(0xffaab8c5),
|
|
title: const Color(0xffaab8c5),
|
|
cardTextMuted: const Color(0xff8391a2),
|
|
);
|
|
|
|
switch (colorTheme) {
|
|
case ColorThemeType.purple:
|
|
return baseTheme.copyWith(primary: const Color(0xff663399), onPrimary: Colors.white);
|
|
case ColorThemeType.red:
|
|
return baseTheme.copyWith(primary: const Color(0xffff0000), onPrimary: Colors.white);
|
|
case ColorThemeType.green:
|
|
return baseTheme.copyWith(primary: const Color(0xff49BF3C), onPrimary: Colors.white);
|
|
case ColorThemeType.blue:
|
|
return baseTheme.copyWith(primary: const Color(0xff007bff), onPrimary: Colors.white);
|
|
}
|
|
}
|
|
}
|
|
|
|
enum ColorThemeType { purple, red, green, blue }
|
|
|
|
class AdminTheme {
|
|
final ContentTheme contentTheme;
|
|
final LeftBarTheme leftBarTheme;
|
|
final RightBarTheme rightBarTheme;
|
|
final TopBarTheme topBarTheme;
|
|
|
|
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.withColorTheme(ColorThemeType.green, mode: ThemeMode.light),
|
|
);
|
|
|
|
static void setTheme() {
|
|
final themeMode = ThemeCustomizer.instance.theme;
|
|
final colorTheme = ThemeCustomizer.instance.colorTheme;
|
|
|
|
theme = AdminTheme(
|
|
leftBarTheme: themeMode == ThemeMode.dark ? LeftBarTheme.darkLeftBarTheme : LeftBarTheme.lightLeftBarTheme,
|
|
topBarTheme: themeMode == ThemeMode.dark ? TopBarTheme.darkTopBarTheme : TopBarTheme.lightTopBarTheme,
|
|
rightBarTheme: themeMode == ThemeMode.dark ? RightBarTheme.darkRightBarTheme : RightBarTheme.lightRightBarTheme,
|
|
contentTheme: ContentTheme.withColorTheme(colorTheme, mode: themeMode),
|
|
);
|
|
}
|
|
}
|