ayushya/noo
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 14 Activity

Make the custom accent-color picker actually retint the app

Browse Source 
NooColors (the color source for nearly the whole redesigned UI) only
had two states: the fixed violet palette, or a Material You dynamic
scheme when "Match wallpaper" was on. The 5-swatch custom accent
picker still wrote to SettingsController.seedColor, but nothing read
it back into NooColors - it only reached the underlying Material
ColorScheme, which the Noo-styled UI doesn't use, so every custom
swatch looked identically purple.

Add NooColors.fromSeed, which retints just the accent/accentText/
accentSoft roles from a chosen seed color via ColorScheme.fromSeed
(bg/surface/fg etc. stay the fixed warm-neutral palette, unlike
dynamic color which reshapes everything to match the wallpaper), and
wire it into AppTheme.light/dark. Add a "Default" (Noo violet) swatch
to the picker, and move SettingsController's initial seed color to
that same violet so a fresh install - or any device without dynamic
color - keeps today's look instead of picking up the leftover
Nextcloud-blue default from before seed colors did anything visible.
This commit is contained in:
ayushya
2026-09-28 13:11:11 -04:00
parent c9889c69b8
commit 72472c771a
6 changed files with 149 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/providers/settings_controller.dart
+1 -1
View File
@@ -37,7 +37,7 @@ class SettingsController extends ChangeNotifier {
final Future<SharedPreferences> _prefsFuture =
SharedPreferences.getInstance();
Color _seedColor = AppTheme.defaultNextcloudBlue;
Color _seedColor = AppTheme.defaultAccent;
ThemeMode _themeMode = ThemeMode.system;
bool _useDynamicColor = true;
bool _amoledDark = false;
lib/theme/app_theme.dart
+12 -2
View File
@@ -5,6 +5,15 @@ import 'design_tokens.dart';
class AppTheme {
static const Color defaultNextcloudBlue = Color(0xFF0082C9);
/// The design system's own fixed violet - [NooColors.light]/`.dark`'s
/// `accent`, and the accent picker's "Default" swatch. Also
/// [SettingsController]'s initial [SettingsController.seedColor], so a
/// fresh install (or any device without Material You dynamic color) keeps
/// today's violet look rather than picking up the leftover
/// [defaultNextcloudBlue] default from before seed colors actually did
/// anything to the Noo-styled UI (see [NooColors.fromSeed]).
static const Color defaultAccent = Color(0xFF8D0DE3);
// Flutter's Material 3 default (ZoomPageTransitionsBuilder) doesn't
// implement Android's predictive-back gesture at all. Opting into
// PredictiveBackPageTransitionsBuilder here (Android only) is required —
@@ -24,6 +33,7 @@ class AppTheme {
static const _sliderTheme = SliderThemeData(year2023: false);
static const List<Color> seedColors = [
defaultAccent, // Default (Noo Violet)
Color(0xFF0082C9), // Nextcloud Blue
Color(0xFF009688), // Ocean Teal
Color(0xFF6750A4), // Deep Purple
@@ -87,7 +97,7 @@ class AppTheme {
);
final nooColors = (useDynamicColor && dynamicScheme != null)
? NooColors.fromDynamicScheme(dynamicScheme)
: NooColors.light;
: NooColors.fromSeed(seedColor, Brightness.light);
return ThemeData(
useMaterial3: true,
@@ -131,7 +141,7 @@ class AppTheme {
);
var nooColors = (useDynamicColor && dynamicScheme != null)
? NooColors.fromDynamicScheme(dynamicScheme)
: NooColors.dark;
: NooColors.fromSeed(seedColor, Brightness.dark);
if (amoled) {
// True OLED black across every surface tone Material 3 hands out -
lib/theme/design_tokens.dart
+37 -11
View File
@@ -7,13 +7,13 @@ import 'package:google_fonts/google_fonts.dart';
/// `Theme.of(context).extension<NooColors>()!` (or a `context.nooColors`
/// getter, once one exists) instead of the Material [ColorScheme] roles.
///
/// Two independent sources feed this, matching the app's color settings:
/// the fixed [light]/[dark] palettes below (the design system's own
/// default look), or [NooColors.fromDynamicScheme] when the user has
/// Material You dynamic color turned on - there's no third option (no
/// custom accent picker), since the design system explicitly rules out
/// "add new colors". [withAmoled] layers on top of either source when the
/// user's AMOLED toggle is on.
/// Three sources feed this, matching the app's color settings: the fixed
/// [light]/[dark] palettes below (the design system's own default look,
/// also what the accent picker's "Default" violet swatch selects),
/// [NooColors.fromDynamicScheme] when the user has Material You dynamic
/// color turned on, or [NooColors.fromSeed] for a custom accent-picker
/// swatch. [withAmoled] layers on top of any of the three when the user's
/// AMOLED toggle is on.
@immutable
class NooColors extends ThemeExtension<NooColors> {
final Color bg;
@@ -161,6 +161,34 @@ class NooColors extends ThemeExtension<NooColors> {
);
}
/// Derives an accent-only variant of the fixed [light]/[dark] palette for
/// a user-chosen custom seed color (Settings' accent-color picker) -
/// unlike [fromDynamicScheme], only the accent roles change; bg/surface/
/// fg etc. stay the Noo warm-neutral palette, since picking a named
/// accent ("Ocean Teal") is meant to retint the brand color, not reshape
/// the whole surface to match a wallpaper the way dynamic color does.
/// [seedColor] equal to the fixed palette's own accent (the picker's
/// "Default" violet swatch) returns the untouched fixed palette, so the
/// out-of-box look stays pixel-identical rather than going through
/// [ColorScheme.fromSeed]'s tonal-palette math for no reason.
factory NooColors.fromSeed(Color seedColor, Brightness brightness) {
final fixed = brightness == Brightness.dark ? dark : light;
if (seedColor == light.accent) return fixed;
final cs = ColorScheme.fromSeed(
seedColor: seedColor,
brightness: brightness,
);
return fixed.copyWith(
accent: seedColor,
// Light accentText matches accent exactly, same as the fixed
// palette - dark needs a lighter, desaturated tint for contrast
// against a dark surface, which is exactly what Material's tonal
// primary (tone ~80 in dark mode) is designed to give.
accentText: brightness == Brightness.dark ? cs.primary : seedColor,
accentSoft: cs.primaryContainer,
);
}
/// True OLED black across every surface tone - not just [bg] - so cards,
/// bars and sheets all go black too instead of the dark palette's warm
/// dark-grey tones. Mirrors the AMOLED handling this replaces in
@@ -391,10 +419,8 @@ class NooText {
fontWeight: FontWeight.w400,
);
static TextStyle get label => GoogleFonts.instrumentSans(
fontSize: 13,
fontWeight: FontWeight.w600,
);
static TextStyle get label =>
GoogleFonts.instrumentSans(fontSize: 13, fontWeight: FontWeight.w600);
static TextStyle get meta => GoogleFonts.instrumentSans(
fontSize: 13,
lib/widgets/settings/settings_appearance.dart
+47 -15
View File
@@ -28,12 +28,13 @@ String _seekBarStyleLabel(MediaProgressBarStyle style) {
/// Settings section 6: appearance. Only the theme mode (System/Light/Dark)
/// is in the design system's own recipe - the accent-color picker, dynamic
/// color, AMOLED and the video seek-bar style are all settings that predate
/// the design system and have no place in it (a single fixed accent, no
/// per-user color choice). They still work, just demoted into a separate
/// "Advanced appearance" group beneath the main card per the rebuild brief,
/// rather than dropped - see the handoff report for whether to remove them
/// outright.
/// color, AMOLED and the video seek-bar style predate the design system, so
/// they're demoted into a separate "Advanced appearance" group beneath the
/// main card rather than folded into it. The accent picker itself picks a
/// [NooColors] variant (see [NooColors.fromSeed]/[NooColors.fromDynamicScheme]):
/// "Default" is the fixed violet palette, the named swatches retint just
/// the accent roles, and "Match wallpaper" (the `wallpaper`-icon swatch)
/// follows Material You dynamic color instead.
class SettingsAppearanceSection extends StatelessWidget {
const SettingsAppearanceSection({super.key});
@@ -55,9 +56,21 @@ class SettingsAppearanceSection extends StatelessWidget {
value: settings.themeMode,
onChanged: settings.setThemeMode,
options: const [
NooSegmentOption(value: ThemeMode.system, icon: LucideIcons.monitor, label: 'System'),
NooSegmentOption(value: ThemeMode.light, icon: LucideIcons.sun, label: 'Light'),
NooSegmentOption(value: ThemeMode.dark, icon: LucideIcons.moon, label: 'Dark'),
NooSegmentOption(
value: ThemeMode.system,
icon: LucideIcons.monitor,
label: 'System',
),
NooSegmentOption(
value: ThemeMode.light,
icon: LucideIcons.sun,
label: 'Light',
),
NooSegmentOption(
value: ThemeMode.dark,
icon: LucideIcons.moon,
label: 'Dark',
),
],
),
),
@@ -70,20 +83,33 @@ class SettingsAppearanceSection extends StatelessWidget {
NooSettingsRow(
icon: LucideIcons.palette,
label: const Text('Accent color'),
subtitle: Text(settings.useDynamicColor ? 'Matching your wallpaper' : 'Custom color'),
trailing: _AccentSwatchDot(color: settings.useDynamicColor ? null : settings.seedColor),
subtitle: Text(
settings.useDynamicColor
? 'Matching your wallpaper'
: settings.seedColor == AppTheme.defaultAccent
? 'Default'
: 'Custom color',
),
trailing: _AccentSwatchDot(
color: settings.useDynamicColor ? null : settings.seedColor,
),
onTap: () => _openAccentPicker(context, settings),
),
NooSettingsRow(
icon: LucideIcons.sparkles,
label: const Text('AMOLED black'),
subtitle: const Text('Use pure black backgrounds in dark mode'),
trailing: NooToggle(checked: settings.amoledDark, onChanged: settings.setAmoledDark),
trailing: NooToggle(
checked: settings.amoledDark,
onChanged: settings.setAmoledDark,
),
),
NooSettingsRow(
icon: LucideIcons.waves,
label: const Text('Seek bar style'),
subtitle: const Text('The progress bar style used when playing videos'),
subtitle: const Text(
'The progress bar style used when playing videos',
),
value: _seekBarStyleLabel(settings.mediaProgressBarStyle),
onTap: () => _openSeekBarPicker(context, settings),
),
@@ -112,7 +138,9 @@ class _AccentSwatchDot extends StatelessWidget {
color: color ?? colors.surface3,
shape: BoxShape.circle,
),
child: color == null ? Icon(LucideIcons.wallpaper, size: 12, color: colors.fg2) : null,
child: color == null
? Icon(LucideIcons.wallpaper, size: 12, color: colors.fg2)
: null,
);
}
}
@@ -219,7 +247,11 @@ class _SeekBarStyleOption extends StatelessWidget {
final bool isSelected;
final VoidCallback onTap;
const _SeekBarStyleOption({required this.style, required this.isSelected, required this.onTap});
const _SeekBarStyleOption({
required this.style,
required this.isSelected,
required this.onTap,
});
@override
Widget build(BuildContext context) {