はじめに

f:id:baba_s:20200927134318p:plain

Unity プロジェクトの Assets フォルダに「Editor/StyleSheets/Extensions」フォルダを作って
その中に「common.uss」を追加してコードを記述することで
エディタの UI の色や形を変えられます

:root {
    --unity-metrics-default-border_radius: 12px;
}

例えば common.uss に上記のコードを記述することで

f:id:baba_s:20200927134635p:plain

タブやボタンや入力欄の形が

f:id:baba_s:20200927132845p:plain

角丸になります

この記事では common.uss で記述できるコードをいくつか紹介していきます

検証環境

Unity 2020.2.0b2

サンプル

f:id:baba_s:20200927132854p:plain

:root {
    --unity-colors-default-text:rgb(0, 128, 192);
}

f:id:baba_s:20200927132903p:plain

:root {
    --unity-colors-highlight-background:rgb(0, 128, 192);
    --unity-colors-highlight-background-hover:rgb(0, 128, 192);
    --unity-colors-highlight-background-inactive: rgb(0, 128, 192);
}

f:id:baba_s:20200927133431p:plain

:root {
    --unity-colors-app_toolbar-background:  rgb(0, 128, 192);
}

f:id:baba_s:20200927132910p:plain

:root {
    --unity-colors-app_toolbar_button-background:  rgb(0, 128, 192);
    --unity-colors-app_toolbar_button-background-hover:  rgb(0, 128, 192);
    --unity-colors-app_toolbar_button-background-checked:  rgb(0, 128, 192);
    --unity-colors-app_toolbar_button-background-pressed:  rgb(0, 128, 192);
}

f:id:baba_s:20200927132937p:plain

