SharePoint サイトのテーマ: JSON スキーマSharePoint site theming: JSON schema

新しい SharePoint サイトのテーマ機能は、色の設定とその他の各テーマに関する情報を保存するために JSON スキーマを使用します。The new SharePoint site theming features use a JSON schema to store color settings and other information about each theme. テーマの設定は、次に示すキーが含まれている JSON オブジェクトに保存されます。Theme settings are stored in a JSON object that contains the following keys:

  • name: テーマの名前。この名前は、テーマ ピッカー UI に表示されます。また、管理者や開発者は、PowerShell コマンドレットや SharePoint REST API の呼び出しでテーマを参照するために使用します。name: The name of the theme, which appears in the theme picker UI and is also used by administrators and developers to refer to the theme in PowerShell cmdlets or calls to the SharePoint REST API.
  • iisInverted: この値は、淡色のテーマの場合は false、濃色のテーマの場合は true にします。この値により、SharePoint が色付きの背景に表示するテキストに淡色または濃色のどちらのテーマの色を使用するかを制御します。isInverted: This value should be false for light themes and true for dark themes; it controls whether SharePoint uses dark or light theme colors to render text on colored backgrounds.
  • backgroundImageUri: テーマに使用するオプションの背景画像の URI (背景画像がない場合は、この値を空白にします)。backgroundImageUri: The URI of an optional background image for the theme (value can be blank if no background image).
  • palette: テーマの RGB 色の設定。この設定は、次に示すキーを含む入れ子にされた JSON オブジェクトとして保存されます。palette: The RGB color settings for the theme, stored as a nested JSON object with the following keys:
    • themePrimarythemePrimary
    • themeLighterAltthemeLighterAlt
    • themeLighterthemeLighter
    • themeLightthemeLight
    • themeTertiarythemeTertiary
    • themeSecondarythemeSecondary
    • themeDarkAltthemeDarkAlt
    • themeDarkthemeDark
    • themeDarkerthemeDarker
    • neutralLighterAltneutralLighterAlt
    • neutralLighterneutralLighter
    • neutralLightneutralLight
    • neutralQuaternaryAltneutralQuaternaryAlt
    • neutralQuaternaryneutralQuaternary
    • neutralTertiaryAltneutralTertiaryAlt
    • neutralTertiaryneutralTertiary
    • neutralSecondaryAltneutralSecondaryAlt
    • neutralSecondaryneutralSecondary
    • neutralPrimaryAltneutralPrimaryAlt
    • neutralPrimaryneutralPrimary
    • neutralDarkneutralDark
    • blackblack
    • whitewhite
    • primaryBackgroundprimaryBackground
    • primaryTextprimaryText
    • bodyBackgroundbodyBackground
    • bodyTextbodyText
    • disabledBackgrounddisabledBackground
    • disabledTextdisabledText
    • errorerror
    • accentaccent

palette 要素の色は、6 桁または 3 桁の 16 進 RGB 文字列値として指定します。The colors in the palette element are specified as 6-digit or 3-digit hexadecimal RGB string values.

次に、テーマを定義する JSON オブジェクトの例を示します。The following is an example of a JSON object that defines a theme.

{
  "name": "Blue",
  "isInverted": true,
  "backgroundImageUri": "",
  "palette": {
    "themePrimary": "#00bcf2",
    "themeLighterAlt": "#00090c",
    "themeLighter": "#001318",
    "themeLight": "#002630",
    "themeTertiary": "#005066",
    "themeSecondary": "#00abda",
    "themeDarkAlt": "#0ecbff",
    "themeDark": "#44d6ff",
    "themeDarker": "#6cdfff",
    "neutralLighterAlt": "#2e3340",
    "neutralLighter": "#353a49",
    "neutralLight": "#404759",
    "neutralQuaternaryAlt": "#474e62",
    "neutralQuaternary": "#4c546a",
    "neutralTertiaryAlt": "#646e8a",
    "neutralTertiary": "#c8c8c8",
    "neutralSecondaryAlt": "#d0d0d0",
    "neutralSecondary": "#dadada",
    "neutralPrimaryAlt": "#eaeaea",
    "neutralPrimary": "#ffffff",
    "neutralDark": "#f4f4f4",
    "black": "#f8f8f8",
    "white": "#262a35",
    "primaryBackground": "#262a35",
    "primaryText": "#ffffff",
    "bodyBackground": "#ffffff",
    "bodyText": "#333333",
    "disabledBackground": "#f4f4f4",
    "disabledText": "#c8c8c8",
    "error": "#ff5f5f",
    "accent": "#ffb900"
  }
}

