mirror of
https://gitlab.com/famedly/fluffychat.git
synced 2024-11-05 03:29:30 +01:00
Merge branch 'krille/material-you' into 'main'
feat: Initial material you support See merge request famedly/fluffychat!872
This commit is contained in:
commit
105106cc22
BIN
assets/colors.png
Normal file
BIN
assets/colors.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
@ -11,7 +11,8 @@ abstract class AppConfig {
|
||||
static String get defaultHomeserver => _defaultHomeserver;
|
||||
static double bubbleSizeFactor = 1;
|
||||
static double fontSizeFactor = 1;
|
||||
static Color chatColor = primaryColor;
|
||||
static const Color chatColor = primaryColor;
|
||||
static Color? colorSchemeSeed;
|
||||
static const double messageFontSize = 15.75;
|
||||
static const bool allowOtherHomeservers = true;
|
||||
static const bool enableRegistration = true;
|
||||
@ -63,7 +64,7 @@ abstract class AppConfig {
|
||||
static void loadFromJson(Map<String, dynamic> json) {
|
||||
if (json['chat_color'] != null) {
|
||||
try {
|
||||
chatColor = Color(json['application_name']);
|
||||
colorSchemeSeed = Color(json['application_name']);
|
||||
} catch (e) {
|
||||
Logs().w(
|
||||
'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"',
|
||||
|
@ -1,4 +1,3 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
@ -23,6 +22,9 @@ abstract class FluffyThemes {
|
||||
Widget? prefixIcon,
|
||||
}) =>
|
||||
InputDecoration(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
fillColor: Colors.white.withAlpha(200),
|
||||
labelText: labelText,
|
||||
hintText: hintText,
|
||||
@ -74,17 +76,9 @@ abstract class FluffyThemes {
|
||||
|
||||
static ThemeData get light => ThemeData(
|
||||
visualDensity: VisualDensity.standard,
|
||||
primaryColorDark: Colors.white,
|
||||
primaryColorLight: const Color(0xff121212),
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
primaryColor: AppConfig.chatColor,
|
||||
colorScheme: ThemeData.light().colorScheme.copyWith(
|
||||
primary: AppConfig.chatColor,
|
||||
secondary: AppConfig.chatColor,
|
||||
surface: FluffyThemes.lighten(AppConfig.chatColor, 0.535),
|
||||
),
|
||||
backgroundColor: Colors.white,
|
||||
secondaryHeaderColor: Colors.blueGrey.shade50,
|
||||
colorSchemeSeed: AppConfig.colorSchemeSeed,
|
||||
scaffoldBackgroundColor: Colors.white,
|
||||
textTheme: PlatformInfos.isDesktop
|
||||
? Typography.material2018().black.merge(fallbackTextTheme)
|
||||
@ -101,54 +95,23 @@ abstract class FluffyThemes {
|
||||
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
|
||||
},
|
||||
),
|
||||
dialogTheme: DialogTheme(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
),
|
||||
popupMenuTheme: PopupMenuThemeData(
|
||||
elevation: 4,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
),
|
||||
floatingActionButtonTheme: FloatingActionButtonThemeData(
|
||||
backgroundColor: AppConfig.chatColor,
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
dividerColor: Colors.blueGrey.shade50,
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: AppConfig.chatColor,
|
||||
onPrimary: Colors.white,
|
||||
textStyle: const TextStyle(fontSize: 16),
|
||||
elevation: 6,
|
||||
shadowColor: const Color(0x44000000),
|
||||
minimumSize: const Size.fromHeight(48),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
),
|
||||
cardTheme: CardTheme(
|
||||
cardTheme: const CardTheme(
|
||||
elevation: 6,
|
||||
shadowColor: const Color(0x44000000),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
// shadowColor: Color(0x44000000),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
borderSide: BorderSide(
|
||||
color: lighten(AppConfig.chatColor, .51),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
border: const UnderlineInputBorder(borderSide: BorderSide(width: 1)),
|
||||
filled: true,
|
||||
fillColor: Colors.blueGrey.shade50,
|
||||
),
|
||||
@ -156,49 +119,22 @@ abstract class FluffyThemes {
|
||||
elevation: 6,
|
||||
shadowColor: Color(0x44000000),
|
||||
systemOverlayStyle: SystemUiOverlayStyle.dark,
|
||||
surfaceTintColor: Colors.white,
|
||||
backgroundColor: Colors.white,
|
||||
titleTextStyle: TextStyle(
|
||||
color: Colors.black,
|
||||
fontSize: 20,
|
||||
),
|
||||
iconTheme: IconThemeData(color: Colors.black),
|
||||
),
|
||||
);
|
||||
|
||||
static ThemeData get dark => ThemeData.dark().copyWith(
|
||||
static ThemeData get dark => ThemeData(
|
||||
visualDensity: VisualDensity.standard,
|
||||
primaryColorDark: const Color(0xff121212),
|
||||
primaryColorLight: Colors.white,
|
||||
primaryColor: AppConfig.chatColor,
|
||||
errorColor: const Color(0xFFCF6679),
|
||||
backgroundColor: Colors.black,
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
colorSchemeSeed: AppConfig.colorSchemeSeed,
|
||||
scaffoldBackgroundColor: Colors.black,
|
||||
colorScheme: ThemeData.dark().colorScheme.copyWith(
|
||||
primary: FluffyThemes.lighten(AppConfig.chatColor, 0.33),
|
||||
secondary: FluffyThemes.lighten(AppConfig.chatColor, 0.33),
|
||||
surface: FluffyThemes.darken(AppConfig.chatColor, 0.35),
|
||||
),
|
||||
secondaryHeaderColor: Colors.blueGrey.shade900,
|
||||
textTheme: PlatformInfos.isDesktop
|
||||
? Typography.material2018().white.merge(fallbackTextTheme)
|
||||
: null,
|
||||
dialogTheme: DialogTheme(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
),
|
||||
popupMenuTheme: PopupMenuThemeData(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
),
|
||||
cardTheme: CardTheme(
|
||||
elevation: 7,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
),
|
||||
snackBarTheme:
|
||||
const SnackBarThemeData(behavior: SnackBarBehavior.floating),
|
||||
pageTransitionsTheme: const PageTransitionsTheme(
|
||||
builders: {
|
||||
TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
|
||||
@ -209,48 +145,19 @@ abstract class FluffyThemes {
|
||||
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
|
||||
},
|
||||
),
|
||||
floatingActionButtonTheme: FloatingActionButtonThemeData(
|
||||
backgroundColor: AppConfig.chatColor,
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
|
||||
filled: true,
|
||||
fillColor: Colors.blueGrey.shade900,
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
borderSide: BorderSide(
|
||||
color: FluffyThemes.darken(AppConfig.chatColor, .31),
|
||||
),
|
||||
),
|
||||
),
|
||||
dividerColor: Colors.blueGrey.shade600,
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: AppConfig.chatColor,
|
||||
onPrimary: Colors.white,
|
||||
minimumSize: const Size.fromHeight(48),
|
||||
textStyle: const TextStyle(fontSize: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
),
|
||||
snackBarTheme:
|
||||
const SnackBarThemeData(behavior: SnackBarBehavior.floating),
|
||||
appBarTheme: const AppBarTheme(
|
||||
elevation: 6,
|
||||
systemOverlayStyle: SystemUiOverlayStyle.light,
|
||||
backgroundColor: Color(0xff1D1D1D),
|
||||
titleTextStyle: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 20,
|
||||
),
|
||||
iconTheme: IconThemeData(color: Colors.white),
|
||||
),
|
||||
cupertinoOverrideTheme: const CupertinoThemeData(
|
||||
textTheme: CupertinoTextThemeData(),
|
||||
),
|
||||
);
|
||||
|
||||
|
@ -194,13 +194,8 @@ class ChatView extends StatelessWidget {
|
||||
padding: const EdgeInsets.only(bottom: 56.0),
|
||||
child: FloatingActionButton(
|
||||
onPressed: controller.scrollDown,
|
||||
foregroundColor:
|
||||
Theme.of(context).textTheme.bodyText2!.color,
|
||||
backgroundColor:
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
mini: true,
|
||||
child: Icon(Icons.arrow_downward_outlined,
|
||||
color: Theme.of(context).primaryColor),
|
||||
child: const Icon(Icons.arrow_downward_outlined),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
|
@ -65,7 +65,7 @@ class Message extends StatelessWidget {
|
||||
final client = Matrix.of(context).client;
|
||||
final ownMessage = event.senderId == client.userID;
|
||||
final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
|
||||
var color = Theme.of(context).appBarTheme.backgroundColor;
|
||||
var color = Theme.of(context).scaffoldBackgroundColor;
|
||||
final displayTime = event.type == EventTypes.RoomCreate ||
|
||||
nextEvent == null ||
|
||||
!event.originServerTs.sameEnvironment(nextEvent!.originServerTs);
|
||||
@ -78,10 +78,8 @@ class Message extends StatelessWidget {
|
||||
? nextEvent!.sender.id == event.sender.id && !displayTime
|
||||
: false;
|
||||
final textColor = ownMessage
|
||||
? Colors.white
|
||||
: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.white
|
||||
: Colors.black;
|
||||
? Theme.of(context).colorScheme.onPrimary
|
||||
: Theme.of(context).colorScheme.onBackground;
|
||||
final rowMainAxisAlignment =
|
||||
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
|
||||
|
||||
@ -105,7 +103,7 @@ class Message extends StatelessWidget {
|
||||
if (ownMessage) {
|
||||
color = displayEvent.status.isError
|
||||
? Colors.redAccent
|
||||
: Theme.of(context).primaryColor;
|
||||
: Theme.of(context).colorScheme.primary;
|
||||
}
|
||||
|
||||
final rowChildren = <Widget>[
|
||||
|
@ -74,13 +74,9 @@ class ChatDetailsView extends StatelessWidget {
|
||||
ChatSettingsPopupMenu(room, false)
|
||||
],
|
||||
title: Text(
|
||||
room.getLocalizedDisplayname(
|
||||
MatrixLocals(L10n.of(context)!)),
|
||||
style: TextStyle(
|
||||
color: Theme.of(context)
|
||||
.appBarTheme
|
||||
.titleTextStyle!
|
||||
.color)),
|
||||
room.getLocalizedDisplayname(
|
||||
MatrixLocals(L10n.of(context)!)),
|
||||
),
|
||||
backgroundColor:
|
||||
Theme.of(context).appBarTheme.backgroundColor,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
|
@ -253,9 +253,6 @@ class _StoryButton extends StatelessWidget {
|
||||
height: 24,
|
||||
child: FloatingActionButton.small(
|
||||
heroTag: null,
|
||||
backgroundColor:
|
||||
Theme.of(context).backgroundColor,
|
||||
foregroundColor: Theme.of(context).primaryColor,
|
||||
onPressed: () =>
|
||||
VRouter.of(context).to('/stories/create'),
|
||||
child: const Icon(
|
||||
@ -269,7 +266,7 @@ class _StoryButton extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Spacer(),
|
||||
Text(
|
||||
profile.displayName ?? '',
|
||||
maxLines: 1,
|
||||
@ -279,7 +276,7 @@ class _StoryButton extends StatelessWidget {
|
||||
fontWeight: unread ? FontWeight.bold : null,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Spacer(),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -37,12 +37,12 @@ class SettingsStyleController extends State<SettingsStyle> {
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void setChatColor(Color color) async {
|
||||
void setChatColor(Color? color) async {
|
||||
await Matrix.of(context).store.setItem(
|
||||
SettingKeys.chatColor,
|
||||
color.value.toString(),
|
||||
color?.value.toString(),
|
||||
);
|
||||
AppConfig.chatColor = color;
|
||||
AppConfig.colorSchemeSeed = color;
|
||||
AdaptiveTheme.of(context).setTheme(
|
||||
light: FluffyThemes.light,
|
||||
dark: FluffyThemes.dark,
|
||||
@ -51,13 +51,14 @@ class SettingsStyleController extends State<SettingsStyle> {
|
||||
|
||||
AdaptiveThemeMode? currentTheme;
|
||||
|
||||
static final List<Color> customColors = [
|
||||
static final List<Color?> customColors = [
|
||||
AppConfig.primaryColor,
|
||||
Colors.blue.shade800,
|
||||
Colors.green.shade800,
|
||||
Colors.orange.shade900,
|
||||
Colors.orange.shade700,
|
||||
Colors.pink.shade700,
|
||||
Colors.blueGrey.shade600,
|
||||
null,
|
||||
];
|
||||
|
||||
void switchTheme(AdaptiveThemeMode? newTheme) {
|
||||
|
@ -23,38 +23,61 @@ class SettingsStyleView extends StatelessWidget {
|
||||
leading: const BackButton(),
|
||||
title: Text(L10n.of(context)!.changeTheme),
|
||||
),
|
||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
||||
body: MaxWidthBody(
|
||||
withScrolling: true,
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
children: SettingsStyleController.customColors
|
||||
.map(
|
||||
(color) => Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(colorPickerSize),
|
||||
onTap: () => controller.setChatColor(color),
|
||||
child: Material(
|
||||
color: color,
|
||||
elevation: 6,
|
||||
SizedBox(
|
||||
height: colorPickerSize + 24,
|
||||
child: ListView(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: Axis.horizontal,
|
||||
children: SettingsStyleController.customColors
|
||||
.map(
|
||||
(color) => Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(colorPickerSize),
|
||||
child: SizedBox(
|
||||
width: colorPickerSize,
|
||||
height: colorPickerSize,
|
||||
child: AppConfig.chatColor.value == color.value
|
||||
? const Center(
|
||||
child: Icon(
|
||||
Icons.check,
|
||||
size: 16,
|
||||
color: Colors.white,
|
||||
))
|
||||
: null),
|
||||
onTap: () => controller.setChatColor(color),
|
||||
child: color == null
|
||||
? Material(
|
||||
elevation:
|
||||
AppConfig.colorSchemeSeed?.value == null
|
||||
? 100
|
||||
: 0,
|
||||
shadowColor: AppConfig.colorSchemeSeed,
|
||||
borderRadius:
|
||||
BorderRadius.circular(colorPickerSize),
|
||||
child: Image.asset(
|
||||
'assets/colors.png',
|
||||
width: colorPickerSize,
|
||||
height: colorPickerSize,
|
||||
),
|
||||
)
|
||||
: Material(
|
||||
color: color,
|
||||
elevation: 6,
|
||||
borderRadius:
|
||||
BorderRadius.circular(colorPickerSize),
|
||||
child: SizedBox(
|
||||
width: colorPickerSize,
|
||||
height: colorPickerSize,
|
||||
child: AppConfig.colorSchemeSeed?.value ==
|
||||
color.value
|
||||
? const Center(
|
||||
child: Icon(
|
||||
Icons.check,
|
||||
size: 16,
|
||||
color: Colors.white,
|
||||
))
|
||||
: null),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
RadioListTile<AdaptiveThemeMode>(
|
||||
@ -122,7 +145,7 @@ class SettingsStyleView extends StatelessWidget {
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Material(
|
||||
color: Theme.of(context).primaryColor,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
elevation: 6,
|
||||
shadowColor:
|
||||
Theme.of(context).secondaryHeaderColor.withAlpha(100),
|
||||
@ -132,7 +155,7 @@ class SettingsStyleView extends StatelessWidget {
|
||||
child: Text(
|
||||
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize:
|
||||
AppConfig.messageFontSize * AppConfig.fontSizeFactor,
|
||||
),
|
||||
|
@ -502,7 +502,7 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
|
||||
.then((value) => AppConfig.experimentalVoip = value);
|
||||
store.getItem(SettingKeys.chatColor).then((value) {
|
||||
if (value != null && int.tryParse(value) != null) {
|
||||
AppConfig.chatColor = Color(int.parse(value));
|
||||
AppConfig.colorSchemeSeed = Color(int.parse(value));
|
||||
AdaptiveTheme.of(context).setTheme(
|
||||
light: FluffyThemes.light,
|
||||
dark: FluffyThemes.dark,
|
||||
|
Loading…
Reference in New Issue
Block a user