work4ai ダークモード
システムのテーマがダークのときに勝手に適用されます
修正案&要望↓
ダークモードの時にdate modified with meの縁取りが消えちゃってますね
!important あたりが原因だと思うのでいじってみます
難しい、消し飛ばすとライトテーマに負けるのか
上のツールバーの背景色
permanent link行？の色を変えてほしい
これはどれだろう？
permalinkのことでした(うろ覚えでかかない方がいいな)
上のやつなので修正done
黄色いやつか！分かってなかった！
コードブロック上だと消える
元のCSSの設計がいまいちですねここ…
cursor-lineのリンク色もコントラスト低すぎる？
そんなに気にならないけどホームでコードブロックの文字が濃くて読みずらいので変えた
色わからないのでとりあえず他のdescription色にした
画像の背景色をシルバーに
透過画像+黒文字系の画像が読みにくかった
赤い線の走る黒色がかっこいい
style.css@media (prefers-color-scheme: dark) {
body{
/* --テキスト-- */
color: var(--page-text-color) ;
/* --- 全体 --- */
--body-bg: #111827; /* 背景 */
--cursor-color: #d3d3d3;
/* --- トップ --- */
--card-bg: rgb(44 58 77 / 65%) !important;
--card-title-color: #d3d3d3;
/* --- ヘッダー --- */
--navbar-bg: #1f2937; /* ヘッダー背景 */
--tool-text-color: #f55600; /* プロジェクト名 */
--new-button-bg: transparent; /* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-horizontal-color: #f55600;
--new-button-vertical-color: #f55600; /* ↑ */
--search-form-bg: #374151; /* 検索画面 */
--search-form-icon-color: #f55600; /* 🔍 */
--search-form-text-color: #555; /* 検索の文字 */
--navbar-icon-color: #f55600; /* ^ */
--navbar-icon-hovered-color: #d3d3d3; /* ^:hover */
--navbar-icon-active-color: #f55600 ;
/* --- ページ --- */
--page-bg: #1f2937;
--page-link-color: #77befb;
--page-link-hover-color: #a8d7ff;
--page-link-color-cursor-line: #ec61ef;
--page-text-color: #d3d3d3;
--line-title-color: #d3d3d3;
--quote-bg-color: #374151;
--telomere-border: #374151;
--telomere-updated: #a9450f; /* テロメア編集 */
--telomere-unread: #a9450f; /* テロメア未読 */
--line-permalink-color: #ed6b244d;
/* --- ページメニュー --- */
--tool-bg: #1f2937;
/* --- コード --- */
--code-bg: #1b212a; /* 背景 */
--code-color: #d3d3d3;
/* --- 関連ページ ラベルデザイン --- */
--2hop-search-bg: #1f2937;
--relation-label-bg: #1f2937;
--relation-label-empty-bg: #1f2937;
--relation-label-links-bg: #1f2937;
--relation-label-text:#304ea2;
--relation-label-empty-text: #c72626;
--relation-label-links-text: #4367bf;
--card-description-code-color: #808080;
}
a {
color: var(--page-link-color)
}
/* ---変数がないもの --- */
/* ---スクロールバー--- */
::-webkit-scrollbar-thumb{
background-color: #d3d3d3;
}
::-webkit-scrollbar-track{
background-color: #1f2937;
}
/* --- トップ --- */
.page-list {
.grid {
li {
a {
&:hover {
}
.content {
.icon {
img {
filter: brightness(0.9);
}
}
}
}
}
li.pin {
a {
background-color: var(--card-bg) !important;
&:hover {
outline: none !important;
}
.header.pinned {
background-color: rgb(18 26 41) !important;
.title {
background-image: linear-gradient(to right,#d2d2d2 50%,#5e656e 50%) !important;
}
}
}
&:first-of-type {
a {
.header.pinned {
background-color: transparent !important;
.title {
background-image: linear-gradient(to right,#f55600 50%,#d2d2d2 50%) !important;
}
}
}
}
}
}
}
.grid li.page-list-item.grid-style-item.unread a{outline: 3px solid #6ac983;}
/* --- ヘッダー --- */
.app .navbar{border-bottom: 7px solid #1b212a;}
.search-form .form-group input:focus, .search-form .form-group input.for-mobile{
background-color: #374151;
color: #d3d3d3;
}
[data-hover-visible] .new-button:hover{ /* 新規作成ボタン:hover */
--new-button-horizontal-color: #d2d2d2 !important;
--new-button-vertical-color: #d2d2d2 !important;
}
.navbar .open .navbar-brand .kamon-caret-down{color: #d3d3d3 !important;}
.search-form .form-group .button-container button.focus,.search-form .form-group .button-container button.for-mobile{color: #f55600 !important;}
.navbar .navbar-menu>li>a{ color: #f55600 !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: #1f2937;}
.dropdown-menu>li>a:active, [data-hover-visible] .dropdown-menu>li>a:hover, [data-focus-visible] .dropdown-menu>li>a:focus{background-color: #374151;}
.dropdown-menu>li>a:active, [data-hover-visible] .dropdown-menu>li>a:hover, [data-focus-visible] .dropdown-menu>li>a:focus{color: #d3d3d3;}
.dropdown-menu .dropdown-item a{color: #d3d3d3}
/* --- ページ --- */
.line img.icon{filter: brightness(0.8) saturate(1.2);}
/* --- 画像 --- */
.line img.image, .video-player video, .iframe-video-player iframe{
border: 2px solid #3b4758 !important;
background-color: #ebebeb;
}
.line strong.level{ /* 太字の色 */
color: #f3f3f3;
}
/* --- テーブル --- */
.table-block .cell{
outline: 2px solid #374151;
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;
}
/* --- 外部リンクにホバーで注釈 --- */
.line:not(:has(.deco-\.)) a.link:not(.icon)::after{outline: 1px solid #ad3f05;}
.line:not(:has(.deco-\.)) a.link:not(.icon)::before{border-top: 6px solid #ad3f05 !important;}
.line:not(.cursor-line) .deco-\.:has(.link)::after{outline: 1px solid #ad3f05;}
.line:not(.cursor-line) .deco-\.:has(.link)::before{border-top: 6px solid #ad3f05 !important;}
/* --- 関連ページ検索 --- */
.related-page-list .toolbar .related-page-list-search:focus-within{
background-color: #1f2937;
caret-color: #d3d3d3;
}
.related-page-list .toolbar .related-page-list-search:focus-within .fa-search{
color: #f55600;
}
/* --- ページメニュー --- */
.page-menu ul>li>div{color: #d3d3d3;}
/* --- 検索ページ --- */
.list li.page-list-item{
background-color: #1f2937;
border-bottom: 1px solid #111827;
}
[data-hover-visible] .list li.page-list-item a:hover{background-color: #374151;}
.list li.page-list-item a{color: #d3d3d3;}
/* --- プロジェクト切り替え --- */
.dropdown-menu>li>a{
color: #d3d3d3
}
/* --- スマホ時拡大メニュー --- */
.expandable-menu{background-color: #111827 !important;}
}