takkerのdark theme CSS
/takkerのDark Theme CSS
使っている端末の設定に合わせて、datk themeかlight themeかが切り替わります
prefers-color-schemeを使っている
cf. /hata6502/material-design
配色は✅/takkerのdark themeを調節するを参照
やりたいこと
QuickSearchで項目選択したときの色をdark themeにする
配色はCommand Pallet (GitHub)を参考にする
dropdown menu (Scrapbox) の色を変えるUserCSS
code:style.css
@import "../dropdown_menu_(Scrapbox)_の色を変えるUserCSS/style.css";
system設定がdark themeのときだけdark themeを適用する
code:style.css
@media (prefers-color-scheme: dark) {
配色をdefault-darkに変える
code:style.css
body {
--body-bg: #202228;
--navbar-bg: rgba(55, 59, 68, 0.3);
--navbar-icon-color: #fff;
--navbar-icon-active-color: #338c46;
--navbar-icon-hovered-color: #338c46;
--search-form-bg: rgba(255, 255, 255, 0.13);
--search-form-icon-color: #fff;
--search-form-icon-focus-color: #4a4a4a;
--card-title-color: #f0f0f0;
--card-title-bg: #2b2e38;
--card-bg: #373b44;
--card-hover-bg: rgba(0, 0, 0, 0.1);
--card-active-bg: rgba(229, 229, 229, 0.1);
--card-backside: #545860;
--card-description-color: #c4c4c4;
--card-description-link-color: #80c9fe;
--card-description-code-color: #ccc;
--card-box-shadow-color: #000;
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--card-title-bg-pinned: #2b2e38;
--relation-label-bg: #2b2e38;
--relation-label-text: #dddede;
--relation-label-links-bg: #80c9fe;
--relation-label-links-text: #202228;
--relation-label-empty-bg: #fb7476;
--relation-label-empty-text: #fff;
--tool-color: #535863;
--tool-light-color: #353b48;
--tool-badge-bg: #2b2e38;
--tool-bg: #2b2e38;
--tool-text-color: #dddede;
--new-button-vertical-color: #fff;
--new-button-horizontal-color: #fff;
--new-button-bg: #46af5d;
--new-button-hover-bg: #338c46;
--new-button-active-bg: #346447;
--telomere-border: #545863;
--telomere-unread: #56a066;
--page-text-color: rgba(255, 255, 255, 0.87);
--page-link-color: #80c9fe;
--page-link-hover-color: #6a9ec6;
--page-link-color-cursor-line: #a985e4;
--page-bg: #373b44;
--empty-page-link-color: #fb7476;
--empty-page-link-hover-color: #b47576;
--line-title-color: rgba(255, 255, 255, 0.87);
--line-permalink-color: rgba(234, 218, 74, 0.35);
--code-color: #ccc;
--code-bg: rgba(0, 0, 0, 0.18);
--quote-bg-color: rgba(0, 0, 0, 0.2);
--cursor-color: #fff;
}
一部の色をspringに合わせる
code:style.css
body {
--dark-theme-bg: #24292f;
--dark-theme-border: solid 1px #888;
}
scrapboxのnav bar
code:style.css
body {
--navbar-bg: rgba(2, 167, 137, .5);
}
New Button
code:style.css
body {
--new-button-horizontal-color: #b44a29;
--new-button-vertical-color: var(--new-button-horizontal-color);
--new-button-bg: #f4835f;
--new-button-hover-bg: #f2693e;
--new-button-active-bg: #ef4c17;
}
Page Menu
code:style.css
body {
--tool-color: #535863;
--tool-light-color: #353b48;
--tool-badge-bg: #2b2e38;
--tool-bg: #2b2e38;
--tool-text-color: #dddede;
--body-headings-color: var(--tool-color);
}
本文
行番号の色は/Porin-Room/Settings#5b5e020f1a4b8a00006a4bd0からとってきた
code:style.css
body {
--code-line-number-color: #D181FF;
--cursor-code-line-number-color: #FF00F0;
}
dropdown menu (Scrapbox) の色を変えるUserCSSの変数設定
code:style.css
body {
--dropdown-menu-bg: #373b44;
--dropdown-menu-border: 1px solid #8888882d;
--dropdown-menu-text-color: var(--page-text-color);
--dropdown-menu-divider-color: #e5e5e5;
--dropdown-menu-text-hover-color: var(--page-text-color);
--dropdown-menu-text-hover-bg: #373b44;
}
scrapboxのページカード
code:style.css
body {
--card-title-bg: var(--navbar-bg);
--card-title-bg-pinned: var(--navbar-bg);
}
editorに枠線をつける
Scrapboxのpresentation modeは除く
code:style.css
html:not(data-display-style^="presentation") .page {
box-shadow: none;
border: solid 1px #888;
}
テーブル記法に枠線をつける
2021-04-11 20:38:44 /villagepump/@yosider#60719ba5e5172d000062e750 の修正を当てた
code:style.css
.table-block .cell {
border-bottom: solid 1px #888;
}
HelpFeel記法の背景色をインラインコード記法と同じにする
標準色の肌色はdark themeに合わない
code:style.css
.line code.helpfeel {
background-color: var(--code-bg);
}
code blockの色調節
コードブロック記法のタイトル行を静かな色にするUserCSS
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
border: solid 1px #66667F;
background-color: #272822;
padding: 2px 5px;
color: #7c9ff7;
}
.line span.code-block .code-block-start a {
color: #7c9ff7;
}
コードブロック記法の配色
Scrapbox用Shades Of Purple Themeを使う
code:style.css
/**
* Shades of Purple Theme — for Highlightjs.
*
* @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
* @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
* @version 1.5.0
*/
.code-block {
--code-bg: #2d2b57;
--code-color: #e3dfff;
font-weight: normal;
}
code.highlight .hljs-subst {
color: #e3dfff;
}
code.highlight .hljs-title {
color: #fad000;
font-weight: normal;
}
code.highlight .hljs-name {
color: #a1feff;
}
code.highlight .hljs-tag {
color: #ffffff;
}
code.highlight .hljs-attr {
color: #f8d000;
font-style: italic;
}
code.highlight :is(
.hljs-built_in,
.hljs-selector-tag,
.hljs-section
) {
color: #fb9e00;
}
code.highlight .hljs-keyword {
color: #fb9e00;
}
code.highlight :is(
.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion
) {
color: #4cd213;
}
code.highlight :is(
.hljs-meta,
.hljs-meta .hljs-string
) {
color: #fb9e00;
}
code.highlight .hljs-comment {
color: #ac65ff;
}
code.highlight :is(
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name
) {
font-weight: normal;
}
code.highlight :is(
.hljs-literal,
.hljs-number
) {
color: #fa658d;
}
code.highlight .hljs-emphasis {
font-style: italic;
}
code.highlight .hljs-strong {
font-weight: bold;
}
変更点
code:style.css
code.highlight :is(
.hljs-selector-pseudo,
.hljs-deletion
) {
color: #e06c75
}
code:diff
+ aaa
- eeee
選択範囲の色を青白にする
from /MISONLN41/Settings#5f2bcfbcec4fce000063aeb3
デフォルトの緑色は、黒背景に合わなかった
白にした
from /appbirdNotebook-public/Atomっぽい色合いにしたい！#5ecb3f6fd3fe610000f29f28
code:style.css
::selection {
color: unset;
background: rgba(0,115,230,0.5);
}
.selection{
background-color: #ffffff77;
}
中黒の色を変える
code:style.css
.line .indent-mark .dot {
background-color: gray;
}
.line.number-list .dot::before {
color: gray;
}
code:style.css
}
References
/shokai/Dark Editor CSS
#2025-05-15 11:40:56
#2022-04-07 02:30:59
#2022-03-30 13:49:14 ✅コードブロックの文字の後ろだけ色が変わっているバグを直した
#2022-03-10 10:08:50 コードブロックの配色を変えた
#2022-02-21 16:34:14 dividerの色変えた
#2021-09-24 10:36:38