maobo/yanting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix；设置和深浅色

Browse Source
This commit is contained in:
jingyun
2026-06-05 17:54:46 +08:00
parent 33d04a5545
commit af865b13fb
24 changed files with 742 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/theme/app_theme.dart
+71 -37
View File
@@ -3,85 +3,119 @@ import 'package:flutter/material.dart';
import 'yanting_text.dart';
import 'yanting_tokens.dart';
ThemeData buildAppTheme() {
ThemeData buildAppTheme(Brightness brightness) {
final primary = brightness == Brightness.dark
? YantingDarkColors.primary
: YantingColors.primary;
final primaryForeground = brightness == Brightness.dark
? YantingDarkColors.primaryForeground
: YantingColors.primaryForeground;
final secondary = brightness == Brightness.dark
? YantingDarkColors.secondary
: YantingColors.secondary;
final secondaryForeground = brightness == Brightness.dark
? YantingDarkColors.secondaryForeground
: YantingColors.secondaryForeground;
final link = brightness == Brightness.dark
? YantingDarkColors.link
: YantingColors.link;
final card = brightness == Brightness.dark
? YantingDarkColors.card
: YantingColors.card;
final foreground = brightness == Brightness.dark
? YantingDarkColors.foreground
: YantingColors.foreground;
final destructive = brightness == Brightness.dark
? YantingDarkColors.destructive
: YantingColors.destructive;
final border = brightness == Brightness.dark
? YantingDarkColors.border
: YantingColors.border;
final background = brightness == Brightness.dark
? YantingDarkColors.background
: YantingColors.background;
final mutedForeground = brightness == Brightness.dark
? YantingDarkColors.mutedForeground
: YantingColors.mutedForeground;
final input = brightness == Brightness.dark
? YantingDarkColors.input
: YantingColors.input;
final scheme = ColorScheme.fromSeed(
seedColor: YantingColors.primary,
primary: YantingColors.primary,
onPrimary: YantingColors.primaryForeground,
secondary: YantingColors.secondary,
onSecondary: YantingColors.secondaryForeground,
tertiary: YantingColors.link,
surface: YantingColors.card,
onSurface: YantingColors.foreground,
error: YantingColors.destructive,
outline: YantingColors.border,
seedColor: primary,
brightness: brightness,
primary: primary,
onPrimary: primaryForeground,
secondary: secondary,
onSecondary: secondaryForeground,
tertiary: link,
surface: card,
onSurface: foreground,
error: destructive,
outline: border,
);
return ThemeData(
useMaterial3: true,
colorScheme: scheme,
fontFamily: YantingText.fontFamily,
fontFamilyFallback: YantingText.fontFallback,
scaffoldBackgroundColor: YantingColors.background,
appBarTheme: const AppBarTheme(
backgroundColor: YantingColors.background,
foregroundColor: YantingColors.foreground,
brightness: brightness,
scaffoldBackgroundColor: background,
appBarTheme: AppBarTheme(
backgroundColor: background,
foregroundColor: foreground,
elevation: 0,
centerTitle: false,
titleTextStyle: YantingText.sectionTitle,
surfaceTintColor: Colors.transparent,
),
cardTheme: const CardThemeData(
color: YantingColors.card,
cardTheme: CardThemeData(
color: card,
elevation: 0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(YantingRadius.xl)),
side: BorderSide(color: YantingColors.border),
borderRadius: const BorderRadius.all(Radius.circular(YantingRadius.xl)),
side: BorderSide(color: border),
),
),
dividerTheme: const DividerThemeData(
color: YantingColors.border,
dividerTheme: DividerThemeData(
color: border,
thickness: 1,
space: 1,
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: YantingColors.background,
hintStyle: YantingText.body.copyWith(
color: YantingColors.mutedForeground,
),
fillColor: background,
hintStyle: YantingText.body.copyWith(color: mutedForeground),
contentPadding: const EdgeInsets.symmetric(horizontal: 14),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(YantingRadius.md),
borderSide: const BorderSide(color: YantingColors.input),
borderSide: BorderSide(color: input),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(YantingRadius.md),
borderSide: const BorderSide(color: YantingColors.input),
borderSide: BorderSide(color: input),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(YantingRadius.md),
borderSide: const BorderSide(color: YantingColors.foreground),
borderSide: BorderSide(color: foreground),
),
),
snackBarTheme: SnackBarThemeData(
backgroundColor: YantingColors.foreground,
contentTextStyle: YantingText.body.copyWith(
color: YantingColors.background,
),
backgroundColor: foreground,
contentTextStyle: YantingText.body.copyWith(color: background),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(YantingRadius.md),
),
),
navigationBarTheme: NavigationBarThemeData(
backgroundColor: YantingColors.background,
backgroundColor: background,
indicatorColor: Colors.transparent,
labelTextStyle: WidgetStateProperty.resolveWith(
(states) => YantingText.meta.copyWith(
color: states.contains(WidgetState.selected)
? YantingColors.foreground
: YantingColors.mutedForeground,
? foreground
: mutedForeground,
fontSize: 11,
fontWeight: states.contains(WidgetState.selected)
? FontWeight.w600
@@ -91,8 +125,8 @@ ThemeData buildAppTheme() {
iconTheme: WidgetStateProperty.resolveWith(
(states) => IconThemeData(
color: states.contains(WidgetState.selected)
? YantingColors.foreground
: YantingColors.mutedForeground,
? foreground
: mutedForeground,
),
),
),
lib/theme/theme.dart
+1
View File
@@ -1,5 +1,6 @@
export 'app_theme.dart';
export 'yanting_shad_theme.dart';
export 'theme_controller.dart';
export 'yanting_text.dart';
export 'yanting_tokens.dart';
export 'wise_tokens.dart';
lib/theme/theme_controller.dart
+42
View File
@@ -0,0 +1,42 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
const _themeModeKey = 'theme_mode';
final themeModeProvider = StateNotifierProvider<ThemeModeController, ThemeMode>(
(ref) => ThemeModeController(),
);
class ThemeModeController extends StateNotifier<ThemeMode> {
ThemeModeController() : super(ThemeMode.system) {
unawaited(_loadSavedMode());
}
Future<void> _loadSavedMode() async {
final prefs = await SharedPreferences.getInstance();
final raw = prefs.getString(_themeModeKey);
if (raw == null) return;
state = _decode(raw);
}
Future<void> setMode(ThemeMode mode) async {
state = mode;
final prefs = await SharedPreferences.getInstance();
await prefs.setString(_themeModeKey, _encode(mode));
}
ThemeMode _decode(String raw) => switch (raw) {
'light' => ThemeMode.light,
'dark' => ThemeMode.dark,
_ => ThemeMode.system,
};
String _encode(ThemeMode mode) => switch (mode) {
ThemeMode.light => 'light',
ThemeMode.dark => 'dark',
ThemeMode.system => 'system',
};
}
lib/theme/yanting_shad_theme.dart
+93 -112
View File
@@ -5,126 +5,107 @@ import 'package:shadcn_ui/shadcn_ui.dart';
import 'yanting_text.dart';
import 'yanting_tokens.dart';
const _lightShadColors = ShadColorScheme(
background: YantingColors.background,
foreground: YantingColors.foreground,
card: YantingColors.card,
cardForeground: YantingColors.foreground,
popover: YantingColors.card,
popoverForeground: YantingColors.foreground,
primary: YantingColors.primary,
primaryForeground: YantingColors.primaryForeground,
secondary: YantingColors.secondary,
secondaryForeground: YantingColors.secondaryForeground,
muted: YantingColors.muted,
mutedForeground: YantingColors.mutedForeground,
accent: YantingColors.brandSoft,
accentForeground: YantingColors.primaryForeground,
destructive: YantingColors.destructive,
destructiveForeground: YantingColors.background,
border: YantingColors.border,
input: YantingColors.input,
ring: YantingColors.primary,
selection: YantingColors.foreground,
custom: {
'brandSoft': YantingColors.brandSoft,
'brandSoftBorder': YantingColors.brandSoftBorder,
'link': YantingColors.link,
'chart2': YantingColors.chart2,
'warning': YantingColors.warning,
},
);
ShadThemeData buildYantingShadTheme() =>
_buildShadTheme(brightness: Brightness.light);
const _darkShadColors = ShadColorScheme(
background: Color(0xFF0F0F0F),
foreground: Color(0xFFF0F0F0),
card: Color(0xFF1A1A1A),
cardForeground: Color(0xFFF0F0F0),
popover: Color(0xFF1A1A1A),
popoverForeground: Color(0xFFF0F0F0),
primary: YantingColors.primary,
primaryForeground: Color(0xFF0F1A00),
secondary: Color(0xFF1F1F23),
secondaryForeground: Color(0xFFF0F0F0),
muted: Color(0xFF1A1A1A),
mutedForeground: Color(0xFFA1A1AA),
accent: Color(0xFF1C2B00),
accentForeground: YantingColors.primary,
destructive: YantingColors.destructive,
destructiveForeground: YantingColors.background,
border: Color(0xFF2A2A2A),
input: Color(0xFF2A2A2A),
ring: YantingColors.primary,
selection: Color(0xFFF0F0F0),
custom: {
'brandSoft': Color(0xFF1C2B00),
'brandSoftBorder': Color(0xFF304800),
'link': YantingColors.link,
'chart2': YantingColors.chart2,
'warning': YantingColors.warning,
},
);
ShadThemeData buildYantingDarkShadTheme() =>
_buildShadTheme(brightness: Brightness.dark);
ShadThemeData _buildShadTheme({required Brightness brightness}) {
final colors = brightness == Brightness.dark
? ShadColorScheme(
background: YantingDarkColors.background,
foreground: YantingDarkColors.foreground,
card: YantingDarkColors.card,
cardForeground: YantingDarkColors.foreground,
popover: YantingDarkColors.card,
popoverForeground: YantingDarkColors.foreground,
primary: YantingDarkColors.primary,
primaryForeground: YantingDarkColors.primaryForeground,
secondary: YantingDarkColors.secondary,
secondaryForeground: YantingDarkColors.secondaryForeground,
muted: YantingDarkColors.muted,
mutedForeground: YantingDarkColors.mutedForeground,
accent: YantingDarkColors.brandSoft,
accentForeground: YantingDarkColors.primaryForeground,
destructive: YantingDarkColors.destructive,
destructiveForeground: YantingDarkColors.background,
border: YantingDarkColors.border,
input: YantingDarkColors.input,
ring: YantingDarkColors.primary,
selection: YantingDarkColors.foreground,
custom: {
'brandSoft': YantingDarkColors.brandSoft,
'brandSoftBorder': YantingDarkColors.brandSoftBorder,
'link': YantingDarkColors.link,
'chart2': YantingDarkColors.chart2,
'warning': YantingDarkColors.warning,
'warningSoft': YantingDarkColors.warningSoft,
'warningSoftBorder': YantingDarkColors.warningSoftBorder,
'warningSoftForeground': YantingDarkColors.warningSoftForeground,
},
)
: ShadColorScheme(
background: YantingColors.background,
foreground: YantingColors.foreground,
card: YantingColors.card,
cardForeground: YantingColors.foreground,
popover: YantingColors.card,
popoverForeground: YantingColors.foreground,
primary: YantingColors.primary,
primaryForeground: YantingColors.primaryForeground,
secondary: YantingColors.secondary,
secondaryForeground: YantingColors.secondaryForeground,
muted: YantingColors.muted,
mutedForeground: YantingColors.mutedForeground,
accent: YantingColors.brandSoft,
accentForeground: YantingColors.primaryForeground,
destructive: YantingColors.destructive,
destructiveForeground: YantingColors.background,
border: YantingColors.border,
input: YantingColors.input,
ring: YantingColors.primary,
selection: YantingColors.foreground,
custom: {
'brandSoft': YantingColors.brandSoft,
'brandSoftBorder': YantingColors.brandSoftBorder,
'link': YantingColors.link,
'chart2': YantingColors.chart2,
'warning': YantingColors.warning,
'warningSoft': YantingColors.warningSoft,
'warningSoftBorder': YantingColors.warningSoftBorder,
'warningSoftForeground': YantingColors.warningSoftForeground,
},
);
final textTheme = ShadTextTheme(
family: YantingText.fontFamily,
h1Large: YantingText.appTitle.copyWith(color: colors.foreground),
h1: YantingText.appTitle.copyWith(color: colors.foreground),
h2: YantingText.sectionTitle.copyWith(color: colors.foreground),
h3: YantingText.cardTitle.copyWith(color: colors.foreground),
h4: YantingText.listTitle.copyWith(color: colors.foreground),
p: YantingText.body.copyWith(color: colors.foreground),
blockquote: YantingText.body.copyWith(color: colors.mutedForeground),
table: YantingText.meta.copyWith(color: colors.mutedForeground),
list: YantingText.body.copyWith(color: colors.foreground),
lead: YantingText.sub.copyWith(color: colors.mutedForeground),
large: YantingText.cardTitle.copyWith(color: colors.foreground),
small: YantingText.badge.copyWith(color: colors.mutedForeground),
muted: YantingText.meta.copyWith(color: colors.mutedForeground),
googleFontBuilder: GoogleFonts.dmSans,
);
ShadThemeData buildYantingShadTheme() {
return ShadThemeData(
brightness: Brightness.light,
colorScheme: _lightShadColors,
brightness: brightness,
colorScheme: colors,
radius: BorderRadius.circular(YantingRadius.base),
cardTheme: ShadCardTheme(
padding: const EdgeInsets.all(YantingSpacing.cardPadding),
radius: BorderRadius.circular(YantingRadius.xl),
border: ShadBorder.all(color: YantingColors.border),
border: ShadBorder.all(color: colors.border),
shadows: const [],
),
textTheme: ShadTextTheme(
family: YantingText.fontFamily,
h1Large: YantingText.appTitle,
h1: YantingText.appTitle,
h2: YantingText.sectionTitle,
h3: YantingText.cardTitle,
h4: YantingText.listTitle,
p: YantingText.body,
blockquote: YantingText.body,
table: YantingText.meta,
list: YantingText.body,
lead: YantingText.sub,
large: YantingText.cardTitle,
small: YantingText.badge,
muted: YantingText.meta,
googleFontBuilder: GoogleFonts.dmSans,
),
);
}
ShadThemeData buildYantingDarkShadTheme() {
return ShadThemeData(
brightness: Brightness.dark,
colorScheme: _darkShadColors,
radius: BorderRadius.circular(YantingRadius.base),
cardTheme: ShadCardTheme(
padding: const EdgeInsets.all(YantingSpacing.cardPadding),
radius: BorderRadius.circular(YantingRadius.xl),
border: ShadBorder.all(color: _darkShadColors.border),
shadows: const [],
),
textTheme: ShadTextTheme(
family: YantingText.fontFamily,
h1Large: YantingText.appTitle.copyWith(color: _darkShadColors.foreground),
h1: YantingText.appTitle.copyWith(color: _darkShadColors.foreground),
h2: YantingText.sectionTitle.copyWith(color: _darkShadColors.foreground),
h3: YantingText.cardTitle.copyWith(color: _darkShadColors.foreground),
h4: YantingText.listTitle.copyWith(color: _darkShadColors.foreground),
p: YantingText.body.copyWith(color: _darkShadColors.foreground),
blockquote: YantingText.body.copyWith(
color: _darkShadColors.mutedForeground,
),
table: YantingText.meta.copyWith(color: _darkShadColors.mutedForeground),
list: YantingText.body.copyWith(color: _darkShadColors.foreground),
lead: YantingText.sub.copyWith(color: _darkShadColors.mutedForeground),
large: YantingText.cardTitle.copyWith(color: _darkShadColors.foreground),
small: YantingText.badge.copyWith(color: _darkShadColors.mutedForeground),
muted: YantingText.meta.copyWith(color: _darkShadColors.mutedForeground),
googleFontBuilder: GoogleFonts.dmSans,
),
textTheme: textTheme,
);
}
lib/theme/yanting_text.dart
-9
View File
@@ -13,7 +13,6 @@ abstract final class YantingText {
];
static const appTitle = TextStyle(
color: YantingColors.foreground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 34,
@@ -23,7 +22,6 @@ abstract final class YantingText {
);
static const sectionTitle = TextStyle(
color: YantingColors.foreground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 22,
@@ -33,7 +31,6 @@ abstract final class YantingText {
);
static const cardTitle = TextStyle(
color: YantingColors.foreground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 19,
@@ -43,7 +40,6 @@ abstract final class YantingText {
);
static const listTitle = TextStyle(
color: YantingColors.foreground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 16.5,
@@ -53,7 +49,6 @@ abstract final class YantingText {
);
static const body = TextStyle(
color: YantingColors.foreground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 15,
@@ -63,7 +58,6 @@ abstract final class YantingText {
);
static const sub = TextStyle(
color: YantingColors.mutedForeground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 15,
@@ -73,7 +67,6 @@ abstract final class YantingText {
);
static const meta = TextStyle(
color: YantingColors.mutedForeground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 13,
@@ -84,7 +77,6 @@ abstract final class YantingText {
);
static const chip = TextStyle(
color: YantingColors.secondaryForeground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 15,
@@ -94,7 +86,6 @@ abstract final class YantingText {
);
static const badge = TextStyle(
color: YantingColors.mutedForeground,
fontFamily: fontFamily,
fontFamilyFallback: fontFallback,
fontSize: 12,
lib/theme/yanting_tokens.dart
+40
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
abstract final class YantingColors {
static const background = Color(0xFFFFFFFF);
@@ -14,6 +15,9 @@ abstract final class YantingColors {
static const input = Color(0xFFE5E5E5);
static const destructive = Color(0xFFEF4444);
static const warning = Color(0xFF9A6500);
static const warningSoft = Color(0xFFFDE68A);
static const warningSoftBorder = Color(0xFFF5D26A);
static const warningSoftForeground = Color(0xFF7C4A00);
static const chart2 = Color(0xFF84CC16);
static const brandSoft = Color(0xFFECFCCB);
static const brandSoftBorder = Color(0xFFD6F5A8);
@@ -21,6 +25,30 @@ abstract final class YantingColors {
static const canvas = background;
}
abstract final class YantingDarkColors {
static const background = Color(0xFF09090B);
static const foreground = Color(0xFFF4F4F5);
static const card = Color(0xFF111113);
static const primary = Color(0xFF95E300);
static const primaryForeground = Color(0xFF0F1A00);
static const secondary = Color(0xFF1F1F23);
static const secondaryForeground = Color(0xFFE4E4E7);
static const muted = Color(0xFF18181B);
static const mutedForeground = Color(0xFFA1A1AA);
static const border = Color(0xFF27272A);
static const input = Color(0xFF27272A);
static const destructive = Color(0xFFF87171);
static const warning = Color(0xFFF59E0B);
static const warningSoft = Color(0xFF2A2412);
static const warningSoftBorder = Color(0xFF665113);
static const warningSoftForeground = Color(0xFFFBBF24);
static const chart2 = Color(0xFF84CC16);
static const brandSoft = Color(0xFF1C2B00);
static const brandSoftBorder = Color(0xFF304800);
static const link = Color(0xFF8AB4FF);
static const canvas = background;
}
abstract final class YantingSpacing {
static const x1 = 4.0;
static const x2 = 8.0;
@@ -52,3 +80,15 @@ abstract final class YantingBorders {
abstract final class YantingTypographyFeatures {
static const tabularNums = [FontFeature.tabularFigures()];
}
extension YantingShadColorSchemeX on ShadColorScheme {
Color get brandSoft => custom['brandSoft'] ?? accent;
Color get brandSoftBorder => custom['brandSoftBorder'] ?? border;
Color get link => custom['link'] ?? primary;
Color get warning => custom['warning'] ?? destructive;
Color get warningSoft => custom['warningSoft'] ?? muted;
Color get warningSoftBorder => custom['warningSoftBorder'] ?? border;
Color get warningSoftForeground =>
custom['warningSoftForeground'] ?? foreground;
Color get chart2 => custom['chart2'] ?? primary;
}