Dynalistの背景色・文字色・アイコンの色を変えるためのCSSの書き方

ブラウザの拡張機能であるStylus（Chrome版 / Firefox版）を使って、Dynalistの背景色を変えるためのCSSの書き方を紹介します。
ヘッダー（ページの最上部）やサイドバーを含めて、通常見えているエリアの全ての色が変わります。*1

Stylusの使い方については、こちらの記事をご参照ください。

なお、Dynalistの有料版を利用している場合は、本記事で紹介しているCSSを、DynalistのカスタムCSSの入力欄にそのまま入力するだけでもよいだろうと思います。その場合はStylusは不要です。

〈目次〉

スクリーンショット
CSS
- 背景色・文字色・アイコンの色
- その他の細かい部分
CSSの適用先の指定
文字が見えにくい部分がある場合の対処法
（備考）Userstyles.orgからのCSSのインストール

スクリーンショット

下記に示すCSSを全て適用すると、このような外観になります。

（背景色として#4767ABを、フォントの色として#dddを用いた場合）

CSS

色のサンプルとして#4647AB（背景色）、#ddd（文字色とアイコンの色）が記入してあります。これらを、ご自身の着色したい色に書き換えてから適用してください。

背景色・文字色・アイコンの色

/***背景色***/
.AppHeader,
.is-desktop .LeftPaneContainer-nav,
.is-desktop .LeftPaneContainer-navItem,
.is-desktop .LeftPaneContainer,
.is-desktop .Pane,
.is-desktop .Pane-header,
.is-desktop .popup-message-banner,
div.page,
div.mod-app,
div.AppContainer,
.DocumentTools-overlay,
.search-ui-container,
.search-ui-document-title-container
{
    background: #4767AB
}

/***フォントの色***/
/*本文*/
body {
    color: #ddd
}

/*ヘッダー（画面の最上部）*/
.AppHeader {
    color: #ddd
}

/*サイドバーのヘッダー（タイトル）*/
.is-desktop .Pane-header {
        color :#ddd
}

/*サイドバー内のドキュメントペインでの、
各ドキュメントの名前*/
.pane-item-header {
    color: #ddd
}

/***アイコンの色***/
/*ヘッダーのアイコン*/
.AppHeader-icon {
    color: #ddd
}

/*サイドバーの左上に固定されている、
ドキュメントとブックマークのアイコン*/
.is-desktop .LeftPaneContainer-navItem {
    color: #ddd
}

/*サイドバーを開いた際に最上部にあるアイコン
および、ドキュメントペインでのドキュメントのアイコン*/
.is-desktop .Pane-headerToolbarItem,
.pane-item-icon {
    color: #ddd
}

/*画面右上にある、
検索アイコンとView optionのアイコン*/
.DocumentTools-icon {
    color: #ddd
}

ヘッダー・サイドバー・検索アイコン・View optionのアイコンには、デフォルトでは縁に影が付いていますが（例）、それを消したい場合は下記のCSSも適用します。

header.AppHeader, /*ヘッダー*/
.is-desktop .LeftPaneSlidebarContainer, /*サイドバー*/
.DocumentTools-overlay /*画面右上に表示される検索アイコンとView optionのアイコン*/
{
    box-shadow: none;
}

その他の細かい部分

サイドバーにて選択中のアイコンやドキュメントを示す部分は、デフォルトでは背景色とは別の色が適用されていますが、その部分の背景色も併せて変えたい場合は、下記のCSSも適用します。

/*サイドバーでドキュメントペインを選択しているときの、
ドキュメントアイコンの背景色*/
.is-desktop .LeftPaneContainer-navItem.is-active, .is-desktop .LeftPaneContainer-navItem:hover
{
    background: #4767AB
}

/*サイドバーのドキュメントペイン内で、
選択中のドキュメントの背景色*/
.pane-item.DocumentItem.is-open > .pane-item-header
{
    background: #4767AB
}

サイドバーと本文部分とを区切っている線の色を変えたい場合や、線を消したい場合は、下記のCSSを適用します。

.is-desktop .LeftPaneSplitter::after {
    border-right:1px solid #ddd    /*線の色を#dddにする場合*/
}

.is-desktop .LeftPaneSplitter::after {
    border-right:none    /*線を消す場合*/
}

ハッシュタグの文字色や、日時記法、コード記法の使用箇所などの色を変えたい場合は、下記のCSSから必要な部分だけを抜き出して、着色したい色に書き換えてから適用して下さい。

/*ハッシュタグの文字色*/
.node-tag {
    color: #ddd
}

/*日時記法の使用箇所*/
.node-time {
    background: #6686CC;        /*背景色*/
    border: solid 1px #ddd    /*枠線*/
}

/*コード記法の使用箇所*/
.node-inline-code {
    background: #6686cc;
    color: #c7254e
}

/***検索結果***/
/*Flat searchでの各検索結果の位置を示す表示*/
.flat-search-breadcrumb-item,
.flat-search-breadcrumb-delimiter {
    color: #ddd
}