//
// ContentView.swift
// ColorPalleteDemo
//
// Created by HIROKI IKEUCHI on 2023/08/06.
//
import SwiftUI
struct hoge: Hashable {
let name: String
let color: Color
}
/// [UI Element Colors](https://developer.apple.com/documentation/appkit/nscolor/ui_element_colors)
struct ColorTheme: Identifiable, Hashable {
let id = UUID().uuidString
let name: String
let definedColors: [DefinedColor]
static let all: [ColorTheme] = [
.init(name: "ラベルの色", definedColors: [
.init(name: "labelColor",
nsColor: .labelColor,
description: "テキストラベルに使用する主な色。"),
.init(name: "secondaryLabelColor",
nsColor: .secondaryLabelColor,
description: "テキストラベルに使用する二次色。"),
.init(name: "tertiaryLabelColor",
nsColor: .tertiaryLabelColor,
description: "テキスト ラベルに使用する 3 番目の色。"),
.init(name: "quaternaryLabelColor",
nsColor: .quaternaryLabelColor,
description: "テキストラベルと区切り文字に使用する第 4 色。"),
]),
.init(name: "文字の色", definedColors: [
.init(name: "textColor",
nsColor: .textColor,
description: "テキストに使用する色。"),
.init(name: "placeholderTextColor",
nsColor: .placeholderTextColor,
description: "コントロールまたはテキスト ビューのプレースホルダー テキストに使用する色。"),
.init(name: "selectedTextColor",
nsColor: .selectedTextColor,
description: "選択したテキストに使用する色。"),
.init(name: "textBackgroundColor",
nsColor: .textBackgroundColor,
description: "テキストの後ろの背景領域に使用する色。"),
.init(name: "selectedTextBackgroundColor",
nsColor: .selectedTextBackgroundColor,
description: "選択したテキストの背景に使用する色。"),
.init(name: "keyboardFocusIndicatorColor",
nsColor: .keyboardFocusIndicatorColor,
description: "コントロールの周囲のキーボード フォーカス リングに使用する色。"),
.init(name: "unemphasizedSelectedTextColor",
nsColor: .unemphasizedSelectedTextColor,
description: "強調されていないコンテキストで選択されたテキストに使用する色。"),
.init(name: "unemphasizedSelectedTextBackgroundColor",
nsColor: .unemphasizedSelectedTextBackgroundColor,
description: "強調されていないコンテキストでテキストの背景に使用する色。"),
]),
.init(name: "ラベルの色", definedColors: [
.init(name: "labelColor",
nsColor: .labelColor,
description: "テキストラベルに使用する主な色。"),
.init(name: "secondaryLabelColor",
nsColor: .secondaryLabelColor,
description: "テキストラベルに使用する二次色。"),
.init(name: "tertiaryLabelColor",
nsColor: .tertiaryLabelColor,
description: "テキスト ラベルに使用する 3 番目の色。"),
.init(name: "quaternaryLabelColor",
nsColor: .quaternaryLabelColor,
description: "テキストラベルと区切り文字に使用する第 4 色。"),
]),
.init(name: "文字の色", definedColors: [
.init(name: "textColor",
nsColor: .textColor,
description: "テキストに使用する色。"),
.init(name: "placeholderTextColor",
nsColor: .placeholderTextColor,
description: "コントロールまたはテキスト ビューのプレースホルダー テキストに使用する色。"),
.init(name: "selectedTextColor",
nsColor: .selectedTextColor,
description: "選択したテキストに使用する色。"),
.init(name: "textBackgroundColor",
nsColor: .textBackgroundColor,
description: "テキストの後ろの背景領域に使用する色。"),
.init(name: "selectedTextBackgroundColor",
nsColor: .selectedTextBackgroundColor,
description: "選択したテキストの背景に使用する色。"),
.init(name: "keyboardFocusIndicatorColor",
nsColor: .keyboardFocusIndicatorColor,
description: "コントロールの周囲のキーボード フォーカス リングに使用する色。"),
.init(name: "unemphasizedSelectedTextColor",
nsColor: .unemphasizedSelectedTextColor,
description: "強調されていないコンテキストで選択されたテキストに使用する色。"),
.init(name: "unemphasizedSelectedTextBackgroundColor",
nsColor: .unemphasizedSelectedTextBackgroundColor,
description: "強調されていないコンテキストでテキストの背景に使用する色。"),
]),
.init(name: "コンテンツの色", definedColors: [
.init(name: "linkColor",
nsColor: .linkColor,
description: "リンクに使用する色。"),
.init(name: "separatorColor",
nsColor: .separatorColor,
description: "コンテンツの異なるセクション間の区切り文字に使用する色。"),
.init(name: "selectedContentBackgroundColor",
nsColor: .selectedContentBackgroundColor,
description: "選択され強調されたコンテンツの背景に使用する色。"),
.init(name: "unemphasizedSelectedContentBackgroundColor",
nsColor: .unemphasizedSelectedContentBackgroundColor,
description: "選択された強調されていないコンテンツに使用する色。"),
]),
.init(name: "メニューの色", definedColors: [
.init(name: "selectedMenuItemTextColor",
nsColor: .selectedMenuItemTextColor,
description: "メニュー項目のテキストに使用する色。"),
]),
.init(name: "テーブルの色", definedColors: [
.init(name: "gridColor",
nsColor: .gridColor,
description: "テーブル ビューのグリッド線など、オプションのグリッド線に使用する色。"),
.init(name: "headerTextColor",
nsColor: .headerTextColor,
description: "テーブル ビューとアウトライン ビューのヘッダー セルのテキストに使用する色。"),
// .init(name: "alternatingContentBackgroundColors: ",
// nsColor: .alternatingContentBackgroundColors,
// description: "交互のコンテンツに使用する色。通常はテーブル ビューとコレクション ビューにあります。"),
]),
.init(name: "コントロールカラー", definedColors: [
.init(name: "controlAccentColor",
nsColor: .controlAccentColor,
description: "ユーザーの現在のアクセントカラーの設定。"),
.init(name: "controlColor",
nsColor: .controlColor,
description: "コントロールの平らな表面に使用する色。"),
.init(name: "controlBackgroundColor",
nsColor: .controlBackgroundColor,
description: "スクロール ビューやテーブル ビューなどの大きなコントロールの背景に使用する色。"),
.init(name: "controlTextColor",
nsColor: .controlTextColor,
description: "有効なコントロールのテキストに使用する色。"),
.init(name: "disabledControlTextColor",
nsColor: .disabledControlTextColor,
description: "無効なコントロールのテキストに使用する色。"),
// .init(name: "currentControlTint: NSCo",
// nsColor: .currentControlTint,
// description: "現在のシステム制御の色合い。"),
.init(name: "selectedControlColor",
nsColor: .selectedControlColor,
description: "選択したコントロール、つまりクリックまたはドラッグされているコントロールの面に使用する色。"),
.init(name: "selectedControlTextColor",
nsColor: .selectedControlTextColor,
description: "選択したコントロール、つまりクリックまたはドラッグされているコントロール内のテキストに使用する色。"),
.init(name: "alternateSelectedControlTextColor",
nsColor: .alternateSelectedControlTextColor,
description: "選択したコントロールのテキストに使用する色。"),
.init(name: "scrubberTexturedBackground",
nsColor: .scrubberTexturedBackground,
description: "スクラバー コントロールの背景に使用するパターン化された色。"),
]),
.init(name: "ウィンドウの色", definedColors: [
.init(name: "windowBackgroundColor",
nsColor: .windowBackgroundColor,
description: "ウィンドウの背景に使用する色。"),
.init(name: "windowFrameTextColor",
nsColor: .windowFrameTextColor,
description: "ウィンドウのフレーム内のテキストに使用する色。"),
.init(name: "underPageBackgroundColor",
nsColor: .underPageBackgroundColor,
description: "ウィンドウのビューの下の領域で使用する色。"),
]),
.init(name: "ハイライトとシャドウ", definedColors: [
.init(name: "findHighlightColor",
nsColor: .findHighlightColor,
description: "インライン検索結果の値を表示するバブルに使用する強調表示の色。"),
.init(name: "highlightColor",
nsColor: .highlightColor,
description: "画面上の仮想光源として使用する色。"),
.init(name: "shadowColor",
nsColor: .shadowColor,
description: "画面上の隆起したオブジェクトによって投影される仮想影に使用する色。"),
]),
]
}
struct DefinedColor: Identifiable, Hashable {
let id = UUID().uuidString
let name: String
let color: Color
let description: String
init(name: String, nsColor: NSColor, description: String) {
self.name = name
self.color = Color(nsColor: nsColor)
self.description = description
}
}
struct ContentView: View {
@State var selectedColorTheme: ColorTheme = ColorTheme.all.first!
var body: some View {
VStack {
Picker("テーマ", selection: $selectedColorTheme) {
ForEach(ColorTheme.all, id: \.self) { theme in
Text(theme.name).tag(theme.id)
}
}
ColorThemeView(colorTheme: selectedColorTheme)
}
.padding()
}
}
struct ColorThemeView: View {
let colorTheme: ColorTheme
var body: some View {
VStack {
HStack {
Text(colorTheme.name)
.font(.headline)
Spacer()
}
Table(colorTheme.definedColors) {
TableColumn("名前", value: \.name)
TableColumn("色") { definedColor in
ZStack {
Rectangle()
.foregroundColor(Color(nsColor: .windowBackgroundColor))
Rectangle()
.foregroundColor(definedColor.color)
.padding(4)
}
.frame(width: 40, height: 40)
}
.width(60)
TableColumn("説明", value: \.description)
}
}
// .fixedSize(horizontal: true, vertical: true)
}
}
struct ColorThemeView_Previews: PreviewProvider {
static var previews: some View {
ColorThemeView(colorTheme: ColorTheme.all.first!)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}-
-
Save pommdau/44404028968d0566c946738278840109 to your computer and use it in GitHub Desktop.
NSColorのプレビュー
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment