/suto3/UserCSS:ダークモード

generated at 2/10/2025, 10:29:19 PM
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"; /* */
/* @import "/api/code/suto3/UserCSS:選択範囲の色の変更/style.css"; /* */


変数定義
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 ナビバーのアイコン（グローバルメニュー） */
       --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
       /* --navi-icon-B: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
       --navi-icon-B: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
       --navi-icon-C: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
       /* --navi-icon-C: url("https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png");
       /* 2 ブロジェクトホームのアイコン */
       --project-home-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);/* */
       /* --project-home-icon: url(https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png); /* */
       --project-home-icon-B: url(https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png);/* */
       /* 3 背景画像 */
       --project-bg-image: url("https://season-freeillust.com/img/spring-haikei/04.jpg");
       /* 4 ページの背景画像 */
       /* --page-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */
       /* --page-bg-image: url(https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png); /* */
       --page-bg-image: url(https://scrapbox.io/files/5f2ccbcc7a2c67001ef77649.svg); /* */
       /* 5 ページのヘッダー画像 */
       --page-header-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
       /* 6 ページのフッター画像 */
       --page-footer-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
       /* 7 ページタイトルのアイキャッチ */
       /* --eye-chacher: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
       --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);
 }

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); /* */
 }

stylexx.css.container {
    width: auto;
    max-width: max-content;
}

全体のフォントの設定
style.css .text {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
   /* color: #444444; */
   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);
 }
 

style.css.page {
  background-color: var(--assort-color, Red);
}


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;
  }

ナビゲーションバー
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);
  }

テロメア
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); /* 文字色 */
  }

ハッシュタグ
style.css     /* ハッシュタグ */
  a[type="hashTag"]:not(:hover) {   
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--main-color);
    color: var(--assort-color);
  }
  a[type="hashTag"]:hover {
    background-color: var(--assort-color);
    color: var(--main-color);
    border-color: var(--main-color); /* */
  }

カーソル
style.css     /* カーソル */
  .cursor {
    background-color: var(--accent-color);
  }
  .shared-cursors .cursor {
    background-color: var(--accent-color);
  }
  /* ステータスバー */
  .status-bar {
    background-color: var(--base-color, Red);
  }
  

シンタックスハイライト
/progfay-pub/Dracula_Code_CSS
style.css.line span.code-block {
	background-color: #282a36;
}
.line code > span > span {
	color: #f8f8f2;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #8be9fd;
}

.hljs-keyword {
  color: #ff79c6;
}

.hljs,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-title {
  color: #50fa7b;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #f1fa8c;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4;
}

.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 {
  color: #bd93f9;
}

.hljs-emphasis {
  font-style: italic;
}

style.css.hljs-selector-id, .hljs-selector-class {
	color: #50fa7b;
}
.hljs-params, .hljs-built_in {
	color: #50fa7b;
}
.hljs-regexp {
	color: #f1fa8c;
}

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-start a { font-size: 110%; color: #FFF }
  .line span.code-block .code-block-margin {
     background-color: transparent;
  }
  

グリッド
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;
 }

入力時の文字色と背景色を変更する
style.csstextarea#text-input:focus {
    background: rgba(0, 0, 0, 0.3);
    color: #F5F8FA;
}

Page Menu 
アイコンの色が合わない場合の救済策
style.css.extension-btn {
   background-color: var(--main-color,white) ;
}
.extension-btn:hover {
  background-color: var(--accent-color,red) ;
}

/ahuglajbclajep/数行のCSSだけでお手軽にダークモードをやる方法の比較
/customize/Dark Theme CSS
ダークモード
progfay