kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(theme): use material3 monet for colors and remove background color preference

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-03-07 10:38:01 +06:00
parent a1896b43d0
commit 60ede5f92b
7 changed files with 29 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/artist/artist_card.dart
View File

@ -36,7 +36,7 @@ class ArtistCard extends HookConsumerWidget {
blurRadius: 10,
offset: const Offset(0, 3),
spreadRadius: 5,
color: Theme.of(context).shadowColor,
color: Theme.of(context).colorScheme.shadow,
),
ios: null,
macos: null,

24
lib/components/settings/color_scheme_picker_dialog.dart
View File

@ -6,23 +6,6 @@ import 'package:platform_ui/platform_ui.dart';
import 'package:spotube/components/root/sidebar.dart';
import 'package:spotube/provider/user_preferences_provider.dart';
final highContrast = MaterialColor(
const Color.fromARGB(255, 104, 104, 104).value,
const {
50: Colors.white,
100: Color.fromARGB(255, 233, 233, 233),
200: Color.fromARGB(255, 224, 219, 219),
300: Color.fromARGB(255, 207, 207, 207),
400: Color.fromARGB(255, 146, 146, 146),
500: Color.fromARGB(255, 104, 104, 104),
600: Color.fromARGB(255, 78, 78, 78),
700: Color.fromARGB(255, 61, 61, 61),
800: Color.fromARGB(255, 27, 27, 27),
850: Color.fromARGB(255, 20, 20, 20),
900: Colors.black,
},
);
final colorsMap = {
"Red": Colors.red,
"Pink": Colors.pink,
@ -41,9 +24,6 @@ final colorsMap = {
"Orange": Colors.orange,
"DeepOrange": Colors.deepOrange,
"Brown": Colors.brown,
"BlueGrey": Colors.blueGrey,
"Grey": Colors.grey,
"HighContrast": highContrast,
};
enum ColorSchemeType {
@ -59,9 +39,7 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
@override
Widget build(BuildContext context, ref) {
final preferences = ref.watch(userPreferencesProvider);
final scheme = schemeType == ColorSchemeType.accent
? preferences.accentColorScheme
: preferences.backgroundColorScheme;
final scheme = preferences.accentColorScheme;
final active = useState<String>(colorsMap.entries.firstWhere(
(element) {
return scheme.value == element.value.value;

2
lib/components/shared/playbutton_card.dart
View File

@ -46,7 +46,7 @@ class PlaybuttonCard extends HookWidget {
blurRadius: 10,
offset: const Offset(0, 3),
spreadRadius: 5,
color: Theme.of(context).shadowColor,
color: Theme.of(context).colorScheme.shadow,
),
ios: null,
macos: null,

13
lib/main.dart
View File

@ -25,7 +25,6 @@ import 'package:spotube/provider/user_preferences_provider.dart';
import 'package:spotube/services/audio_player.dart';
import 'package:spotube/services/pocketbase.dart';
import 'package:spotube/services/youtube.dart';
import 'package:spotube/themes/dark_theme.dart';
import 'package:spotube/themes/light_theme.dart';
import 'package:spotube/utils/platform.dart';
import 'package:window_manager/window_manager.dart';
@ -260,8 +259,6 @@ class SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
ref.watch(userPreferencesProvider.select((s) => s.themeMode));
final accentMaterialColor =
ref.watch(userPreferencesProvider.select((s) => s.accentColorScheme));
final backgroundMaterialColor = ref
.watch(userPreferencesProvider.select((s) => s.backgroundColorScheme));
/// For enabling hot reload for audio player
useEffect(() {
@ -282,14 +279,8 @@ class SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
builder: (context, child) {
return DragToResizeArea(child: child!);
},
androidTheme: lightTheme(
accentMaterialColor: accentMaterialColor,
backgroundMaterialColor: backgroundMaterialColor,
),
androidDarkTheme: darkTheme(
accentMaterialColor: accentMaterialColor,
backgroundMaterialColor: backgroundMaterialColor,
),
androidTheme: theme(accentMaterialColor, Brightness.light),
androidDarkTheme: theme(accentMaterialColor, Brightness.dark),
linuxTheme: linuxTheme,
linuxDarkTheme: linuxDarkTheme,
iosTheme: themeMode == ThemeMode.dark ? iosDarkTheme : iosTheme,

16
lib/pages/settings/settings.dart
View File

@ -235,7 +235,7 @@ class SettingsPage extends HookConsumerWidget {
),
PlatformListTile(
leading: const Icon(SpotubeIcons.palette),
title: const PlatformText("Accent Color Scheme"),
title: const PlatformText("Accent Color"),
contentPadding: const EdgeInsets.symmetric(
horizontal: 15,
vertical: 5,
@ -247,20 +247,6 @@ class SettingsPage extends HookConsumerWidget {
),
onTap: pickColorScheme(ColorSchemeType.accent),
),
PlatformListTile(
leading: const Icon(SpotubeIcons.colorBucket),
title: const PlatformText("Background Color Scheme"),
contentPadding: const EdgeInsets.symmetric(
horizontal: 15,
vertical: 5,
),
trailing: ColorTile(
color: preferences.backgroundColorScheme,
onPressed: pickColorScheme(ColorSchemeType.background),
isActive: true,
),
onTap: pickColorScheme(ColorSchemeType.background),
),
PlatformListTile(
leading: const Icon(SpotubeIcons.album),
title: const PlatformText("Rotating Album Art"),

7
lib/provider/user_preferences_provider.dart
View File

@ -31,7 +31,6 @@ class UserPreferences extends PersistedChangeNotifier {
AudioQuality audioQuality;
MaterialColor accentColorScheme;
MaterialColor backgroundColorScheme;
bool skipSponsorSegments;
String downloadLocation;
@ -49,7 +48,6 @@ class UserPreferences extends PersistedChangeNotifier {
required this.predownload,
this.saveTrackLyrics = false,
this.accentColorScheme = Colors.green,
this.backgroundColorScheme = Colors.grey,
this.checkUpdate = true,
this.audioQuality = AudioQuality.high,
this.skipSponsorSegments = true,
@ -102,7 +100,6 @@ class UserPreferences extends PersistedChangeNotifier {
}
void setBackgroundColorScheme(MaterialColor color) {
backgroundColorScheme = color;
notifyListeners();
updatePersistence();
}
@ -165,9 +162,6 @@ class UserPreferences extends PersistedChangeNotifier {
PrimitiveUtils.getRandomElement(lyricsSecrets);
themeMode = ThemeMode.values[map["themeMode"] ?? 0];
backgroundColorScheme = colorsMap.values
.firstWhereOrNull((e) => e.value == map["backgroundColorScheme"]) ??
backgroundColorScheme;
accentColorScheme = colorsMap.values
.firstWhereOrNull((e) => e.value == map["accentColorScheme"]) ??
accentColorScheme;
@ -193,7 +187,6 @@ class UserPreferences extends PersistedChangeNotifier {
"recommendationMarket": recommendationMarket,
"geniusAccessToken": geniusAccessToken,
"themeMode": themeMode.index,
"backgroundColorScheme": backgroundColorScheme.value,
"accentColorScheme": accentColorScheme.value,
"checkUpdate": checkUpdate,
"audioQuality": audioQuality.index,

135
lib/themes/light_theme.dart
View File

@ -5,130 +5,41 @@ import 'package:macos_ui/macos_ui.dart';
import 'package:spotube/extensions/theme.dart';
import 'package:fluent_ui/fluent_ui.dart' as fluent_ui;
final materialWhite = MaterialColor(Colors.white.value, {
50: Colors.white,
100: Colors.blueGrey[100]!,
200: Colors.white,
300: Colors.white,
400: Colors.blueGrey[300]!,
500: Colors.blueGrey,
600: Colors.white,
700: Colors.grey[700]!,
800: Colors.white,
900: Colors.white,
});
ThemeData lightTheme({
required MaterialColor accentMaterialColor,
required MaterialColor backgroundMaterialColor,
}) {
ThemeData theme(Color seed, Brightness brightness) {
final scheme = ColorScheme.fromSeed(
seedColor: seed,
shadow: Colors.black12,
brightness: brightness,
);
return ThemeData(
useMaterial3: true,
extensions: [
ShimmerColorTheme(
shimmerBackgroundColor: backgroundMaterialColor[200],
shimmerColor: backgroundMaterialColor[300],
)
],
primaryColor: accentMaterialColor,
primarySwatch: accentMaterialColor,
buttonTheme: ButtonThemeData(
buttonColor: accentMaterialColor,
),
shadowColor: Colors.grey[300],
backgroundColor: backgroundMaterialColor[50],
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.grey[850]),
headline1: TextStyle(color: Colors.grey[850]),
headline2: TextStyle(color: Colors.grey[850]),
headline3: TextStyle(color: Colors.grey[850]),
headline4: TextStyle(color: Colors.grey[850]),
headline5: TextStyle(color: Colors.grey[850]),
headline6: TextStyle(color: Colors.grey[850]),
),
colorScheme: scheme,
listTileTheme: ListTileThemeData(
iconColor: Colors.grey[850],
horizontalTitleGap: 0,
iconColor: scheme.onSurface,
),
iconTheme: const IconThemeData(size: 16),
inputDecorationTheme: InputDecorationTheme(
isDense: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
color: accentMaterialColor[400]!,
width: 2.0,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
color: Colors.grey[600]!,
),
),
),
navigationRailTheme: NavigationRailThemeData(
backgroundColor: backgroundMaterialColor[100],
indicatorColor: accentMaterialColor[300],
selectedIconTheme: IconThemeData(
color: accentMaterialColor[850],
size: 18,
),
unselectedIconTheme: IconThemeData(
color: Colors.grey[850],
opacity: 1,
size: 18,
),
unselectedLabelTextStyle: TextStyle(
color: Colors.grey[850],
),
),
navigationBarTheme: NavigationBarThemeData(
backgroundColor: backgroundMaterialColor[50],
height: 45,
indicatorColor: accentMaterialColor[300],
iconTheme: MaterialStateProperty.all(
IconThemeData(color: Colors.grey[850], size: 18),
),
iconTheme: IconThemeData(size: 16, color: scheme.onSurface),
navigationBarTheme: const NavigationBarThemeData(
labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
height: 50,
iconTheme: MaterialStatePropertyAll(
IconThemeData(size: 18),
),
cardTheme: CardTheme(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
color: backgroundMaterialColor[50],
),
splashFactory: NoSplash.splashFactory,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
foregroundColor: accentMaterialColor[800],
textStyle: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
popupMenuTheme: PopupMenuThemeData(
color: backgroundMaterialColor[100],
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
cardColor: backgroundMaterialColor[50],
canvasColor: backgroundMaterialColor[50],
checkboxTheme: CheckboxThemeData(
fillColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return accentMaterialColor[500];
}
return null;
}),
),
tabBarTheme: TabBarTheme(
indicator: const BoxDecoration(color: Colors.transparent),
labelColor: accentMaterialColor[500],
unselectedLabelColor: Colors.grey[850],
labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
unselectedLabelStyle:
const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
indicatorSize: TabBarIndicatorSize.tab,
labelStyle: const TextStyle(fontWeight: FontWeight.w600),
labelColor: scheme.primary,
overlayColor: MaterialStateProperty.all(Colors.transparent),
indicator: BoxDecoration(
color: scheme.secondaryContainer,
borderRadius: BorderRadius.circular(15),
),
),
);
}