コガネブログ

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

【Unity】Unity 2019.3 で UIElements を使用してエディタの色を変更してみる

概要

上記のような「common.uss」という名前のファイルを

f:id:baba_s:20200106202723p:plain

Unity 2019.3 のプロジェクトの
「Assets/Editor/StyleSheets/Extensions」フォルダに追加することで

f:id:baba_s:20200106203424p:plain

Unity エディタのいくつかの UI の色を変更することができます
例えば common.uss で AppCommandLeftOn クラスの色を指定することで
Unity 再生中に再生ボタンを赤くする、といったことができるようになります

検証環境

  • Unity 2019.3.0f3

目次

AppCommandLeft, AppCommandLeftOn

.AppCommandLeft {
    background-color: rgba(255, 0, 0, 1);
}

.AppCommandLeft:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppCommandLeft:active {
    background-color: rgba(0, 255, 0, 1);
}

.AppCommandLeftOn {
    background-color: rgba(0, 255, 255, 1);
}

f:id:baba_s:20200106200916g:plain

f:id:baba_s:20200106202242g:plain

AppCommandMid

.AppCommandMid {
    background-color: rgba(255, 0, 0, 1);
}

.AppCommandMid:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppCommandMid:active {
    background-color: rgba(0, 255, 0, 1);
}

f:id:baba_s:20200106201303g:plain

f:id:baba_s:20200106202321g:plain

AppCommandRight

.AppCommandRight {
    background-color: rgba(255, 0, 0, 1);
}

.AppCommandRight:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppCommandRight:active {
    background-color: rgba(0, 255, 0, 1);
}

f:id:baba_s:20200106201310g:plain

f:id:baba_s:20200106202353g:plain

AppCommand

.AppCommand {
    background-color: rgba(255, 0, 0, 1);
}

.AppCommand:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppCommand:active {
    background-color: rgba(0, 255, 0, 1);
}

f:id:baba_s:20200106201449g:plain

AppToolbarButtonLeft

.AppToolbarButtonLeft {
    background-color: rgba(255, 0, 0, 1);
}

.AppToolbarButtonLeft:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppToolbarButtonLeft:active {
    background-color: rgba(0, 255, 0, 1);
}

f:id:baba_s:20200106201632g:plain

AppToolbarButtonRight

.AppToolbarButtonRight {
    background-color: rgba(255, 0, 0, 1);
}

.AppToolbarButtonRight:hover {
    background-color: rgba(255, 255, 0, 1);
}

.AppToolbarButtonRight:active {
    background-color: rgba(0, 255, 0, 1);
}

f:id:baba_s:20200106202758g:plain

AppToolbar

.AppToolbar {
    background-color: rgba(255, 0, 0, 1);
}

f:id:baba_s:20200106201837p:plain

dockHeader

.dockHeader {
    background-color: rgba(255, 0, 0, 1);
}

f:id:baba_s:20200106202056p:plain

参考サイト様

https://forum.unity.com/threads/editor-skinning-thread.711059/

https://forum.unity.com/threads/unity-why-have-you-made-your-entire-gui-look-like-garbage-now.709037/#post-4747730