SharePoint Framework には、8 つの組み込みテーマが含まれています (淡色背景のものが 6 つ、濃色背景のものが 2 つあります)。The SharePoint Framework includes eight built-in themes: six on light backgrounds, and two on dark backgrounds. カスタムのテーマを作成する際には、この組み込みテーマのいずれかを開始点にして、そのテーマをニーズに合わせて調整すると簡単に作業できます。You might find it useful to create a custom theme by starting from one of the built-in themes and adjusting it to suit your needs.

テーマ ジェネレータ ツールを使用してカスタム テーマを作成するという、もう 1 つのオプションもあります。Another option is to use the Theme Generator tool to build a custom theme. これによってテーマの色を選択できる対話型 UI が提供され、カスタム テーマに対して JSON、SASS、および PowerShell 定義が自動的に生成されます。It provides an interactive UI for selecting theme colors, and automatically generates the JSON, SASS, and PowerShell definitions for your custom theme.

注意

現在のところ、テーマ ジェネレータの定義に色スロット「error」および「accent」は含まれません。The theme generator definitions do not currently include the "error" or "accent" color slots. 生成された定義をテナントにアップロードする前に、これらのスロットを手動で追加できます。These can be manually added to your generated definition before uploading to the tenant.

テーマ ジェネレータ ツール

次に、組み込みテーマの概要を示します。この概要には、カスタマイズの開始点として使用できるテーマの色の JSON 定義も示します。The following is a summary of the built-in themes, including JSON definitions for the theme colors that you can use as a starting point for customization.

青緑色のテーマTeal theme

次の表は、青緑色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Teal theme.

themeDarker: #014446themeDarker: #014446 black: #000000black: #000000
themeDark: #025c5fthemeDark: #025c5f neutralDark: #212121neutralDark: #212121
themeDarkAlt: #026d70themeDarkAlt: #026d70 neutralPrimary: #333neutralPrimary: #333
themePrimary: #03787cthemePrimary: #03787c neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #13898dthemeSecondary: #13898d neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #49aeb1themeTertiary: #49aeb1 neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #98d6d8themeLight: #98d6d8 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #c5e9eathemeLighter: #c5e9ea neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #f0f9fathemeLighterAlt: #f0f9fa white: #fffwhite: #fff

次のコードは、赤色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Red theme's color palette.

{ 
    themeDarker: '#014446', 
    themeDark: '#025c5f', 
    themeDarkAlt: '#026d70', 
    themePrimary: '#03787c', 
    themeSecondary: '#13898d', 
    themeTertiary: '#49aeb1', 
    themeLight: '#98d6d8', 
    themeLighter: '#c5e9ea', 
    themeLighterAlt: '#f0f9fa', 
    black: '#000000', 
    neutralDark: '#212121', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralSecondary: '#666666', 
    neutralTertiary: '#a6a6a6', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralLight: '#eaeaea', 
    neutralLighter: '#f4f4f4', 
    neutralLighterAlt: '#f8f8f8', 
    white: '#fff', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralSecondaryAlt: '#767676', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#4f6bed'
}

赤色のテーマRed theme

次の表は、赤色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Red theme.

themeDarker: #751b1ethemeDarker: #751b1e black: #000000black: #000000
themeDark: #952226themeDark: #952226 neutralDark: #212121neutralDark: #212121
themeDarkAlt: #c02b30themeDarkAlt: #c02b30 neutralPrimary: #333neutralPrimary: #333
themePrimary: #d13438themePrimary: #d13438 neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #d6494dthemeSecondary: #d6494d neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #ecaaacthemeTertiary: #ecaaac neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #f6d6d8themeLight: #f6d6d8 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #faebebthemeLighter: #faebeb neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #fdf5f5themeLighterAlt: #fdf5f5 white: #fffwhite: #fff

次のコードは、赤色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Red theme's color palette.

{ 
    themeDarker: '#751b1e', 
    themeDark: '#952226', 
    themeDarkAlt: '#c02b30', 
    themePrimary: '#d13438', 
    themeSecondary: '#d6494d', 
    themeTertiary: '#ecaaac', 
    themeLight: '#f6d6d8', 
    themeLighter: '#faebeb', 
    themeLighterAlt: '#fdf5f5', 
    black: '#000000', 
    neutralDark: '#212121', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralSecondary: '#666666', 
    neutralTertiary: '#a6a6a6', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralLight: '#eaeaea', 
    neutralLighter: '#f4f4f4', 
    neutralLighterAlt: '#f8f8f8', 
    white: '#fff', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralSecondaryAlt: '#767676', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#ca5010'
}

オレンジ色のテーマOrange theme

次の表は、オレンジ色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Orange theme.

themeDarker: #6f2d09themeDarker: #6f2d09 black: #000000black: #000000
themeDark: #8d390bthemeDark: #8d390b neutralDark: #212121neutralDark: #212121
themeDarkAlt: #b5490fthemeDarkAlt: #b5490f neutralPrimary: #333neutralPrimary: #333
themePrimary: #ca5010themePrimary: #ca5010 neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #e55c12themeSecondary: #e55c12 neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #f6b28dthemeTertiary: #f6b28d neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #fbdac9themeLight: #fbdac9 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #fdede4themeLighter: #fdede4 neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #fef6f1themeLighterAlt: #fef6f1 white: #fffwhite: #fff

次のコードは、オレンジ色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Orange theme's color palette.

{ 
    themeDarker: '#6f2d09', 
    themeDark: '#8d390b', 
    themeDarkAlt: '#b5490f', 
    themePrimary: '#ca5010', 
    themeSecondary: '#e55c12', 
    themeTertiary: '#f6b28d', 
    themeLight: '#fbdac9', 
    themeLighter: '#fdede4', 
    themeLighterAlt: '#fef6f1', 
    black: '#000000', 
    neutralDark: '#212121', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralSecondary: '#666666', 
    neutralTertiary: '#a6a6a6', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralLight: '#eaeaea', 
    neutralLighter: '#f4f4f4', 
    neutralLighterAlt: '#f8f8f8', 
    white: '#fff', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralSecondaryAlt: '#767676', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#986f0b'
}

緑色のテーマGreen theme

次の表は、緑色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Green theme.

themeDarker: #094c23themeDarker: #094c23 black: #000000black: #000000
themeDark: #0c602cthemeDark: #0c602c neutralDark: #212121neutralDark: #212121
themeDarkAlt: #0f7c39themeDarkAlt: #0f7c39 neutralPrimary: #333neutralPrimary: #333
themePrimary: #10893ethemePrimary: #10893e neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #14a94ethemeSecondary: #14a94e neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #7aefa7themeTertiary: #7aefa7 neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #bff7d5themeLight: #bff7d5 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #dffbeathemeLighter: #dffbea neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #effdf4themeLighterAlt: #effdf4 white: #fffwhite: #fff

次のコードは、緑色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Green theme's color palette.

{ 
    themePrimary: '#10893e', 
    themeLighterAlt: '#effdf4', 
    themeLighter: '#dffbea', 
    themeLight: '#bff7d5', 
    themeTertiary: '#7aefa7', 
    themeSecondary: '#14a94e', 
    themeDarkAlt: '#0f7c39', 
    themeDark: '#0c602c', 
    themeDarker: '#094c23', 
    neutralLighterAlt: '#f8f8f8', 
    neutralLighter: '#f4f4f4', 
    neutralLight: '#eaeaea', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralTertiary: '#a6a6a6', 
    neutralSecondaryAlt: '#767676', 
    neutralSecondary: '#666666', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralDark: '#212121', 
    black: '#000000', 
    white: '#fff', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#038387'
}

青色のテーマBlue theme

次の表は、青色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Blue theme.

themeDarker: #004578themeDarker: #004578 black: #000000black: #000000
themeDark: #005a9ethemeDark: #005a9e neutralDark: #212121neutralDark: #212121
themeDarkAlt: #106ebethemeDarkAlt: #106ebe neutralPrimary: #333neutralPrimary: #333
themePrimary: #0078d7themePrimary: #0078d7 neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #2b88d8themeSecondary: #2b88d8 neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #71afe5themeTertiary: #71afe5 neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #c7e0f4themeLight: #c7e0f4 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #deecf9themeLighter: #deecf9 neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #eff6fcthemeLighterAlt: #eff6fc white: #fffwhite: #fff

次のコードは、青色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Blue theme's color palette.

{ 
    themePrimary: '#0078d7', 
    themeLighterAlt: '#eff6fc', 
    themeLighter: '#deecf9', 
    themeLight: '#c7e0f4', 
    themeTertiary: '#71afe5', 
    themeSecondary: '#2b88d8', 
    themeDarkAlt: '#106ebe', 
    themeDark: '#005a9e', 
    themeDarker: '#004578', 
    neutralLighterAlt: '#f8f8f8', 
    neutralLighter: '#f4f4f4', 
    neutralLight: '#eaeaea', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralTertiary: '#a6a6a6', 
    neutralSecondaryAlt: '#767676', 
    neutralSecondary: '#666666', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralDark: '#212121', 
    black: '#000000', 
    white: '#fff', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#8764b8'
}

紫色のテーマPurple theme

次の表は、紫色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Purple theme.

themeDarker: #27268athemeDarker: #27268a black: #000000black: #000000
themeDark: #3230b0themeDark: #3230b0 neutralDark: #212121neutralDark: #212121
themeDarkAlt: #5250cfthemeDarkAlt: #5250cf neutralPrimary: #333neutralPrimary: #333
themePrimary: #6b69d6themePrimary: #6b69d6 neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #7a78dathemeSecondary: #7a78da neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #c1c0eethemeTertiary: #c1c0ee neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #e1e1f7themeLight: #e1e1f7 neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #f0f0fbthemeLighter: #f0f0fb neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #f8f7fdthemeLighterAlt: #f8f7fd white: #fffwhite: #fff

次のコードは、紫色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Purple theme's color palette.

{ 
    themePrimary: '#6b69d6', 
    themeLighterAlt: '#f8f7fd', 
    themeLighter: '#f0f0fb', 
    themeLight: '#e1e1f7', 
    themeTertiary: '#c1c0ee', 
    themeSecondary: '#7a78da', 
    themeDarkAlt: '#5250cf', 
    themeDark: '#3230b0', 
    themeDarker: '#27268a', 
    neutralLighterAlt: '#f8f8f8', 
    neutralLighter: '#f4f4f4', 
    neutralLight: '#eaeaea', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralTertiary: '#a6a6a6', 
    neutralSecondaryAlt: '#767676', 
    neutralSecondary: '#666666', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralDark: '#212121', 
    black: '#000000', 
    white: '#fff', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#038387'
}

灰色のテーマGray theme

次の表は、灰色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Gray theme.

