Skip to content
This repository has been archived by the owner on Feb 25, 2024. It is now read-only.

Commit

Permalink
Introduce YaruTheme widget (#150)
Browse files Browse the repository at this point in the history
* Introduce `YaruTheme` widget

The `YaruTheme` widget detects the appropriate flavor and accent color
from the system, and applies the appropriate Yaru theme to its
descendants.

```dart
MaterialApp(
  home: YaruTheme(
    child: ...
  ),
)
```

Applications may choose a specific flavor and accent color by manually
setting the `accent` and `flavor` properties, respectively.

```dart
YaruTheme(
  accent: YaruAccent.red,
  flavor: YaruFlavor.ubuntu,
  child: ...
)
```

* example: use the YaruTheme widget
  • Loading branch information
jpnurmi authored Apr 21, 2022
1 parent 45248a1 commit 95eb716
Show file tree
Hide file tree
Showing 9 changed files with 612 additions and 63 deletions.
41 changes: 23 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,36 @@ To be able to use this package follow this steps:
```dart
import 'package:yaru/yaru.dart';
```
3. Inside your `MaterialApp` set `theme` to `yarulight` which is the standard light theme and `darkTheme` to `yaruDark` to get the yaru dark theme. The `darkTheme` property is used when you toggle your system theme to dark:
3. Create `YaruTheme`
```dart
MaterialApp(
theme: yaruLight,
darkTheme: yaruDark,
home: Scaffold(
appBar: AppBar(
title: Text('Yaru Theme'),
),
body: Container(),
home: YaruTheme(
child: Scaffold(
appBar: AppBar(
title: Text('Yaru Theme'),
),
);
body: Container(),
),
),
);
```
## yaru.dart flavors
## Flavors and accent colors
Yaru comes in 7x2 different versions:
- `yaruLight` & `yaruDark`
- `yaruXubuntuLight` & `yaruXubuntuDark`
- `yaruKubuntuLight` & `yaruKubuntuDark`
- `yaruLubuntuLight` & `yaruLubuntuDark`
- `yaruUbuntuStudioLight` & `yaruUbuntuStudioDark`
- `yaruMateLight` & `yaruMateDark`
- `yaruUbuntuBudgieLight` & `yaruUbuntuBudgieDark`
Yaru comes in several flavors and accent colors. The `YaruTheme` widget detects
the appropriate flavor and accent color from the system on Linux, and defaults
to `YaruFlavor.ubuntu` and `YaruAccent.orange` on other platforms. Applications
may choose a specific flavor and accent color by manually setting the `accent`
and `flavor` properties, respectively.
```dart
YaruTheme(
accent: YaruAccent.red,
flavor: YaruFlavor.ubuntu,
child: ...
)
```

## Contributing to yaru.dart

Expand Down
51 changes: 29 additions & 22 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
@@ -1,40 +1,47 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_example/view/home_page.dart';

void main() {
runApp(MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => LightTheme(yaruLight)),
ChangeNotifierProvider(create: (_) => DarkTheme(yaruDark)),
ChangeNotifierProvider(create: (_) => AppTheme(ThemeMode.light)),
],
child: MyApp(),
));
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
home: Builder(builder: (context) {
return YaruTheme(
data: AppTheme.of(context),
child: HomePage(),
);
}),
debugShowCheckedModeBanner: false,
themeMode: context.watch<AppTheme>().value,
theme: context.watch<LightTheme>().value,
darkTheme: context.watch<DarkTheme>().value,
);
}
}

class LightTheme extends ValueNotifier<ThemeData> {
LightTheme(ThemeData value) : super(value);
}

class DarkTheme extends ValueNotifier<ThemeData> {
DarkTheme(ThemeData value) : super(value);
}
class AppTheme {
static YaruThemeData of(BuildContext context) {
return SharedAppData.getValue(context, 'theme', () => YaruThemeData());
}

class AppTheme extends ValueNotifier<ThemeMode> {
AppTheme(ThemeMode value) : super(value);
static void apply(
BuildContext context, {
YaruAccent? accent,
YaruFlavor? flavor,
bool? highContrast,
ThemeMode? themeMode,
}) {
SharedAppData.setValue(
context,
'theme',
AppTheme.of(context).copyWith(
themeMode: themeMode,
accent: accent,
flavor: flavor,
highContrast: highContrast,
),
);
}
}
36 changes: 14 additions & 22 deletions example/lib/view/home_page.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_example/main.dart';
import 'package:yaru_example/view/color_disk.dart';
Expand Down Expand Up @@ -41,9 +40,7 @@ class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
final themeMode = context.watch<AppTheme>();
final lightTheme = context.read<LightTheme>();
final darkTheme = context.read<DarkTheme>();
final theme = YaruTheme.of(context);
return Scaffold(
appBar: AppBar(
leading: SizedBox(
Expand All @@ -54,34 +51,29 @@ class _HomePageState extends State<HomePage> {
style: TextButton.styleFrom(
padding: const EdgeInsets.all(0),
shape: const CircleBorder()),
onPressed: () => themeMode.value == ThemeMode.light
? themeMode.value = ThemeMode.dark
: themeMode.value = ThemeMode.light,
child: Icon(themeMode.value == ThemeMode.light
onPressed: () => AppTheme.apply(context,
themeMode: theme.themeMode == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light),
child: Icon(theme.themeMode == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode)),
),
),
actions: [
ColorDisk(
color: themeMode.value == ThemeMode.light
color: theme.themeMode == ThemeMode.light
? Colors.black
: Colors.white,
selected: (lightTheme.value == yaruHighContrastLight ||
darkTheme.value == yaruHighContrastDark),
onPressed: () {
lightTheme.value = yaruHighContrastLight;
darkTheme.value = yaruHighContrastDark;
}),
selected: theme.highContrast == true,
onPressed: () => AppTheme.apply(context, highContrast: true)),
for (final accent in YaruAccent.values)
ColorDisk(
color: getYaruLightTheme(accent).primaryColor,
selected: Theme.of(context).primaryColor ==
getYaruLightTheme(accent).primaryColor,
onPressed: () {
lightTheme.value = getYaruLightTheme(accent);
darkTheme.value = getYaruDarkTheme(accent);
}),
color: getYaruLightTheme(accent).primaryColor,
selected: accent == theme.accent && theme.highContrast != true,
onPressed: () =>
AppTheme.apply(context, accent: accent, highContrast: false),
),
SizedBox(
width: 20,
),
Expand Down
1 change: 0 additions & 1 deletion example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ environment:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.2
yaru:
path: ../

Expand Down
Loading

0 comments on commit 95eb716

Please sign in to comment.