ダークモードcss
code:style.css
@media (prefers-color-scheme: dark) {
:root {
--primary-bg: #1c1c1c;
--secondary-bg: #2e2e2e;
--third-bg: #242424;
--primary-text: #d3d3d3;
--tool-text: #afb3f7;
}
body {
color: var(--primary-text);
/* --- 全体 --- */
--body-bg: var(--primary-bg);
/* 背景 */
--cursor-color: var(--primary-text);
/* --- トップ --- */
--card-bg: var(--secondary-bg);
--card-title-color: var(--primary-text);
/* --- ヘッダー --- */
--navbar-bg: var(--secondary-bg);
/* ヘッダー背景 */
--tool-text-color: var(--tool-text);
/* プロジェクト名 */
--new-button-bg: transparent;
/* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-horizontal-color: var(--tool-text);
--new-button-vertical-color: var(--tool-text);
/* ↑ */
--search-form-bg: var(--third-bg);
/* 検索画面 */
--search-form-icon-color: var(--tool-text);
/* 🔍 */
--search-form-icon-focus-color: #d2d2d2;
--search-form-text-color: #555;
/* 検索の文字 */
--navbar-icon-color: var(--tool-text);
/* ^ */
--navbar-icon-hovered-color: var(--tool-text);
/* ^:hover */
--navbar-icon-active-color: var(--tool-text);
/* --- ページ --- */
--page-bg: var(--secondary-bg);
--page-link-color: #77befb;
--page-link-hover-color: #a8d7ff;
--page-link-color-cursor-line: #ec61ef;
--page-text-color: var(--primary-text);
--line-title-color: var(--primary-text);
--quote-bg-color: var(--third-bg);
--telomere-border: var(--third-bg);
--telomere-updated: #afb3f7;
/* テロメア編集 */
--telomere-unread: #c0c9d5;
/* テロメア未読 */
--line-permalink-color: #ed6b244d;
/* --- ページメニュー --- */
--tool-bg: var(--secondary-bg);
/* --- コード --- */
--code-bg: #1c1c1c;
/* 背景 */
--code-color: var(--primary-text);
/* --- 関連ページ ラベルデザイン --- */
--2hop-search-bg: var(--secondary-bg);
--relation-label-bg: var(--secondary-bg);
--relation-label-empty-bg: var(--secondary-bg);
--relation-label-links-bg: var(--secondary-bg);
--relation-label-text: #304ea2;
--relation-label-empty-text: #c72626;
--relation-label-links-text: #4367bf;
}
/* --- 変数がないもの --- */
/* --- トップ --- */
.grid li.page-list-item.grid-style-item a {
outline: 1px solid var(--third-bg);
}
/* サムネアウトライン */
.grid li.page-list-item.grid-style-item a:hover {
outline: 1px solid #afb3f7;
}
/* サムネアウトライン:hover */
.grid li.page-list-item a .icon img {
filter: brightness(0.9);
}
/* --- ヘッダー --- */
.app .navbar {
border-bottom: 7px solid #1c1c1c;
}
.search-form .form-group input:focus,
.search-form .form-group input.for-mobile {
background-color: var(--third-bg);
color: var(--primary-text);
}
data-hover-visible .new-button:hover {
/* 新規作成ボタン:hover */
--new-button-horizontal-color: #d2d2d2 !important;
--new-button-vertical-color: #d2d2d2 !important;
}
data-hover-visible .navbar .navbar-brand:hover {
color: #d2d2d2 !important;
}
.global-menu.dropdown-menu>li>a .kamon,
.global-menu.dropdown-menu>li.dropdown-header .kamon {
fill: #d2d2d2;
}
.navbar .open .navbar-brand .kamon-caret-down {
color: var(--primary-text) !important;
}
.search-form .form-group .button-container button.focus,
.search-form .form-group .button-container button.for-mobile {
color: #afb3f7 !important;
}
.navbar .navbar-menu>li>a {
color: #afb3f7 !important;
}
.navbar .navbar-menu>li>a:hover,
.navbar .navbar-menu>li>a:active,
.navbar .navbar-menu>li>a:focus {
color: #000 !important;
}
/* --- 検索欄 --- */
.dropdown-menu {
background-color: var(--secondary-bg);
}
.dropdown-menu>li>a:active,
data-hover-visible .dropdown-menu>li>a:hover,
data-focus-visible .dropdown-menu>li>a:focus {
background-color: var(--third-bg);
}
.dropdown-menu>li>a:active,
data-hover-visible .dropdown-menu>li>a:hover,
data-focus-visible .dropdown-menu>li>a:focus {
color: var(--primary-text);
}
.dropdown-menu .dropdown-item a {
color: var(--primary-text);
}
/* --- ページ --- */
.line img.icon {
filter: brightness(0.9);
}
/* --- 画像 --- */
.line img.image,
.video-player video,
.iframe-video-player iframe {
border: 2px solid #3b4758 !important;
}
/* --- テーブル --- */
.table-block .cell {
outline: 2px solid var(--third-bg);
outline-offset: -1px;
}
.table-block .table-block-start {
background-color: #c0c9d5;
}
.table-block .table-block-start a {
color: #111827;
font-weight: 500;
}
/* --- コード --- */
.line span.code-block .code-block-start {
background-color: #c0c9d5;
}
.line span.code-block .code-block-start a {
color: #111827;
font-weight: 500;
}
.line.permalink span.code-block {
background-color: #463024;
}
/* --- で挟んだコード --- */
.line .code.highlight {
--code-bg: #3e4856;
}
/* --- 関連ページ検索 --- */
.related-page-list .toolbar .related-page-list-search:focus-within {
background-color: var(--secondary-bg);
caret-color: var(--primary-text);
}
.related-page-list .toolbar .related-page-list-search:focus-within input,
.related-page-list .toolbar .related-page-list-search:focus-within .fa-spinner {
color: #d2d2d2;
}
.related-page-list .toolbar .related-page-list-search:focus-within .fa-search {
color: #afb3f7;
}
/* --- ページメニュー --- */
.page-menu ul>li>div {
color: var(--primary-text);
}
/* --- 検索ページ --- */
.list li.page-list-item {
background-color: var(--secondary-bg);
border-bottom: 1px solid #111827;
}
data-hover-visible .list li.page-list-item a:hover {
background-color: var(--third-bg);
}
.list li.page-list-item a {
color: var(--primary-text);
}
/* --- プロジェクト切り替え --- */
.dropdown-menu>li>a {
color: var(--primary-text)
}
/* --- スマホ時拡大メニュー --- */
.expandable-menu {
background-color: #111827 !important;
}
.drawer .drawer-menu {
background-color: var(--body-bg);
}
.drawer .drawer-menu ul li a {
color: var(--page-text-color);
}
::-webkit-scrollbar-thumb {
background: rgba(217, 217, 227, .8) !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(236, 236, 241, 1) !important;
}
}
2023/08/20
UserCSS.icon