Copyright 2014 The Flutter Authors. All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived
from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
A set of 25 colors based on the [Material spec](https://m3.material.io/styles/color/the-color-system/color-roles)
that can be used to configure the color properties of most components.
[Material spec]に基づいた25の色のセット。ほとんどのコンポーネントの色属性を設定するために使用します。
The main accent color groups in the scheme are [primary], [secondary], and [tertiary].
配色の主なアクセントカラーグループは、[primary], [secondary], [tertiary]です。
* Primary colors are used for key components across the UI, such as the FAB, prominent buttons, and active states.
* FABやボタン、アクティブな状態など、UIの主要な構成要素にprimary colorsを使用します。
* Secondary colors are used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
* フィルターチップなど、UIであまり目立たない部品にはsecondary colorsを使用し、色の表現機会を広げています。
Tertiary colors are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field. The tertiary colors are left for makers to use at their discretion and are intended to support broader color expression in products.
Tertiary colorsは、primary colorsとsecondary colorsのバランスをとるため、あるいは入力欄などの注目度を高めるために、対照的なアクセントとして使用されます。Tertiary colorsは、メーカーが自由に使えるようにしたもので、製品の色彩表現に幅を持たせることを意図しています。
The remaining colors of the scheme are comprised of neutral colors used for backgrounds and surfaces, as well as specific colors for errors, dividers and shadows.
残りの色は、背景や表面に使う中間色(neutral colors)と、エラーや仕切り、シャドウに使う特定色で構成されています。
Many of the colors have matching ‘on’ colors, which are used for drawing content on top of the matching color. For example, if something is using [primary] for a background color, [onPrimary] would be used to paint text and icons on top of it. For this reason, the ‘on’ colors should have a contrast ratio with their matching colors of at least 4.5:1 in order to be readable.
多くの色は、対応する「on」色を持ち、対応する色の上にコンテンツを描画するために使用されます。例えば、背景色に [primary] を使用している場合、[onPrimary] はその上にテキストやアイコンを描画するために使用されます。このため、’on’ カラーは、可読性確保のためマッチする色とのコントラスト比が少なくとも 4.5:1である必要があります。
The [Theme] has a color scheme, [ThemeData.colorScheme], which can either be passed in as a parameter to the constructor or by using ‘brightness’ and ‘colorSchemeSeed’ parameters (which are used to generate a scheme with [ColorScheme.fromSeed]).
[Theme]クラスには[ThemeData.colorScheme]というColorScheme型のフィールドがあり、コンストラクタのパラメータとして渡すか、’brightness’と’colorSchemeSeed’パラメータ（[ColorScheme.fromSeed]でColorSchemeを生成する際に使用）を使用することが可能です。@immutable
class ColorScheme with Diagnosticable {
Create a ColorScheme instance from the given colors.
与えられた色からColorSchemeを生成する(コンストラクタ)
[ColorScheme.fromSeed] can be used as a simpler way to create a full color scheme derived from a single seed color. [ColorScheme.fromSeed]は、単一のシードカラーから完全な配色を作成する簡便な方法として使用することができます。
For the color parameters that are nullable, it is still recommended that applications provide values for them. They are only nullable due to backwards compatibility concerns.
nullableなカラーパラメータについては、アプリケーションで値を提供することが推奨されます。これらのパラメータがnullableなのは後方互換性のためです。
If a color is not provided, the closest fallback color from the given colors will be used for it (e.g. [primaryContainer] will default to [primary]).
Material Design 3 makes use of these colors for many component defaults, so for the best results the application should supply colors for all the parameters. An easy way to ensure this is to use [ColorScheme.fromSeed] to generate a full set of colors.
色を指定しない場合、指定された色から最も近い代替色が使用されます (例: [primaryContainer] は [primary] がデフォルトです)。
Material Design 3 では、多くのコンポーネントのデフォルトにこれらの色が使用されるため、最良の結果を得るためには、アプリケーションからすべてのパラメータに色を指定する必要があります。これを確実にする簡単な方法は、[ColorScheme.fromSeed] を使用して、色の完全なセットを生成することです。
During the migration to Material Design 3, if an app’s [ThemeData.useMaterial3] is false, then components will only use the following colors for defaults:
Material Design 3 への移行中、アプリの [ThemeData.useMaterial3] が false の場合、コンポーネントはデフォルトで以下の色のみを使用します。
/// * [primary]
/// * [onPrimary]
/// * [secondary]
/// * [onSecondary]
/// * [error]
/// * [onError]
/// * [background]
/// * [onBackground]
/// * [surface]
/// * [onSurface]
…
Generate a [ColorScheme] derived from the given `seedColor`.
与えられた `seedColor` から派生した [ColorScheme] を生成します。
Using the seedColor as a starting point, a set of tonal palettes are constructed. These tonal palettes are based on the Material 3 Color system and provide all the needed colors for a [ColorScheme].
These colors are designed to work well together and meet contrast requirements for accessibility.
seedColorを出発点として、一連のトーンパレットが構築されます。これらの色調パレットはMaterial 3のカラーシステムに基づいており、[ColorScheme]に必要なすべての色を提供します。
これらの色は、互いにうまく調和し、アクセシビリティのためのコントラスト要件を満たすように設計されています。
If any of the optional color parameters are non-null they will be used in place of the generated colors for that field in the resulting color scheme. This allows apps to override specific colors for their needs.
オプショナルのカラーパラメーターにnullでない値が渡された場合、返り値のColorSchemeにおいて、デフォルトで使用される色の代わりにそのフィールドの値として使用されます。これにより、アプリケーションは必要に応じて特定の色をオーバーライドすることができます。
Given the nature of the algorithm, the seedColor may not wind up as one of the ColorScheme colors.
アルゴリズムの性質上、seedColorはColorSchemeの色の1つにならないかもしれません。
/// * <https://m3.material.io/styles/color/the-color-system/color-roles>, the
/// Material 3 Color system specification.
/// * <https://pub.dev/packages/material_color_utilities>, the package
/// used to generate the tonal palettes needed for the scheme.
factory ColorScheme.fromSeed({
required Color seedColor,
...
Create a ColorScheme based on a purple primary color that matches the [baseline Material color scheme].
[baseline Material color scheme]に一致する紫色の原色をベースにしたColorSchemeを作成します。(https://material.io/design/color/the-color-system.html#color-theme-creation).
const ColorScheme.light({
this.brightness = Brightness.light,
//...
Create the recommended dark color scheme that matches the [baseline Material color scheme].
[baseline Material color scheme]に合わせた推奨ダークColorShemeを作成します。(https://material.io/design/color/dark-theme.html#ui-application) const ColorScheme.dark({
this.brightness = Brightness.dark,
//...
static Brightness _brightnessFor(Color color) => ThemeData.estimateBrightnessForColor(color);
The overall brightness of this color scheme.
このColorScheme全体のbrightness
final Brightness brightness;
The color displayed most frequently across your app’s screens and components.
あなたのアプリの画面とコンポーネントに対してもっとも頻繁に使われる色
final Color primary;
A color that’s clearly legible when drawn on [primary].
[primary]の上に配置された時に読みやすい色To ensure that an app is accessible, a contrast ratio between [primary] and [onPrimary] of at least 4.5:1 is recommended. See
<https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
アプリのアクセシビリティを確保するため、[primary]と[onPrimary]のコントラスト比は4.5 : 1以上を推奨しています。参照
final Color onPrimary;
final Color? _primaryContainer; /// A color used for elements needing less emphasis than [primary]. /// [primary]よりも強調する必要性が低い要素に使用される色。 Color get primaryContainer => _primaryContainer ?? primary;
↑_primaryContainerを渡さない場合primaryが使われる、ということですね、はい。
A color that’s clearly legible when drawn on [primaryContainer].
[primaryContainer]上で読みやすい色。
To ensure that an app is accessible, a contrast ratio between [primaryContainer] and [onPrimaryContainer] of at least 4.5:1 is recommended. See
<https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
アプリのアクセス性を確保するため、[primaryContainer] と [onPrimaryContainer] のコントラスト比を 4.5:1 以上にすることを推奨します。を推奨します。参照
final Color? _onPrimaryContainer; Color get onPrimaryContainer => _onPrimaryContainer ?? onPrimary;
↑_onPrimaryContainerを渡さない場合onPrimaryが使われる、ということですね、はい。
An accent color used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
フィルターチップなど、UIの中であまり目立たない部分に使われるアクセントカラーで、色の表現機会を広げています。
final Color secondary;
A color that’s clearly legible when drawn on [secondary].
[secondary]上に配置された時に読みやすい色。
final Color onSecondary;
A color used for elements needing less emphasis than [secondary].
[secondary]ほど目立たせる必要性が低い要素に使う色。
final Color? _secondaryContainer; Color get secondaryContainer => _secondaryContainer ?? secondary;
A color that’s clearly legible when drawn on [secondaryContainer].
[secondaryContainer]上に配置された時に読みやすい色。
final Color? _onSecondaryContainer; Color get onSecondaryContainer => _onSecondaryContainer ?? onSecondary;
A color used as a contrasting accent that can balance [primary] and [secondary] colors or bring heightened attention to an element, such as an input field.
[primary]と[secondary]のバランスを取ったり、入力フィールドなどの要素に注目させるために、対照的なアクセントとして使用される色です。final Color? _tertiary; Color get tertiary => _tertiary ?? secondary;
参考
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/color_scheme.dart