:root {
    --unity-colors-button-background: rgb(0, 128, 192);
    --unity-colors-button-background-pressed: rgb(0, 128, 192);
    --unity-colors-button-background-focus: rgb(0, 128, 192);
    --unity-colors-button-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927132945p:plain

:root {
    --unity-colors-button-border: rgb(0, 128, 192);
    --unity-colors-button-border-pressed: rgb(0, 128, 192);
    --unity-colors-button-border_accent: rgb(0, 128, 192);
}

f:id:baba_s:20200927132954p:plain

:root {
    --unity-colors-button-text: rgb(0, 128, 192);
}

f:id:baba_s:20200927133003p:plain

:root {
    --unity-colors-dropdown-background: rgb(0, 128, 192);
    --unity-colors-dropdown-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927133014p:plain

:root {
    --unity-colors-dropdown-border: rgb(0, 128, 192);
    --unity-colors-dropdown-border_accent: rgb(0, 128, 192);
}

f:id:baba_s:20200927133022p:plain

:root {
    --unity-colors-dropdown-text: rgb(0, 128, 192);
}

f:id:baba_s:20200927133029p:plain

:root {
    --unity-colors-helpbox-background: rgb(0, 128, 192);
    --unity-colors-helpbox-border: rgb(0, 128, 192);
    --unity-colors-helpbox-text: rgb(255, 255, 0);
}

f:id:baba_s:20200927133037p:plain

:root {
    --unity-colors-input_field-background: rgb(0, 128, 192);
    --unity-colors-input_field-border: rgb(255, 0, 0);
    --unity-colors-input_field-border-focus: rgb(255, 0, 0);
    --unity-colors-input_field-border-hover: rgb(255, 0, 0);
    --unity-colors-input_field-border_accent: rgb(255, 0, 0);
}

f:id:baba_s:20200927133047p:plain

:root {
    --unity-colors-object_field-background: rgb(0, 128, 192);
    --unity-colors-object_field-border: rgb(255, 0, 0);
    --unity-colors-object_field-border-focus: rgb(255, 0, 0);
    --unity-colors-object_field-border-hover: rgb(255, 0, 0);
}

f:id:baba_s:20200927133056p:plain

:root {
    --unity-colors-object_field_button-background: rgb(0, 128, 192);
    --unity-colors-object_field_button-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927133104p:plain

:root {
    --unity-colors-preview-background: rgb(0, 128, 192);
    --unity-colors-preview-border: rgb(255, 0, 0);
    --unity-colors-preview-text: rgb(255, 0, 0);
    --unity-colors-preview_overlay-text: rgb(255, 0, 0);
}

f:id:baba_s:20200927133111p:plain

:root {
    --unity-colors-scrollbar_groove-background: rgb(0, 128, 192);
    --unity-colors-scrollbar_groove-border: rgb(0, 128, 192);
    --unity-colors-scrollbar_thumb-background: rgb(0, 128, 192);
    --unity-colors-scrollbar_thumb-background-hover: rgb(0, 128, 192);
    --unity-colors-scrollbar_thumb-border: rgb(0, 128, 192);
    --unity-colors-scrollbar_thumb-border-hover: rgb(0, 128, 192);
    --unity-colors-scrollbar_button-background: rgb(0, 128, 192);
    --unity-colors-scrollbar_button-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927133117p:plain

:root {
    --unity-colors-slider_groove-background: rgb(0, 128, 192);
    --unity-colors-slider_groove-background-disabled: rgb(0, 128, 192);
    --unity-colors-slider_thumb-background: rgb(0, 128, 192);
    --unity-colors-slider_thumb-background-disabled: rgb(0, 128, 192);
    --unity-colors-slider_thumb-background-hover: rgb(0, 128, 192);
    --unity-colors-slider_thumb-border: rgb(0, 128, 192);
    --unity-colors-slider_thumb-border-disabled: rgb(0, 128, 192);
    --unity-colors-slider_thumb_halo-background: rgb(0, 128, 192);
}

f:id:baba_s:20200927133125p:plain

:root {
    --unity-colors-toolbar_button-background: rgb(0, 128, 192);
    --unity-colors-toolbar_button-background-hover: rgb(0, 128, 192);
    --unity-colors-toolbar_button-background-checked: rgb(0, 128, 192);
    --unity-colors-toolbar_button-background-focus: rgb(0, 128, 192);
}

f:id:baba_s:20200927133133p:plain

:root {
    --unity-colors-toolbar_button-border: rgb(0, 128, 192);
}

f:id:baba_s:20200927133142p:plain

:root {
    --unity-colors-toolbar_button-text: rgb(0, 128, 192);
    --unity-colors-toolbar_button-text-hover: rgb(0, 128, 192);
    --unity-colors-toolbar_button-text-checked: rgb(0, 128, 192);
}

f:id:baba_s:20200927133151p:plain

:root {
    --unity-colors-toolbar-background: rgb(0, 128, 192);
    --unity-colors-toolbar-border: rgb(0, 128, 192);
}

f:id:baba_s:20200927133159p:plain

:root {
    --unity-colors-tab-background: rgb(0, 128, 192);
    --unity-colors-tab-background-checked: rgb(0, 128, 192);
    --unity-colors-tab-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927133207p:plain

:root {
    --unity-colors-window-background: rgb(0, 128, 192);
}

f:id:baba_s:20200927133242p:plain

:root {
    --unity-colors-inspector_titlebar-background: rgb(0, 128, 192);
    --unity-colors-inspector_titlebar-background-hover: rgb(0, 128, 192);
}

f:id:baba_s:20200927133252p:plain

:root {
    --unity-colors-inspector_titlebar-border: rgb(0, 128, 192);
    --unity-colors-inspector_titlebar-border_accent: rgb(0, 128, 192);
}

f:id:baba_s:20200927133800p:plain

:root {
    --unity-theme-background-color-1: rgb(0, 128, 192);
    --unity-theme-background-color-2: rgb(0, 128, 192);
    --unity-theme-background-color-3: rgb(0, 128, 192);
    --unity-theme-background-color-4: rgb(0, 128, 192);
    --unity-theme-background-color-5: rgb(0, 128, 192);
    --unity-theme-background-color-6: rgb(0, 128, 192);
    --unity-theme-background-color-7: rgb(0, 128, 192);
    --unity-theme-background-color-8: rgb(0, 128, 192);
    --unity-theme-background-color-9: rgb(0, 128, 192);
    --unity-theme-background-color-10: rgb(0, 128, 192);
    --unity-theme-background-color-11: rgb(0, 128, 192);
    --unity-theme-background-color-12: rgb(0, 128, 192);
    --unity-theme-background-color-13: rgb(0, 128, 192);
    --unity-theme-background-color-14: rgb(0, 128, 192);
    --unity-theme-background-color-15: rgb(0, 128, 192);
    --unity-theme-background-color-16: rgb(0, 128, 192);
    --unity-theme-background-color-17: rgb(0, 128, 192);
    --unity-theme-background-color-50: rgb(0, 128, 192);
    --unity-theme-background-color-51: rgb(0, 128, 192);
    --unity-theme-background-color-52: rgb(0, 128, 192);
    --unity-theme-background-color-53: rgb(0, 128, 192);
    --unity-theme-background-color-54: rgb(0, 128, 192);
    --unity-theme-background-color-55: rgb(0, 128, 192);
    --unity-theme-background-color-56: rgb(0, 128, 192);
    --unity-theme-background-color-57: rgb(0, 128, 192);
    --unity-theme-background-color-58: rgb(0, 128, 192);
    --unity-theme-background-color-59: rgb(0, 128, 192);
    --unity-theme-background-color-60: rgb(0, 128, 192);
    --unity-theme-background-color-80: rgb(0, 128, 192);
    --unity-theme-background-color-81: rgb(0, 128, 192);
    --unity-theme-background-color-82: rgb(0, 128, 192);
    --unity-theme-background-color-83: rgb(0, 128, 192);
    --unity-theme-background-color-84: rgb(0, 128, 192);
    --unity-theme-background-color-85: rgb(0, 128, 192);
    --unity-theme-background-color-86: rgb(0, 128, 192);
    --unity-theme-background-color-87: rgb(0, 128, 192);
    --unity-theme-background-color-88: rgb(0, 128, 192);
    --unity-theme-background-color-89: rgb(0, 128, 192);
    --unity-theme-background-color-90: rgb(0, 128, 192);
    --unity-theme-border-color-1: rgb(0, 128, 192);
    --unity-theme-border-color-2: rgb(0, 128, 192);
    --unity-theme-border-color-3: rgb(0, 128, 192);
    --unity-theme-border-color-4: rgb(0, 128, 192);
    --unity-theme-border-color-5: rgb(0, 128, 192);
    --unity-theme-border-color-6: rgb(0, 128, 192);
    --unity-theme-border-color-7: rgb(0, 128, 192);
    --unity-theme-border-color-8: rgb(0, 128, 192);
    --unity-theme-border-color-9: rgb(0, 128, 192);
    --unity-theme-border-color-10: rgb(0, 128, 192);
    --unity-theme-border-color-11: rgb(0, 128, 192);
    --unity-theme-border-color-12: rgb(0, 128, 192);
    --unity-theme-border-color-13: rgb(0, 128, 192);
    --unity-theme-border-color-14: rgb(0, 128, 192);
    --unity-theme-border-color-15: rgb(0, 128, 192);
    --unity-theme-border-color-16: rgb(0, 128, 192);
    --unity-theme-border-color-17: rgb(0, 128, 192);
    --unity-theme-border-color-18: rgb(0, 128, 192);
    --unity-theme-border-color-19: rgb(0, 128, 192);
    --unity-theme-border-color-20: rgb(0, 128, 192);
    --unity-theme-border-color-21: rgb(0, 128, 192);
    --unity-theme-border-color-22: rgb(0, 128, 192);
    --unity-theme-text-color-1: rgb(0, 128, 192);
    --unity-theme-text-color-2: rgb(0, 128, 192);
    --unity-theme-text-color-3: rgb(0, 128, 192);
    --unity-theme-text-color-4: rgb(0, 128, 192);
    --unity-theme-text-color-5: rgb(0, 128, 192);
    --unity-theme-text-color-6: rgb(0, 128, 192);
    --unity-theme-text-color-7: rgb(0, 128, 192);
    --unity-theme-text-color-8: rgb(0, 128, 192);
    --unity-theme-text-color-9: rgb(0, 128, 192);
    --unity-theme-text-color-10: rgb(0, 128, 192);
    --unity-theme-text-color-11: rgb(0, 128, 192);
    --unity-theme-text-color-12: rgb(0, 128, 192);
    --unity-theme-text-color-13: rgb(0, 128, 192);
}

f:id:baba_s:20200927134054p:plain

:root {
    --unity-metrics-toolbar-height: 100px;
}

備考

Unity 2020.2.0b2 の時点で使われている .uss は上記のリポジトリにアップしております

コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】2020.2b 新機能 - エディタの UI の色や形をスタイルシートで変えられる

はじめに

検証環境

サンプル

備考

関連記事

参考サイト様