UserCSS:ダークモード

ダークモード、ダークテーマ、黒基調

code:style.css

/*@import "/api/code/suto3/UserCSS:バックグラウンド/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:ナビゲーションバー/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:プロジェクトホーム/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:ページ/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:エディタ/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:テロメア/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:ハッシュタグ/style.css"; /* */

@import "/api/code/suto3/UserCSS:箇条書き/style.css"; /* */

@import "/api/code/suto3/UserCSS:文字装飾記法/style.css"; /* */

@import "/api/code/suto3/UserCSS:強調記法/style.css"; /* */

@import "/api/code/suto3/UserCSS:マーカー記法/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:レインボー記法/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:はんこ記法/style.css"; /* */

/*@import "/api/code/suto3/UserCSS:朱書き記法/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:アイコン/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:テーブル/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:引用/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:関連ページリスト/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:ページリスト/style.css"; /* */

@import "/api/code/suto3/UserCSS:ステータスバー/style.css"; /* */

/* @import "/api/code/suto3/UserCSS:選択範囲の色の変更/style.css"; /* */

変数定義

code:style.css

:root {

--main-color: rgb(40%,40%,40%); /* 主調色 */

--assort-color: rgb(10%,10%,10%); /* 従属色 */

--base-color: rgb(5%,5%,5%); /* 背景色 */

/* --accent-color: Lime; 　　　　　　　　/* 強調色 */

--accent-color: orange; 　　　　　　　　/* 強調色 */

--text-color: rgb(90%,90%,90%); /* 文字色 */

/* 1 ナビバーのアイコン（グローバルメニュー） */

/* 2 ブロジェクトホームのアイコン */

/* 3 背景画像 */

/* 4 ページの背景画像 */

/* 5 ページのヘッダー画像 */

/* 6 ページのフッター画像 */

/* 7 ページタイトルのアイキャッチ */

--eye-chacher: url('/api/pages/suto3/clipart/icon'); /* */

--li-color-1: hsla(60,100%,60%,0.4);

--li-color-2: hsla(180,100%,60%,0.4);

--li-color-3: hsla(300,100%,60%,0.4);

}

code:style.css

body{

--logo-url: var(--navi-icon);　/* */

--new-button-bg: var(--base-color, black);

--body-bg: var(--base-color, black);

--navbar-link-color: var(--assort-color, White);

--relation-label-bg: var(--assort-color, White);

--page-bg: var(--assort-color, White);

--card-bg: var(--assort-color, White);

--body-headings-color: var(--main-color, DarkGray); /* */

--card-title-bg: var(--main-color, DarkGray);

--new-button-horizontal-color: var(--main-color, DarkGray);

--new-button-vertical-color: var(--main-color, DarkGray);

--card-title-bg-pinned: var(--main-color, DarkGray);

/* --card-description-color: var(--main-color, DarkGray); /* */

/* --card-box-shadow-color: var(--main-color, DarkGray); /* */

--navbar-bg: var(--main-color, DarkGray);

--line-title-color: var(--text-color, white); /* */

--card-title-color: var(--text-color, white); /* */

--relation-label-text: var(--text-color, white); /* */

--relation-label-links-text: var(--text-color, white); /* */

--relation-label-empty-text: var(--text-color, white); /* */

--tool-text-color: var(--text-color, white); /* */

/* --card-backside: var(--text-color, black); /* */

--page-text-color: var(--text-color, black); /* */

}

code:stylexx.css

.container {

width: auto;

max-width: max-content;

}

全体のフォントの設定

code:style.css

.text {

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;

font-size: 16px;

line-height: 32px;

-webkit-font-feature-settings: 'palt' 1;

font-feature-settings: 'palt' 1;

word-wrap: break-word;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-font-kerning: normal;

font-kerning: normal;

color: var(--text-color, White);

}

code:style.css

.page {

background-color: var(--assort-color, Red);

}

code:style.css

.selection{

background-color: var(--accent-color, GreenYellow);

}

body {

background-color: var(--base-color, Red);

}

.page {

background-color: var(--assort-color, White);

box-shadow: none;

}