themeDarker: #323130themeDarker: #323130 black: #000000black: #000000
themeDark: #403e3dthemeDark: #403e3d neutralDark: #212121neutralDark: #212121
themeDarkAlt: #53504ethemeDarkAlt: #53504e neutralPrimary: #333neutralPrimary: #333
themePrimary: #5d5a58themePrimary: #5d5a58 neutralPrimaryAlt: #3c3c3cneutralPrimaryAlt: #3c3c3c
neutralSecondary: #666666neutralSecondary: #666666
neutralTertiary: #a6a6a6neutralTertiary: #a6a6a6
themeSecondary: #6d6a67themeSecondary: #6d6a67 neutralTertiaryAlt: #c8c8c8neutralTertiaryAlt: #c8c8c8
themeTertiary: #bbb9b8themeTertiary: #bbb9b8 neutralLight: #eaeaeaneutralLight: #eaeaea
themeLight: #dfdeddthemeLight: #dfdedd neutralLighter: #f4f4f4neutralLighter: #f4f4f4
themeLighter: #efeeeethemeLighter: #efeeee neutralLighterAlt: #f8f8f8neutralLighterAlt: #f8f8f8
themeLighterAlt: #f7f7f7themeLighterAlt: #f7f7f7 white: #fffwhite: #fff

次のコードは、灰色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Gray theme's color palette.

{ 
    themePrimary: '#5d5a58', 
    themeLighterAlt: '#f7f7f7', 
    themeLighter: '#efeeee', 
    themeLight: '#dfdedd', 
    themeTertiary: '#bbb9b8', 
    themeSecondary: '#6d6a67', 
    themeDarkAlt: '#53504e', 
    themeDark: '#403e3d', 
    themeDarker: '#323130', 
    neutralLighterAlt: '#f8f8f8', 
    neutralLighter: '#f4f4f4', 
    neutralLight: '#eaeaea', 
    neutralQuaternaryAlt: '#dadada', 
    neutralQuaternary: '#d0d0d0', 
    neutralTertiaryAlt: '#c8c8c8', 
    neutralTertiary: '#a6a6a6', 
    neutralSecondaryAlt: '#767676', 
    neutralSecondary: '#666666', 
    neutralPrimary: '#333', 
    neutralPrimaryAlt: '#3c3c3c', 
    neutralDark: '#212121', 
    black: '#000000', 
    white: '#fff', 
    primaryBackground: '#fff', 
    primaryText: '#333',
    accent: '#0078d4'
}

濃い黄色のテーマDark Yellow theme

次の表は、濃い黄色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Dark Yellow theme.

themeDarker: #fff171themeDarker: #fff171 black: #f8f8f8black: #f8f8f8
themeDark: #ffed4bthemeDark: #ffed4b neutralDark: #f4f4f4neutralDark: #f4f4f4
themeDarkAlt: #ffe817themeDarkAlt: #ffe817 neutralPrimary: #ffffffneutralPrimary: #ffffff
themePrimary: #fce100themePrimary: #fce100 neutralPrimaryAlt: #eaeaeaneutralPrimaryAlt: #eaeaea
neutralSecondary: #dadadaneutralSecondary: #dadada
neutralTertiary: #c8c8c8neutralTertiary: #c8c8c8
themeSecondary: #e3cc00themeSecondary: #e3cc00 neutralTertiaryAlt: #6d6d6dneutralTertiaryAlt: #6d6d6d
themeTertiary: #6a5f00themeTertiary: #6a5f00 neutralLight: #3f3f3fneutralLight: #3f3f3f
themeLight: #322d00themeLight: #322d00 neutralLighter: #313131neutralLighter: #313131
themeLighter: #191700themeLighter: #191700 neutralLighterAlt: #282828neutralLighterAlt: #282828
themeLighterAlt: #0d0b00themeLighterAlt: #0d0b00 white: #1f1f1fwhite: #1f1f1f

次のコードは、濃い黄色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Dark Yellow theme's color palette.

