CSS 変数と層の外の CSS で、描いた文書の見た目を変える
mdmark が描いた文書の色・書体・余白などを、使う側のページで変えるときに実行する。
.mdmark {
--mdmark-color-link: #c00;
--mdmark-radius: 0;
}
書く先は、描く先の要素に付く class mdmark。
ページ全体に当てるときは :root に書いてもよい。
変数の一覧は テーマの CSS 変数。
変数名を書き間違えると値は当たらず、既定の見た目のままになる。
@media (prefers-color-scheme: dark) {
.mdmark {
--mdmark-color-link: #f66;
}
}
ダークの配色は、画面で OS の設定がダークのときに当たる。
@media で囲まずに書いた値は、明るい配色でもダークの配色でも当たる。
.mdmark {
--mdmark-color-diagram-llm: #be185d;
--mdmark-color-series-1: #c00;
--mdmark-diagram-lane-tint: 12%;
}
図の層の背景・箱の種類・線の種類・グラフの系列の色と、層の背景の濃さ、文書の中の図の高さの上限も、変数で変える。 変数の一覧は テーマの CSS 変数 の図の変数。 色を変えても、箱の種類・線の種類・系列は、アイコン・模様・点の形でも分かれたまま。
.mdmark {
--mdmark-color-diff-del-bg: #fecaca;
--mdmark-color-diff-add-sign: #0e7490;
--mdmark-diff-minimap-width: 18px;
}
差分を表示する で出す差分の、削除した行・追加した行・変わった語の背景と、行頭の -・+ とミニマップの印の色も、変数で変える。
ミニマップの帯の幅と重なり順（--mdmark-diff-minimap-z-index）も変数で変える。
変数の一覧は テーマの CSS 変数 の差分の変数。
色を変えても、削除した行・追加した行は、行頭の -・+ の印と読み上げの名前でも分かれたまま。
:root {
--mdmark-view-column-width: 16rem;
--mdmark-color-comment-bg: #e6f4ff;
--mdmark-color-comment-line: #0969da;
--mdmark-color-error: #c00;
}
ビューとコメントを使う で出すビューとコメントの見た目も、変数で変える。
--mdmark-view-column-width はボードの列の最小の幅で、収まらない列はボードの中で横にスクロールする。
--mdmark-color-comment-bg と --mdmark-color-comment-line はコメントの印の地と下線の色で、入力欄を開いている間の選んだ文字の色にも使う。
--mdmark-color-error はコメントの入力欄の知らせの文字とアイコン、誤りのある本文の欄の枠の色。
コメントのボタン・入力欄・吹き出しは document.body に置かれ、.mdmark の外になる。
これらの変数は .mdmark ではなく :root に書く。
変数の一覧は テーマの CSS 変数 のビューとコメントの変数。
色を変えても、コメントの印は下線でも、入力欄の知らせはアイコンと文でも分かれたまま。
.mdmark {
--mdmark-color-syntax-keyword: #0e7490;
--mdmark-color-syntax-string: #15803d;
}
@media (prefers-color-scheme: dark) {
.mdmark {
--mdmark-color-syntax-keyword: #67e8f9;
}
}
コードブロックの色分けは、キーワード・文字列・数値・型・名前・コメントの 6 種類の色を変数で変える。
変数の一覧は テーマの CSS 変数 の --mdmark-color-syntax-*。
ライトとダークの値を別々に持つため、ダークの値は @media (prefers-color-scheme: dark) の中で変える。
色を変えても、コメントは斜体でも分かれたまま。
色分けするコードブロックと言語は コードブロックの飾り。
<div class="mdmark-theme-dark">
<div id="doc"></div>
</div>
描く先の要素かその祖先に mdmark-theme-dark を付けると、OS の設定がライトでもダークの配色で描く。
mdmark-theme-light は、OS の設定がダークでもライトの配色で描く。
class を付け替えると、描いた文書の配色がその場で替わる。
VS Code の Webview に描くときは、VS Code が body に付ける vscode-dark・vscode-light などに配色が従うため、何も付けなくてよい。
mdmark-theme-* は vscode-* より先に配色を決める。
決める順は 配色を切り替える class。
印刷では、class によらず明るい配色で出る。
a {
text-decoration-line: none;
}
mdmark の CSS は @layer mdmark に入っている。
層の外に書いた CSS は詳細度によらず勝つため、mdmark が .mdmark a に当てる下線を、詳細度の低い a だけの指定で消せる。
mdmark の CSS を読み込む前と後のどちらに書いても、結果は変わらない。
theme.css に分ける<link> で読み込む<link rel="stylesheet" href="/theme.css">
mdmark は使う側の theme.css を読まない。
ページが <link> で、層の外に読み込む。
theme.css の中身を @layer で囲まない。
即時。ページを再読み込みすると、書いた CSS が当たる。
文書にリンクがあるとき、リンクの色を確かめる。
getComputedStyle(document.querySelector(".mdmark a")).color
#c00 を書いたなら rgb(204, 0, 0) が出る。
文書に言語を書いたコードブロックがあるとき、キーワードの色を確かめる。
getComputedStyle(document.querySelector(".mdmark pre code .hljs-keyword")).color
#0e7490 を書いたなら rgb(14, 116, 144) が出る。
色分けは描いた後に付くため、色分けのライブラリを読み終えてから確かめる。
mdmark-theme-dark を付けた文書の地の色が、OS の設定がライトでもダークの色になる。
getComputedStyle(document.querySelector(".mdmark a")).textDecorationLine
a に text-decoration-line: none を書いたなら none が出る。
書いた CSS を消す。 mdmark の既定の見た目に戻る。