FileMaker Server AdminConsole を Stylus でダークモードにする

11772 ワード
FileMaker chrome-extension FileMakerServer FileMaker テキストリンク

はじめに

前書き

対象読者

検証環境

  • FileMaker Server 19.2
    • 公開時点 ( 2021/12/09 ) の最新版である 19.4 では未検証
    • FileMaker Cloud については、検証環境がなく検証していないので、実際に動作するかは分かりません。ただ、FileMaker Server と同じフロントエンドであれば、同じように動作するはずです。
  • Google Chrome 96.0.4664.45
  • Stylus 1.5.22

前提

何がどうなる

何が

before

  • FileMaker Server Admin Console の管理画面 UI は、デフォルトだとライトテーマで驚きの白さです。

こうなる

after

  • Stylus を適用してダークテーマにしてみた。これで目に優しい！

設定

スタイル作成

  • 名前を入力しましょう。ここでは FMS_AdminConsole_Dark とします。

  • 右のコード欄には、以下のように記します。
:root {
  --color-main-blue: #1D9BF0;
  --color-main-black: #333;
}


a,
.btn-dropdown-noborder, 
.btn-noborder {
  color: var(--color-main-blue) !important;
}

body {
  background-color: var(--color-main-black);
  color: white;
}

input.toggle-btn:checked+label:before {
  background-color: var(--color-main-blue) !important;
}

thead {
  background-color: #eee !important;
}



#footer-links a,
.btn:hover,
.copyright-info a,
.dashboard-data,
.graph-legend-x,
.graph-legend-y,
.nav-item > a,
.sidebar .list-group-item,
.table td {
  color: white !important;
}


.body-label,
.btn-noborder.disabled,
.btn-noborder:disabled,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled,
.client-label,
.col-min-height .col-m-label,
.connection-label,
.copyright-info,
.no-results,
.percent_spaceused,
.show-all,
.sidebar-label,
.txt-sort-label {
  color: #bbb !important;
}

.btn-outline-primary {
  border-color: var(--color-main-blue) !important;
  color: var(--color-main-blue) !important;
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  border-color: #ccc !important;
}

.dbselected > td,
.database-list .db-list-alldb span,
.list-group-item.active,
.list-item:hover > td,
.table thead th {
  color: var(--color-main-black) !important;
}

.fac-logo {
  background-color: white !important;
}

.modal-content,
.nav-bg {
  background-color: var(--color-main-black) !important;
}

.nav-item > a.text-primary {
  border-bottom: 2px solid white !important;
  color: white !important;
}

適用と反映

  • 以下のように。

  • あらためて以下のように「有効」にチェックが入っていることを確認して、保存。

確認

  • 作業が完了したら AdminConsole では以下のようにダークテーマとして表示されてくれているはずです。お疲れ様でした！

  • ちなみに、前回記事のものとあわせて適用すると、Stylus の管理画面上では以下のようになります。

GitHub リポジトリ

  • https://github.com/hi-noguchi/FileMakerServer_AdminConsole_Stylus
  • 前編記事で用意した GitHub リポジトリに追加してあります。今後、FileMaker Server の ver.up にともなってソースコードが更新される可能性もありますので、リポジトリのほうをご覧ください。
    • 「ここのところ、もっとこうした方がイイよ！」というのがあれば、ぜひ、画像とともにプルリクなど投げてください、お待ちしております。

おわりに

補足

  • 今回、画像やアイコンなどは元々のものから変更していません。そのため、背景色に対してアイコン色が見えづらいとかそういうチョットした不満は残っています。不満が大きい場合は、自前でホスティングした画像へと CSS で指定し直せば、変わってくれますので、お試しください。

雑感

  • 昨今のアプリではダークテーマへの切り替えができるようになっているものも多くなってきているので、ネイティブで実装されて欲しいなあとは思いますが、まあなければ弄ればよいという FileMaker 精神（？）で。