shadcn_ui-theme

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Theme Data

Shadcn UI — 主题数据

Instructions

使用说明

Theme and color scheme are defined by

ShadThemeData

and

ShadColorScheme

. Supported scheme names: blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, zinc.

主题与配色方案由

ShadThemeData

和

ShadColorScheme

定义。支持的方案名称包括：blue、gray、green、neutral、orange、red、rose、slate、stone、violet、yellow、zinc。

Basic usage

基础用法

dart

import 'package:shadcn_ui/shadcn_ui.dart';

return ShadApp(
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
  child: ...,
);

dart

import 'package:shadcn_ui/shadcn_ui.dart';

return ShadApp(
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
  child: ...,
);

Override theme properties

覆盖主题属性

Override specific properties of the color scheme or component themes:

dart

ShadApp(
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(
      background: Colors.blue,
    ),
    primaryButtonTheme: const ShadButtonTheme(
      backgroundColor: Colors.cyan,
    ),
  ),
  ...
);

For fully custom schemes, extend

ShadColorScheme

and pass all required properties.

覆盖配色方案或组件主题的特定属性：

dart

ShadApp(
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(
      background: Colors.blue,
    ),
    primaryButtonTheme: const ShadButtonTheme(
      backgroundColor: Colors.cyan,
    ),
  ),
  ...
);

如需完全自定义方案，可继承

ShadColorScheme

并传入所有必填属性。

Theme switcher with ShadColorScheme.fromName

使用ShadColorScheme.fromName实现主题切换器

Use

ShadColorScheme.fromName

to let users change the color scheme:

dart

final shadThemeColors = [
  'blue', 'gray', 'green', 'neutral', 'orange', 'red', 'rose',
  'slate', 'stone', 'violet', 'yellow', 'zinc',
];

final lightColorScheme = ShadColorScheme.fromName('blue');
final darkColorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);

Use a

ShadSelect<String>

(or similar) with these names and rebuild the app with the chosen scheme via your state management.

使用

ShadColorScheme.fromName

让用户切换配色方案：

dart

final shadThemeColors = [
  'blue', 'gray', 'green', 'neutral', 'orange', 'red', 'rose',
  'slate', 'stone', 'violet', 'yellow', 'zinc',
];

final lightColorScheme = ShadColorScheme.fromName('blue');
final darkColorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);

搭配

ShadSelect<String>

（或类似组件）展示这些名称，并通过状态管理工具重建应用以应用所选方案。

Custom colors

自定义颜色

Add custom colors via the

custom

parameter on the color scheme:

dart

return ShadApp(
  theme: ShadThemeData(
    colorScheme: const ShadZincColorScheme.light(
      custom: {
        'myCustomColor': Color.fromARGB(255, 177, 4, 196),
      },
    ),
  ),
);

Access:

ShadTheme.of(context).colorScheme.custom['myCustomColor']!

Or add an extension:

dart

extension CustomColorExtension on ShadColorScheme {
  Color get myCustomColor => custom['myCustomColor']!;
}

Then use:

ShadTheme.of(context).colorScheme.myCustomColor

通过配色方案的

custom

参数添加自定义颜色：

dart

return ShadApp(
  theme: ShadThemeData(
    colorScheme: const ShadZincColorScheme.light(
      custom: {
        'myCustomColor': Color.fromARGB(255, 177, 4, 196),
      },
    ),
  ),
);

访问方式：

ShadTheme.of(context).colorScheme.custom['myCustomColor']!

或添加扩展方法：

dart

extension CustomColorExtension on ShadColorScheme {
  Color get myCustomColor => custom['myCustomColor']!;
}

之后可通过以下方式使用：

ShadTheme.of(context).colorScheme.myCustomColor