symponic-mpdでは「COLOR THEME」というプラグインでWebuiの画面色を変更可能に設計しています。
標準ではlightとdarkの2種類のみ用意していますが、以下の方法で追加することが可能です。
"symponic-mpd" is designed so that the screen color of Webui can be changed with a plug-in called "COLOR THEME".
By default, only two types, light and dark, are available, but you add another ones by the following methods.
なお、COLOR THEMEについてはv0.96でも対応していますが、
後述のwebuiでの機能拡張予定はありません。
COLOR THEME is also supported in v0.96,
There are no plans to expand the functionality, because it deplicated.
①cssファイルの編集(edit the css file)
「/opt/plugins/20-color/dark.css」をftpクライアントでダウンロード、dark.css.zip 左のダウンロードリンクからzipファイルをダウンロードして解凍、
もしくは 本スレッドの以下の貼付データをそのまま複写して編集してください。
you can download dark.css from "/opt/plugins/20-color" via ftp client app,
via this download link,
or copy and edit the following pasted data of this thread code contents.
/* symphonic-mpdスキン対応用CSSファイル
* このCSSファイルが存在する場合はCSSファイルに記載の値が反映されて
* 外観の色が変更されます。
* 値が未定義（もしくはCSSファイルが存在しない）場合は
* 規定の白のスキンの値が使用されて表示されます。
*
* Copyright © 2020 symphonic-mpd Research and Development Club
*/
:root {
--skin-name: dark; /* スキン名 */
--body-col: #c8c8c8; /*文字色 */
--body-bgcol: #272b30; /*背景色 */
--a-col: #83a4d4; /*リンクの文字色 */
--a-focus-col: #b6fbff; /*リンクフォーカス時の文字色 */
--hr-border-col: #1c1e22; /*水平線の色*/
--blockquote-col: #7a8288; /*引用部の境界色*/
--form-control-col: #c8c8c8; /*フォームの文字色*/
--form-control-bgcol: #3a3f44; /*フォームの背景色*/
--panel-bgcol: #2e3338; /*パネルの背景色*/
--btn-col1: #484e55; /*ボタンの背景色1*/
--btn-col2: #3a3f44; /*ボタンの背景色2*/
--btn-bdcol: #555555; /*ボタンの境界線色*/
--btn-bg-repeat: no-repeat; /*ボタンの背景画像繰り返し*/
--btn-hover-col1: #999999; /*ボタンフォーカス時の背景色1*/
--btn-hover-col2: #555555; /*ボタンフォーカス時の背景色2*/
--btn-hover-bdcol: #ffffff; /*ボタンフォーカス時の境界線色*/
--modal-bgcol: #2e3338; /*モーダルダイアログの背景色*/
--dropdown-bgcol: #3a3f44; /*ドロップダウンメニューの背景色*/
--dropdown-hover-bgcol1:#999999; /*ドロップダウンメニューフォーカス時の背景色1*/
--dropdown-hover-bgcol2:#555555; /*ドロップダウンメニューフォーカス時の背景色2*/
--dropdown-hover-col:#ffffff; /*ドロップダウンメニューフォーカス時の文字色*/
--progress-col1: #272b30; /*プログレスバーの背景色1*/
--progress-col2: #111111; /*プログレスバーの背景色2*/
--close-col: #ddd; /*クローズボタンの色*/
--close-shadow-col: #272b30; /*クローズボタンの影色*/
--pre-col: #f5f5f5; /*preタグの文字色*/
--pre-bgcol: #272b30; /*preタグの背景色*/
--cvs-bgcol: #ccc; /*グラフ領域背景色*/
--table-hover-bgcol: #49515a; /*フォルダ・楽曲リストへのフォーカス時の背景色*/
--table-active-bgcol: #3e444c; /*フォルダ・楽曲リストへフォーカス＋アクティブ時の背景色*/
--table-nth-child-odd-bgcol: #3a3f44; /*表のうちnth-childの偶数行背景色*/
--breadcrumb-bgcol: #272b30;/*フォルダ階層表示箇所の背景色*/
}
初めてcssに触る方にもなるべく分かるよう説明いたします。
I will explain you possible to those who this is the first time to edit the css files.
-
/*と*/に囲まれた部分はコメント（説明文）です
The string sandwitched with/*and*/is comment (don't affect). -
基本的には1行につき1設定となります。
1行の設定は:を挟んで左部分がキー値、右部分が設定値になります。
行末には必ず;を付けます。
Basically, there is one setting per line.
The key (left part) and the setting value (right part) is separeted with:character.
Be sure to add;character at the end of the line. -
キー値が
−−で始まる文字列の場合、cssのカスタムプロパティ（ユーザ設定）であり、当該キーの設定値を変更することで色を変更します。
（lightテーマの場合は、カスタムプロパティが未指定になることでwebuiのデフォルト値が有効になります。）
If the key value is a character string starting with--, it is a custom property (user setting) of css, and the color can be selected by changing the setting value.
(For the light theme, the default value of webui, is enabled by not specifying the custom property.) -
--skin-nameの設定値はCOLOR THEMEプラグインの現在選択中のテーマを表示させるために使用されています。
このため、標準で使用している"light"・"dark"以外のものを付けてください。
The--skin-namesetting is used to display the currently selected theme for the COLOR THEME plugin.
So, you should attach something other than the standard value "light" and "dark".
また、保存するcssファイル名と同じものにしてください。
例えば"red.css"という名前をつける場合は"red"と付けてください。
Also, make sure it has the same name as the css file you want to save.
For example, if you want to name it "red.css", name it "red".
ファイル名ならびに--skin-nameには半角でアルファベット， 数字, "-", "_"のどれかを使ってください。
（2バイト文字や一般的にファイル名で使わない文字を使った場合の動作は保証出来ません）。
↑
なお、将来的にはｗｅｂｕｉの拡張により--skin-nameの設定については不要になるよう調整します。
For the file name and --skin-name, use one-byte alphabets, numbers, "-", or "_".
(Operation cannot be guaranteed when double-byte characters or characters that are not generally used in file names are used).
↑
In the future, we will adjust the --skin-name setting so that it will not be necessary due to the expansion of webui. -
それ以外は各行のコメントに基づき各自色を変更してください。
カスタムプロパティのキー値についてはある程度規則性があります
（--の後の一番左の文字列がHTMLタグ、
-を挟んで次にbgがある場合は背景、bdは境界など）。
Please change your own color on each line.
There is some regularity about the key values of custom properties
(The left string after "--" is the HTML tag,
If there is "bg" next to "-", the background, "bd" is the boundary, etc.).
cssで指定可能な色の値については、色を示す文字列と（red/green/blue等）、#以降の3桁もしくは6桁の16進数数値になります。
（3桁の場合1桁づつ・6桁の場合は2桁づつ赤・緑・青の順で指定します。）
ちなみにHTMLエディタでcssファイルを編集した場合、
入力された値を視覚的に確認出来る機能を持つものがあります
（私の知っている限りではVisualStudioCodeでは上記機能を有しています）。
＊申し訳ありませんが、リンクや/opt/plugins/20-colorで保存されているdark.cssでは --body-colと--body-bgcolのコメントが反転しています。
次のwebui-plusの配信時には修正いたしますのでご了承ください。
The color value that can be specified by css is a character string indicating the color (red / green / blue, etc.) and a hexadecimal value of 3 or 6 digits after #.
(Specify 1 digit for 3 digits and 2 digits for 6 digits in the order of red, green, and blue.) -
編集したcssファイルは念の為UTF-8の文字コードで保存してください。
Please save the edited css file with UTF-8 character code (because of japanese comment).
②編集済cssファイルのアップロード(upload the css file you edited)
ftpクライアントを利用し、作成したcssファイルを/opt/plugins/20-colorにアップロードします。
（将来的には本手順をwebuiの「COLOR THEME」で実行出来るように提供します。）
Use the ftp client to upload the created css file to "/opt/plugins/20-color".
(In the future, we will provide this procedure so that it can be executed with "COLOR THEME" on webui.)
③プラグインのHTMLファイルの編集(edit the html file of COLOR SELECT)
sshでRaspberryPiに接続し、nano等のテキストエディタで/opt/plugins/20-color/form.htmlを編集します。
編集するのは3行目〜6行目の以下の部分になります。
Connect to Raspberry Pi with ssh and edit "/opt/plugins/20-color/form.html" with a text editor.
The following parts of the 3rd to 6th lines will be edited.
<datalist id="skin-list">
<option value="light" />
<option value="dark" />
</datalist>
datalistタグに挟まれたoptionタグに今回アップロードしたファイル名を
<option value="red" />
のような形で追加してください（アップロードしたファイル名が"red.css"の場合）。
（将来的には本手順は不要になるようwebuiを調整します）
Enter the file name uploaded this time in the option tag sandwiched between the datalist tags
<option value ="red" />
Please add in the form of (when the uploaded file name is "red.css").
(Adjust webui so that this step will not be necessary in the future)
④「COLOR THEME」プラグインでカラーテーマを選択(select new theme in 「COLOR THEME」 plugin)
テーマ変更後、プラグインの説明通りWebuiのリロードを行ってください。
After changing the theme, reload Webui as described in the plugin.
お勧めのカラーテーマが作成出来ましたら、是非こちらに公開頂けると幸いです。
（可能であれば、コードかファイルアップロードを使って頂けると幸いですが、
やり方がわからないようならこちらで編集いたします。）
If you can create a recommended color theme, we would appreciate it if you could publish it here.
