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> 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.purple, 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), ); } }