{ 
    themePrimary: '#fce100', 
    themeLighterAlt: '#0d0b00', 
    themeLighter: '#191700', 
    themeLight: '#322d00', 
    themeTertiary: '#6a5f00', 
    themeSecondary: '#e3cc00', 
    themeDarkAlt: '#ffe817', 
    themeDark: '#ffed4b', 
    themeDarker: '#fff171', 
    neutralLighterAlt: '#282828', 
    neutralLighter: '#313131', 
    neutralLight: '#3f3f3f', 
    neutralQuaternaryAlt: '#484848', 
    neutralQuaternary: '#4f4f4f', 
    neutralTertiaryAlt: '#6d6d6d', 
    neutralTertiary: '#c8c8c8', 
    neutralSecondaryAlt: '#d0d0d0', 
    neutralSecondary: '#dadada', 
    neutralPrimaryAlt: '#eaeaea', 
    neutralPrimary: '#ffffff', 
    neutralDark: '#f4f4f4', 
    black: '#f8f8f8', 
    white: '#1f1f1f', 
    primaryBackground: '#1f1f1f', 
    primaryText: '#ffffff', 
    error: '#ff5f5f',
    accent: '#ffc83d'
}

濃い青色のテーマDark Blue theme

次の表は、濃い青色のテーマに使用されているカラー パレットを示しています。The following table shows the color palette used by the Dark Blue theme.

themeDarker: #6cdfffthemeDarker: #6cdfff black: #f8f8f8black: #f8f8f8
themeDark: #44d6ffthemeDark: #44d6ff neutralDark: #f4f4f4neutralDark: #f4f4f4
themeDarkAlt: #0ecbffthemeDarkAlt: #0ecbff neutralPrimary: #ffffffneutralPrimary: #ffffff
themePrimary: #00bcf2themePrimary: #00bcf2 neutralPrimaryAlt: #eaeaeaneutralPrimaryAlt: #eaeaea
neutralSecondary: #dadadaneutralSecondary: #dadada
neutralTertiary: #c8c8c8neutralTertiary: #c8c8c8
themeSecondary: #00abdathemeSecondary: #00abda neutralTertiaryAlt: #646e8aneutralTertiaryAlt: #646e8a
themeTertiary: #005066themeTertiary: #005066 neutralLight: #404759neutralLight: #404759
themeLight: #002630themeLight: #002630 neutralLighter: #353a49neutralLighter: #353a49
themeLighter: #001318themeLighter: #001318 neutralLighterAlt: #2e3340neutralLighterAlt: #2e3340
themeLighterAlt: #00090cthemeLighterAlt: #00090c white: #262a35white: #262a35

次のコードは、濃い青色のテーマのカラー パレットに対応するディクショナリを PowerShell で定義する方法を示しています。The following code shows how to define a dictionary in PowerShell for the Dark Blue theme's color palette.

{ 
    themePrimary: '#00bcf2', 
    themeLighterAlt: '#00090c', 
    themeLighter: '#001318', 
    themeLight: '#002630', 
    themeTertiary: '#005066', 
    themeSecondary: '#00abda', 
    themeDarkAlt: '#0ecbff', 
    themeDark: '#44d6ff', 
    themeDarker: '#6cdfff', 
    neutralLighterAlt: '#2e3340', 
    neutralLighter: '#353a49', 
    neutralLight: '#404759', 
    neutralQuaternaryAlt: '#474e62', 
    neutralQuaternary: '#4c546a', 
    neutralTertiaryAlt: '#646e8a', 
    neutralTertiary: '#c8c8c8', 
    neutralSecondaryAlt: '#d0d0d0', 
    neutralSecondary: '#dadada', 
    neutralPrimaryAlt: '#eaeaea', 
    neutralPrimary: '#ffffff', 
    neutralDark: '#f4f4f4', 
    black: '#f8f8f8', 
    white: '#262a35', 
    primaryBackground: '#262a35', 
    primaryText: '#ffffff',
    error: '#ff5f5f',
    accent: '#3a96dd'
}

関連項目See also