KazKobara / kati_dark

A dark version of Kati theme for FreeStyleWiki to support Markdown plugin, Content Security Policy (CSP), and LaTeX/MathML rendering with MathJax (in Japanese).

FSWiki 用ダークテーマ kati_dark

FSWiki に標準で含まれております kitta 氏の kati theme をダークに変換したものです。

スクリーンショット

Markdown Plugin や Content Security Policy (CSP) のための修正も加えてます。 以下の画像のように、Markdownブロック内外で、MathJax を用いて LaTeX と MathML を表示させる方法の検討も行っております。詳しくはこちらをご参照下さい。

動作や見た目は自分の使っている範囲でしか確認できていないのと、画像などのパーツは改良の余地がありますので、有志の方々に 改良してもらえることを期待して(本体に取り込まれるまでは)こちらで公開してメンテナンスすることに致しました。

適用方法

設定を変更する場合

1. FSWiki の theme/ フォルダ内に移動し

   git clone --depth 1 https://github.com/KazKobara/kati_dark.git

2. config/config.dat 内の theme= で始まる行を theme=kati_dark に変更するか、FSWiki画面の右上から [ログイン] -> [管理] でログインし、画面中の [スタイル設定] -> [テーマ] で "kati_dark!" を選択。

3. サイドメニューについては画面上部の [新規] で "Menu" というページを以下のような内容でご作成下さい。

   {{calendar 予定表}}
   
   //!サイト内検索
   !Menu
   {{search v}}
   
   ----
   //!最近編集されたトップ50ページ
   {{recent 50,v}}
   
   //!表示ページの章立て
   ! outline
   
   {{outline}}
   

Docker で試す場合

• ローカルユース用 Docker FSWiki の default theme として設定してあります。
  • ローカルユース用 Docker FSWiki は（インターネットで公開するサーバー用ではなく、データ自体はクラウドスレージなどと同期させるなどして、その同期したデータや手元の wiki データを）、PCのブラウザで表示させることを意図したものになります…
  • Markdown Plugin と CSP の設定も有効になってます。

設定値の調整

差分表示時の背景色

「差分」メニューにおいて表示される差分箇所の背景色は黒字のテキストが見やすいように薄い色になっているため、ダーク系テーマの白字テキストに対しては少し見にくいです。見やすいようにするためには、theme/resources/jsdifflib/diffview.css の以下の箇所の #RGB を調整する必要があります。上記のローカルユース用 Docker FSWiki ではgithub版 jsdifflibにこちらのパッチをあてています。

table.diff .replace {
        /* background-color:#FD8 *//* for black text */
        /* background-color:#640 *//* for white text */
        background-color:#B82      /* for both */
}
table.diff .delete {
        /* background-color:#E99 *//* for black text */
        /* background-color:#C00 *//* for white text */
        background-color:#C55      /* for both */
}
table.diff .skip {
        background-color:#EFEFEF;
        border:1px solid #AAA;
        border-right:1px solid #BBC;
}
table.diff .insert {
        /* background-color:#9E9 *//* for black text */
        /* background-color:#050 *//* for white text */
        background-color:#3C3      /* for both */

---

• https://github.com/KazKobara/
• https://kazkobara.github.io/