dark theme UserCSS@v.0.3.0
Scrapboxの新Themeのdefault-darkをベースに作り直したdark theme UserCSS
takker.iconの編集用テーマ
cf. ✅/takkerのdark themeを調節する
変更点
JSでdata-project-themeを直接変更するようにした
scrapbox-theme-customizerを使う
code:script.js
import {setTheme} from '../scrapbox-theme-customizer/script.js';
const path = '/api/code/takker/dark_theme_UserCSS@v.0.3.0/style.css';
setTheme('default-dark');
document.head.insertAdjacentHTML('beforeend', `
<link rel="stylesheet" href="${path}">
`);
一部の色を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: var(--page-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);
}
scrapboxのページカード
code:style.css
body {
--card-title-bg: var(--navbar-bg);
--card-title-bg-pinned: var(--navbar-bg);
}
editorに枠線をつける
code:style.css
.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記法
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(--page-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