dark theme UserCSS@v.0.2.0
Scrapboxの新Themeに合わせたdark theme UserCSS
takker.iconの編集用テーマ
/appbirdNotebook-public/Atomっぽい色合いにしたい！を参考に修正を加えた
https://gyazo.com/3481efedc3a726df82d679d1747fcd38.png#.png
変更点
できるだけcustom propertyをいじるようにする
cf. /programming-notes/ScrapboxのThemeの仕様
filter: invert(100%);を消した
2021-03-21 04:14:59 行リンクが見にくいのを直した
既知の問題
/icons/done.iconテーブル記法がとても見にくい
テーブルと本文との境界がとても分かりづらい
枠線を設けることで対処したい
テーブル全然使わないからあんまり対処するmotivationが沸かないんだよなあtakker.icon
custom propertiesの設定
hacker1やdefault-darkをベースにする
すべてのthemeで有効にするために、htmlの子要素であるbodyに設定している
htmlに直接指定しても、themeの変数が優先されてしまう
背景色などをcss custom propertyで定義しておく
code:style.css
body {
--dark-theme-bg: #24292f;
--dark-theme-border: solid 1px #888;
}
関連ページリスト
code:style.css
body {
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, .23);
--card-description-code-color: #342d9c;
--card-title-color: rgba(255, 255, 255, .9);
--card-title-bg: rgba(41, 169, 114, 0.7);
--card-bg: #393c46;
--card-backside: #7c8296;
--card-description-color: rgba(204, 204, 204, .9);
--card-description-link-color: #61afef;
--card-description-code-color: #99f;
--card-box-shadow-color: transparent;
--card-box-shadow: none;
--card-box-hover-shadow: transparent;
--relation-label-links-text: #5e8af7;
--relation-label-empty-text: #fd7373;
--relation-label-links-bg: var(--card-bg) !important;
--relation-label-bg: var(--card-bg) !important;
--relation-label-empty-bg: var(--card-bg) !important;
--relation-label-text: var(--card-title-color) !important;
}
scrapboxのnav bar
code:style.css
body {
--navbar-link-color: #49c4fe;
}
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);
--line-permalink-color: rgba(234, 218, 74, .35);
}
本文
行番号の色は/Porin-Room/Settings#5b5e020f1a4b8a00006a4bd0からとってきた
code:style.css
body {
--body-bg: var(--dark-theme-bg);
--page-bg: var(--dark-theme-bg);
--page-text-color: #b5b5b5;
--line-title-color: #c9c9c9;
--code-bg: rgba(0,0,0,0.1);
--code-color: #abb2bf;
--code-line-number-color: #D181FF;
--cursor-code-line-number-color: #FF00F0;
--cursor-color: #fff;
}
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: var(--dark-theme-bg);
--dropdown-menu-text-hover-color: var(--page-text-color);
--dropdown-menu-text-hover-bg: #373b44;
}
code:style.css
.dropdown-menu,
.drawer .drawer-menu{
background-color: var(--dropdown-menu-bg, #fff);
border: var(--dropdown-menu-border, unset);
}
.dropdown-menu > li > a,
.drawer .drawer-menu ul li a,
.page-menu ul > li > div {
color: var(--dropdown-menu-text-color, #333);
}
.dropdown-menu>li>a:active,
.drawer-menu ul li a:active,
data-hover-visible .dropdown-menu>li>a:hover,
data-hover-visible .drawer-menu>li>a:hover,
data-focus-visible .dropdown-menu>li>a:focus,
data-focus-visible .drawer-menu>li>a:focus {
color: var(--dropdown-menu-text-hover-color, #262626);
background-color: var(--dropdown-menu-text-hover-bg, #f5f5f5);
}
.dropdown-menu .divider,
.drawer-menu .divider {
background-color: var(--dropdown-menu-divider-color, #e5e5e5);
}
editorに枠線をつける
code:style.css
.page {
box-shadow: none;
border: var(--dark-theme-border);
}
ScrapScriptの吹き出しの色を合わせる
code:style.css
.daiiz-text-bubble{
box-shadow: none !important;
border: var(--dark-theme-border) !important;
background-color: var(--dark-theme-bg) !important;
color: var(--page-text-color) !important;
}
テーブル記法に枠線をつける
2021-04-11 20:38:44 /villagepump/@yosider#60719ba5e5172d000062e750 の修正を当てた
code:style.css
.table-block .cell {
border-bottom: solid 1px #888;
}
コードブロック記法とHelpFeel記法
from /appbirdNotebook-public/Atomっぽい見た目にしたい-CodeBlock編
code:style.css
code.code span,
code.cli span,
.line code.code-body,
.line .formula code,
.page-list-item .description code/* ページカード用 */{
color: var(--code-color);
}
.line code.helpfeel {
background-color: var(--code-bg);
}
.line span.code-block .code-block-start {
background-color: #21252b;
}
.line span.code-block .code-block-start>css,
.line span.code-block .code-block-start>span>*{
font-size: inherit;
color: rgba(157, 165, 180, 0.6);
}
.line span.code-block .code-block-start>* {
padding: 3px;
}
.line span.code-block .code-block-start:hover{
color: rgba(157, 165, 180, 1.0);
}
span.hljs-keyword, span.hljs-selector-attr{
color:#c678dd;
}
span.hljs-selector-id{
color: #56b6c2;
}
span.hljs-selector-tag{
color: #e06c75;
}
span.hljs-selector-class, span.hljs-selector-pseudo{
color: #d19a66;
}
span.hljs-built_in {
color: #e06c75;
}
span.hljs-class>.hljs-title{
color: #56b6c2;
}
span.hljs-function>.hljs-title{
color: #61afef;
}
span.hljs-string{
color: #98c379;
}
span.hljs-number{
color: #d19a66;
}
code blockの色調節
code:style.css
.line span.code-block .pad:not(.code-block-margin) {
background-color: rgba(255,255,255,0.05);
}
.code-block .pad:not(.code-block-margin)::before {
color: #c3c3c3;
}
.line span.code-block .code-block-margin {
background-color: var(--dark-theme-bg);
}
/customize/Dark Theme CSS#5a85c075be9f39000004eb8a
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
border: solid 1px #66667F;
background-color: rgb(39, 40, 34) !important;
padding: 2px 5px 2px 5px !important;
color: #7c9ff7;
}
.line span.code-block .code-block-start a {
color: #7c9ff7;
}
選択範囲の色を青白にする
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;
}
References
/shokai/Dark Editor CSS
#2021-03-13 16:22:01
#2021-02-04 07:06:15
#2021-01-07 18:41:07
#2020-11-06 20:27:57
#2020-11-05 18:30:41
#2020-10-22 04:25:49
#2020-10-20
#2020-10-11 19:05:26
#2020-10-09 17:18:01
#2020-10-08 09:57:35
#2020-10-02 18:27:42
#2020-10-01 10:49:33