refactor: Theme colors

This commit is contained in:
Christian Pauly 2021-02-07 09:31:24 +01:00
parent ddd10d189d
commit fe13778eb6
4 changed files with 35 additions and 17 deletions

View File

@ -34,7 +34,7 @@ abstract class FluffyThemes {
primaryColor: AppConfig.primaryColor, primaryColor: AppConfig.primaryColor,
accentColor: AppConfig.primaryColor, accentColor: AppConfig.primaryColor,
backgroundColor: Colors.white, backgroundColor: Colors.white,
secondaryHeaderColor: AppConfig.primaryColor.withAlpha(16), secondaryHeaderColor: lighten(AppConfig.primaryColor, .51),
scaffoldBackgroundColor: Colors.white, scaffoldBackgroundColor: Colors.white,
textTheme: Typography.material2018().black.merge(fallback_text_theme), textTheme: Typography.material2018().black.merge(fallback_text_theme),
snackBarTheme: SnackBarThemeData( snackBarTheme: SnackBarThemeData(
@ -60,11 +60,11 @@ abstract class FluffyThemes {
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide: BorderSide( borderSide: BorderSide(
color: AppConfig.primaryColor.withAlpha(16), color: lighten(AppConfig.primaryColor, .51),
), ),
), ),
filled: true, filled: true,
fillColor: AppConfig.primaryColor.withAlpha(16), fillColor: lighten(AppConfig.primaryColor, .51),
), ),
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
brightness: Brightness.light, brightness: Brightness.light,
@ -87,7 +87,7 @@ abstract class FluffyThemes {
backgroundColor: Colors.black, backgroundColor: Colors.black,
scaffoldBackgroundColor: Colors.black, scaffoldBackgroundColor: Colors.black,
accentColor: AppConfig.primaryColorLight, accentColor: AppConfig.primaryColorLight,
secondaryHeaderColor: AppConfig.primaryColorLight.withAlpha(32), secondaryHeaderColor: FluffyThemes.darken(AppConfig.primaryColorLight, .71),
textTheme: Typography.material2018().white.merge(fallback_text_theme), textTheme: Typography.material2018().white.merge(fallback_text_theme),
dialogTheme: DialogTheme( dialogTheme: DialogTheme(
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@ -107,11 +107,11 @@ abstract class FluffyThemes {
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius)), borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
filled: true, filled: true,
fillColor: AppConfig.primaryColorLight.withAlpha(32), fillColor: FluffyThemes.darken(AppConfig.primaryColorLight, .71),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide: BorderSide( borderSide: BorderSide(
color: AppConfig.primaryColor.withAlpha(16), color: FluffyThemes.darken(AppConfig.primaryColor, .31),
), ),
), ),
), ),
@ -144,4 +144,23 @@ abstract class FluffyThemes {
Theme.of(context).brightness == Brightness.light Theme.of(context).brightness == Brightness.light
? Colors.white ? Colors.white
: Colors.black; : Colors.black;
static Color darken(Color color, [double amount = .1]) {
assert(amount >= 0 && amount <= 1);
final hsl = HSLColor.fromColor(color);
final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
return hslDark.toColor();
}
static Color lighten(Color color, [double amount = .1]) {
assert(amount >= 0 && amount <= 1);
final hsl = HSLColor.fromColor(color);
final hslLight =
hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
return hslLight.toColor();
}
} }

View File

@ -354,7 +354,7 @@ class _SettingsState extends State<Settings> {
title: Text( title: Text(
L10n.of(context).notifications, L10n.of(context).notifications,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -370,7 +370,7 @@ class _SettingsState extends State<Settings> {
title: Text( title: Text(
L10n.of(context).chat, L10n.of(context).chat,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -415,7 +415,7 @@ class _SettingsState extends State<Settings> {
title: Text( title: Text(
L10n.of(context).account, L10n.of(context).account,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -478,7 +478,7 @@ class _SettingsState extends State<Settings> {
title: Text( title: Text(
L10n.of(context).security, L10n.of(context).security,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -514,7 +514,7 @@ class _SettingsState extends State<Settings> {
title: Text( title: Text(
L10n.of(context).about, L10n.of(context).about,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),

View File

@ -209,11 +209,11 @@ class _EmotesSettingsState extends State<EmotesSettings> {
prefixText: ': ', prefixText: ': ',
suffixText: ':', suffixText: ':',
prefixStyle: TextStyle( prefixStyle: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
suffixStyle: TextStyle( suffixStyle: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
border: InputBorder.none, border: InputBorder.none,
@ -272,7 +272,6 @@ class _EmotesSettingsState extends State<EmotesSettings> {
title: Text(L10n.of(context).enableEmotesGlobally), title: Text(L10n.of(context).enableEmotesGlobally),
trailing: Switch( trailing: Switch(
value: isGloballyActive(client), value: isGloballyActive(client),
activeColor: Theme.of(context).primaryColor,
onChanged: (bool newValue) async { onChanged: (bool newValue) async {
await _setIsGloballyActive(context, newValue); await _setIsGloballyActive(context, newValue);
setState(() => null); setState(() => null);
@ -328,11 +327,11 @@ class _EmotesSettingsState extends State<EmotesSettings> {
prefixText: ': ', prefixText: ': ',
suffixText: ':', suffixText: ':',
prefixStyle: TextStyle( prefixStyle: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
suffixStyle: TextStyle( suffixStyle: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
border: InputBorder.none, border: InputBorder.none,

View File

@ -151,7 +151,7 @@ class SettingsNotifications extends StatelessWidget {
title: Text( title: Text(
L10n.of(context).pushRules, L10n.of(context).pushRules,
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),