/takker/takkerのdark_theme_CSS

generated at 10/17/2024, 4:02:56 AM
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
style.css@import "../dropdown_menu_(Scrapbox)_の色を変えるUserCSS/style.css";

system設定がdark themeのときだけdark themeを適用する
style.css@media (prefers-color-scheme: dark) {

配色を default-dark に変える
style.cssbody {
  --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 に合わせる
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: #e5e5e5;
  --dropdown-menu-text-hover-color: var(--page-text-color);
  --dropdown-menu-text-hover-bg: #373b44;
}

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記法の背景色をインラインコード記法と同じにする
標準色の肌色はdark themeに合わない
style.css.line code.helpfeel {
  background-color: var(--code-bg);
}

code blockの色調節
コードブロック記法のタイトル行を静かな色にするUserCSS
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を使う
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;
}
変更点
style.csscode.highlight :is(
  .hljs-selector-pseudo,
  .hljs-deletion
) {
  color: #e06c75
}
diff+ aaa
- eeee

選択範囲の色を青白にする
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;
}

style.css}

References
/shokai/Dark Editor CSS

#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 