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

はじめに

前書き

• 本記事は FileMaker Advent Calendar 2021 9 日目の記事です。

対象読者

• Claris FileMaker Server または Claris FileMaker Cloud を Admin Console で管理している人
• あるいは、これから管理しようとしている人
• ブラウザが Google Chrome / Firefox
• 既に Stylus が使える環境にある人

検証環境

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

前提

• 以下の前編にあたる記事を読んできていること
  • FileMaker Server AdminConsole のナビゲーションバーとデータベース接続クライアント情報を Stylus で Sticky にする
• FileMaker Server の規約確認や Stylus とはなんぞやという話は、上記記事に記載しています。

何がどうなる

何が

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 精神（？）で。