/takker/dark theme UserCSS@v.0.3.0

generated at 10/17/2024, 2:53:52 AM
dark theme UserCSS@v.0.3.0
Scrapboxの新Themeの default-dark をベースに作り直したdark theme UserCSS
の編集用テーマ
cf. ✅/takkerのdark themeを調節する

変更点
JSで data-project-theme を直接変更するようにした
scrapbox-theme-customizerを使う

script.jsimport {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 に合わせる

style.cssbody {
  --dark-theme-bg: #24292f;
  --dark-theme-border: solid 1px #888;
}

scrapboxのnav bar
style.cssbody {
  --navbar-bg: rgba(2, 167, 137, .5);
}

New Button
style.cssbody {
  --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
style.cssbody {
  --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からとってきた
style.cssbody {
  --code-line-number-color: #D181FF;
  --cursor-code-line-number-color: #FF00F0;
}

dropdown menu (Scrapbox) の色を変えるUserCSS
style.cssbody {
  --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;
}
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のページカード
style.cssbody {
  --card-title-bg: var(--navbar-bg);
  --card-title-bg-pinned: var(--navbar-bg);
}

editorに枠線をつける
style.css.page {
  box-shadow: none;
  border: solid 1px #888;
}

テーブル記法に枠線をつける
2021-04-11 20:38:44 /villagepump/@yosider#60719ba5e5172d000062e750 の修正を当てた
style.css.table-block .cell {
  border-bottom: solid 1px #888;
}

コードブロック記法とHelpFeel記法
from /appbirdNotebook-public/Atomっぽい見た目にしたい-CodeBlock編
style.csscode.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の色調節
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
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
style.css::selection {
    color: unset;
    background: rgba(0,115,230,0.5);
  }
.selection{
 	background-color: #ffffff77;
 }
 

中黒の色を変える
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