chat and theme work

This commit is contained in:
Christien Rioux 2023-07-29 10:55:35 -04:00
parent ca6b00e021
commit 96e3251b3b
29 changed files with 729 additions and 389 deletions

View file

@ -1,6 +1,9 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:radix_colors/radix_colors.dart';
import 'theme_service.dart';
enum RadixThemeColor {
scarlet, // tomato + red + violet
babydoll, // crimson + purple + pink
@ -265,174 +268,247 @@ RadixColor _radixColorSteps(
}
}
ColorScheme _radixColorScheme(
// ignore: prefer_expression_function_bodies
Brightness brightness,
RadixThemeColor themeColor) {
late RadixColor primaryScale;
late RadixColor primaryAlphaScale;
late RadixColor secondaryScale;
late RadixColor tertiaryScale;
late RadixColor grayScale;
late RadixColor errorScale;
extension ToScaleColor on RadixColor {
ScaleColor toScale() => ScaleColor(
appBackground: step1,
subtleBackground: step2,
elementBackground: step3,
hoverElementBackground: step4,
activedElementBackground: step5,
subtleBorder: step6,
border: step7,
hoverBorder: step8,
background: step9,
hoverBackground: step10,
subtleText: step11,
text: step12,
);
}
class RadixScheme {
RadixScheme(
{required this.primaryScale,
required this.primaryAlphaScale,
required this.secondaryScale,
required this.tertiaryScale,
required this.grayScale,
required this.errorScale});
RadixColor primaryScale;
RadixColor primaryAlphaScale;
RadixColor secondaryScale;
RadixColor tertiaryScale;
RadixColor grayScale;
RadixColor errorScale;
ScaleScheme toScale() => ScaleScheme(
primaryScale: primaryScale.toScale(),
primaryAlphaScale: primaryAlphaScale.toScale(),
secondaryScale: secondaryScale.toScale(),
tertiaryScale: tertiaryScale.toScale(),
grayScale: grayScale.toScale(),
errorScale: errorScale.toScale(),
);
}
RadixScheme _radixScheme(Brightness brightness, RadixThemeColor themeColor) {
late RadixScheme radixScheme;
switch (themeColor) {
// tomato + red + violet
case RadixThemeColor.scarlet:
primaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.tomato);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.tomato);
secondaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.tomato);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.yellow);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.red),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.tomato),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow));
// crimson + purple + pink
case RadixThemeColor.babydoll:
primaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.crimson);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.crimson);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.purple);
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.pink);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.crimson);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.orange);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.crimson),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
grayScale:
_radixGraySteps(brightness, false, _RadixBaseColor.crimson),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange));
// pink + cyan + plum
case RadixThemeColor.vapor:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.pink);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.pink);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.cyan);
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.plum);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.pink);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.pink),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.cyan),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.plum),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.pink),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
// yellow + amber + orange
case RadixThemeColor.gold:
primaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.yellow);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.yellow);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.amber);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.yellow);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.yellow),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.yellow),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
// grass + orange + brown
case RadixThemeColor.garden:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.grass);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.grass);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.brown);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.grass);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.tomato);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.grass),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.grass),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.grass),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
// green + brown + amber
case RadixThemeColor.forest:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.green);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.green);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.brown);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.amber);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.green);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.tomato);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.green),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.green),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.green),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
// sky + teal + violet
case RadixThemeColor.arctic:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.sky);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.sky);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.teal);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.sky);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.sky),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.sky),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.sky),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
// blue + indigo + mint
case RadixThemeColor.lapis:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.blue);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.blue);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.mint);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.blue);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.blue),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.blue),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.mint),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.blue),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
// violet + purple + indigo
case RadixThemeColor.eggplant:
primaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.violet);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.violet);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.purple);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.violet);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.crimson);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.violet),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.violet),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
// lime + yellow + orange
case RadixThemeColor.lime:
primaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.lime);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.lime);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.yellow);
tertiaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.orange);
grayScale = _radixGraySteps(brightness, false, _RadixBaseColor.lime);
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.lime),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.lime),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.lime),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
// mauve + slate + sage
case RadixThemeColor.grim:
primaryScale = _radixGraySteps(brightness, false, _RadixBaseColor.tomato);
primaryAlphaScale =
_radixColorSteps(brightness, true, _RadixBaseColor.tomato);
secondaryScale =
_radixColorSteps(brightness, false, _RadixBaseColor.indigo);
tertiaryScale = _radixColorSteps(brightness, false, _RadixBaseColor.teal);
grayScale = brightness == Brightness.dark
? RadixColors.dark.gray
: RadixColors.gray;
errorScale = _radixColorSteps(brightness, false, _RadixBaseColor.red);
radixScheme = RadixScheme(
primaryScale:
_radixGraySteps(brightness, false, _RadixBaseColor.tomato),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
grayScale: brightness == Brightness.dark
? RadixColors.dark.gray
: RadixColors.gray,
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
}
return radixScheme;
}
return ColorScheme(
ExtendedColorScheme _radixColorScheme(
Brightness brightness, RadixThemeColor themeColor) {
final radix = _radixScheme(brightness, themeColor);
return ExtendedColorScheme(
scaleScheme: radix.toScale(),
brightness: brightness,
primary: primaryScale.step9,
onPrimary: primaryScale.step12,
primaryContainer: primaryScale.step3,
onPrimaryContainer: primaryScale.step11,
secondary: secondaryScale.step9,
onSecondary: secondaryScale.step12,
secondaryContainer: secondaryScale.step3,
onSecondaryContainer: secondaryScale.step11,
tertiary: tertiaryScale.step9,
onTertiary: tertiaryScale.step12,
tertiaryContainer: tertiaryScale.step3,
onTertiaryContainer: tertiaryScale.step11,
error: errorScale.step9,
onError: errorScale.step12,
errorContainer: errorScale.step3,
onErrorContainer: errorScale.step11,
background: primaryScale.step1, //gray scale?
onBackground: primaryScale.step12,
surface: primaryScale.step2, //gray scale?
onSurface: primaryScale.step11,
surfaceVariant: primaryScale.step3, //gray scale?
onSurfaceVariant: primaryScale.step11,
outline: primaryScale.step7,
outlineVariant: primaryScale.step6,
primary: radix.primaryScale.step9,
onPrimary: radix.primaryScale.step12,
primaryContainer: radix.primaryScale.step4,
onPrimaryContainer: radix.primaryScale.step11,
secondary: radix.secondaryScale.step9,
onSecondary: radix.secondaryScale.step12,
secondaryContainer: radix.secondaryScale.step3,
onSecondaryContainer: radix.secondaryScale.step11,
tertiary: radix.tertiaryScale.step9,
onTertiary: radix.tertiaryScale.step12,
tertiaryContainer: radix.tertiaryScale.step3,
onTertiaryContainer: radix.tertiaryScale.step11,
error: radix.errorScale.step9,
onError: radix.errorScale.step12,
errorContainer: radix.errorScale.step3,
onErrorContainer: radix.errorScale.step11,
background: radix.grayScale.step1,
onBackground: radix.grayScale.step11,
surface: radix.primaryScale.step1,
onSurface: radix.primaryScale.step12,
surfaceVariant: radix.secondaryScale.step2,
onSurfaceVariant: radix.secondaryScale.step11,
outline: radix.primaryScale.step7,
outlineVariant: radix.primaryScale.step6,
shadow: RadixColors.dark.gray.step1,
scrim: primaryScale.step4,
inverseSurface: primaryScale.step11,
onInverseSurface: primaryScale.step2,
inversePrimary: primaryScale.step10,
surfaceTint: primaryAlphaScale.step9,
scrim: radix.primaryScale.step9,
inverseSurface: radix.primaryScale.step11,
onInverseSurface: radix.primaryScale.step2,
inversePrimary: radix.primaryScale.step10,
surfaceTint: radix.primaryAlphaScale.step4,
);
}

View file

@ -1,11 +1,112 @@
// ignore_for_file: always_put_required_named_parameters_first
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../entities/preferences.dart';
import 'radix_generator.dart';
@immutable
class ExtendedColorScheme extends ColorScheme {
const ExtendedColorScheme({
required this.scaleScheme,
required super.brightness,
required super.primary,
required super.onPrimary,
super.primaryContainer,
super.onPrimaryContainer,
required super.secondary,
required super.onSecondary,
super.secondaryContainer,
super.onSecondaryContainer,
super.tertiary,
super.onTertiary,
super.tertiaryContainer,
super.onTertiaryContainer,
required super.error,
required super.onError,
super.errorContainer,
super.onErrorContainer,
required super.background,
required super.onBackground,
required super.surface,
required super.onSurface,
super.surfaceVariant,
super.onSurfaceVariant,
super.outline,
super.outlineVariant,
super.shadow,
super.scrim,
super.inverseSurface,
super.onInverseSurface,
super.inversePrimary,
super.surfaceTint,
});
final ScaleScheme scaleScheme;
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<ScaleScheme>('scales', scaleScheme));
}
}
class ScaleColor {
ScaleColor({
required this.appBackground,
required this.subtleBackground,
required this.elementBackground,
required this.hoverElementBackground,
required this.activedElementBackground,
required this.subtleBorder,
required this.border,
required this.hoverBorder,
required this.background,
required this.hoverBackground,
required this.subtleText,
required this.text,
});
Color appBackground;
Color subtleBackground;
Color elementBackground;
Color hoverElementBackground;
Color activedElementBackground;
Color subtleBorder;
Color border;
Color hoverBorder;
Color background;
Color hoverBackground;
Color subtleText;
Color text;
}
class ScaleScheme {
ScaleScheme(
{required this.primaryScale,
required this.primaryAlphaScale,
required this.secondaryScale,
required this.tertiaryScale,
required this.grayScale,
required this.errorScale});
ScaleColor primaryScale;
ScaleColor primaryAlphaScale;
ScaleColor secondaryScale;
ScaleColor tertiaryScale;
ScaleColor grayScale;
ScaleColor errorScale;
static ScaleScheme of(BuildContext context) =>
(Theme.of(context).colorScheme as ExtendedColorScheme).scaleScheme;
}
////////////////////////////////////////////////////////////////////////
class ThemeService {
ThemeService._();
static late SharedPreferences prefs;