ナビゲーションバー

code:style.css

.navbar {

/*background-color: var(--main-color, Red);*/

background-color: var(--assort-color, Red);

}

/* プロジェクトホーム */

.quick-launch .project-home>.title {

color: var(--main-color);

}

.page-menu .tool-btn, .related-page-list .tool-btn, .quick-launch .tool-btn {

color: var(--main-color);

}

テロメア

code:style.css

/* テロメア */

.line .telomere .telomere-border {

border-color: var(--main-color); /* これ灰色のとこ */

}

.line .telomere .telomere-border.unread {

border-color: var(--accent-color) ; /* これ緑のとこ */

}

.line .telomere .telomere-border .description {

background-color: var(--main-color); /* 背景色 */

color: var(--assort-color); /* 文字色 */

}

ハッシュタグ

code:style.css

/* ハッシュタグ */

padding: 4px 6px;

border-radius: 4px;

font-size: 14px;

background-color: var(--main-color);

color: var(--assort-color);

}

background-color: var(--assort-color);

color: var(--main-color);

border-color: var(--main-color); /* */

}

カーソル

code:style.css

/* カーソル */

.cursor {

background-color: var(--accent-color);

}

.shared-cursors .cursor {

background-color: var(--accent-color);

}

/* ステータスバー */

.status-bar {

background-color: var(--base-color, Red);

}

シンタックスハイライト

code:style.css

.line span.code-block {

}

.line code > span > span {

}

.hljs {

display: block;

overflow-x: auto;

padding: 0.5em;

}

.hljs-built_in,

.hljs-selector-tag,

.hljs-section,

.hljs-link {

}

.hljs-keyword {

}

.hljs,

.hljs-subst {

}

.hljs-title {

}

.hljs-string,

.hljs-meta,

.hljs-name,

.hljs-type,

.hljs-attr,

.hljs-symbol,

.hljs-bullet,

.hljs-addition,

.hljs-variable,

.hljs-template-tag,

.hljs-template-variable {

}

.hljs-comment,

.hljs-quote,

.hljs-deletion {

}

.hljs-keyword,

.hljs-selector-tag,

.hljs-literal,

.hljs-title,

.hljs-section,

.hljs-doctag,

.hljs-type,

.hljs-name,

.hljs-strong {

font-weight: bold;

}

.hljs-literal,

.hljs-number {

}

.hljs-emphasis {

font-style: italic;

}

code:style.css

.hljs-selector-id, .hljs-selector-class {

}

.hljs-params, .hljs-built_in {

}

.hljs-regexp {

}

code:style.css

/* code blockの頭を静かな色にする */

.line span.code-block .code-block-start {

border: solid 1px var(--text-color, White);

background-color: var(--assort-color);

padding: 2px 5px 2px 5px !important;

}

.line span.code-block .code-block-margin {

background-color: transparent;

}

グリッド

code:style.css

.grid li.page-list-item a .pin {

background: linear-gradient(45deg, var(--main-color, white), var(--main-color, white) 50%, var(--base-color) 50%, var(--base-color));

}

.grid li.page-list-item a {

background-color: var(--assort-color);

box-shadow: none !important

}

.grid li.page-list-item a .views {

color: var(--text-color, White)

}

.grid li.page-list-item a .header {

padding: 7px 5px !important;

border: none;

background-color: var(--assort-color);

}

.grid li.page-list-item a .content {

height: 100%;

border-radius: 3px;

border: solid var(--main-color, white) 0.5px;

}

.grid li.relation-label.links a,

.grid li.relation-label.headword a,

.grid li.relation-label.empty-links a

{

background-color: var(--assort-color);

border-radius: 3px;

border: solid var(--main-color, white) 0.5px;

}

入力時の文字色と背景色を変更する

code:style.css

textarea#text-input:focus {

background: rgba(0, 0, 0, 0.3);

}

Page Menu

アイコンの色が合わない場合の救済策

code:style.css

.extension-btn {

background-color: var(--main-color,white) ;

}

.extension-btn:hover {

background-color: var(--accent-color,red) ;

}

UserCSS.icon

settings.icon