dark theme UserCSS@0.1.0
新Themeの仕様に合わせたver.
/icons/hr.icon
takker.iconの編集用テーマ
なぜこれを使うとずれるのかまではわからない
2021-01-07
使うとcursorがずれてしまう
既知の問題
また、行頭の中黒も消えたりする
おそらく#text-inputの描画の問題だと思われる
テーブルと本文との境界がとても分かりづらい
枠線を設けることで対処したい
テーブル全然使わないからあんまり対処するmotivationが沸かないんだよなあtakker.icon
themeをhacker1に強制的に変更する
code:style.css
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, .23);
--tool-bg: rgba(0, 0, 0, .1);
--card-title-color: rgba(255, 255, 255, .9);
--card-title-bg: rgba(41, 169, 114, 0.7);
--card-description-color: rgba(204, 204, 204, .9);
--card-description-code-color: #99f; --card-box-shadow-color: transparent;
--card-box-shadow: none;
--card-box-hover-shadow: transparent;
--tool-light-color: rgba(183, 189, 197, .4);
--tool-bg: rgba(183, 189, 197, .1);
--tool-badge-bg: rgba(183, 189, 197, .2);
--body-headings-color: var(--tool-color)
}
関連ページリストのラベルの色をdark themeに合わせる
code:style.css
html{
--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;
}
code:style.css
.page {
--dark-theme-border: solid 1px #888; }
偶数回指定すれば、もとに戻る
code:style.css
.dropdown-menu,
.drawer-menu,
.dropdown-menu img,
.drawer-menu img,
.cursor{
filter: invert(100%);
}
IME入力時の背景色を変える
code:style.css
/* 入力時の背景色*/
textarea#text-input:focus {
color: var(--dark-theme-fg);
}
editorの背景色と文字色
code:style.css
.page {
box-shadow: none;
border: var(--dark-theme-border);
background-color: var(--dark-theme-bg);
}
.editor {
background-color: inherit;
color: var(--dark-theme-fg);
}
.text {
color: var(--dark-theme-fg);
}
.line-title .text {
}
/* ScrapScriptの吹き出しの色を合わせる*/
.daiiz-text-bubble{
box-shadow: none !important;
border: var(--dark-theme-border) !important;
background-color: var(--dark-theme-bg) !important;
color: var(--dark-theme-fg) !important;
}
code:style.css
code.code span,
code.cli span,
.line code.code-body,
.line .formula code,
.page-list-item .description code,/* ページカード用 */
code.helpfeel span {
}
/* 色を決めるのが面倒なので色なしにした*/
.line code.helpfeel {
background-color: unset;
}
.line span.code-block{
background-color: rgba(0,0,0,0.1);
}
.line span.code-block .code-block-start {
}
.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{
}
span.hljs-selector-tag{
}
span.hljs-selector-class, span.hljs-selector-pseudo{
}
span.hljs-built_in {
}
span.hljs-class>.hljs-title{
}
span.hljs-function>.hljs-title{
}
span.hljs-string{
}
span.hljs-number{
}
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 {
}
.line span.code-block .code-block-margin {
background-color: var(--dark-theme-bg);
}
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34) !important;
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a {
}
数式の色調節
defaultだと青
編集しているときに見にくい
code:style.css
.line .formula code{
}
Streamの文字色
code:style.css
.time-range .lines {
color: var(--dark-theme-fg);
}
テロメアの色調節
背景色を合わせる
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread,
.line .telomere .telomere-border:hover,
.line .telomere .telomere-border.unread:hover {
border-color: var(--dark-theme-bg);
}
.global-menu li a.updated {
}
選択範囲の色を青にする
デフォルトの緑色は、黒背景に合わなかった
白にした
code:style.css
::selection {
color: unset;
background: rgba(0,115,230,0.5);
}
.selection{
}
中黒の色を変える
code:style.css
.line .indent-mark .dot {
background-color: gray;
}
.line.number-list .dot::before {
color: gray;
}
References