小技チョコレート

ちょっとした小技を紹介するだけのブログです。

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

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

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

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


〈目次〉


スクリーンショット

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

f:id:ichbin:20190830101859p:plain
(背景色として#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
}

CSSの適用先の指定

Dynalistの全てのドキュメントに適用したい場合は、「ドメイン上のURL」を選んでdynalist.ioと記入するか、もしくは「次で始まるURL」を選んでhttps://dynalist.io/と記入します。

f:id:ichbin:20190829202728p:plain

Dynalistにおける特定のドキュメントにのみ適用したい場合は、「次で始まるURL」を選んで、適用したいドキュメントのURLを記入します。

f:id:ichbin:20190829202831p:plain

文字が見えにくい部分がある場合の対処法

この記事で紹介している方法を使ってDynalistの外観を変えると、場合によっては、画面内の一部の箇所で背景色と文字色が同じような色になってしまい、文字が見えにくくなることがあるかもしれません。その際の対処法としては、次のようにするとよいと思います。

  • 文字色を暗い色(黒っぽい色)にしたい場合は、設定画面のThemeの項目で"Default"を選択する。

f:id:ichbin:20190830084502p:plain

  • 文字色を明るい色にしたい場合は、設定画面のThemeの項目で"Dark"を選択する。

そのようにすれば、文字色と背景色の明るさの差が大きくなるので、文字が見やすくなると思います。

(備考)Userstyles.orgからのCSSのインストール

Userstyles.orgに公開されているCSSは、ブラウザにStylusをインストールしたうえで“Install Style”のボタンをクリックするだけで適用できます。

f:id:ichbin:20190830202208p:plain

*1:ただし、画面の各所でポップアップ/ドロップダウンするメニューや、色付きラベルの使用箇所などの背景色は変わりません。