Custom Theme: Urushi Purple / 錯紫
#UserCSS
艶やかな紫を存分に楽しむことができるScrapboxのカスタムテーマです
https://gyazo.com/9ec13fbf784e5dbf511c43905fc75035/raw#.png
2025/10/17
箇条書きのドット等をテーマカラーに変更
2025/10/16
使いやすさを優先して、ホーム画面のグリッドメニューを紫から白地に変更しました
このテーマは、次の論文で報告された、注視点における紫色の錯視から大きなインスピレーションを得ています。
(Schulz-Hildebrandt, 2025) When Purple Perceived Only at Fixation: A Fixation and Distance-Dependent Color Illusion
Retinaなどの高発色ディスプレイで見たとき、この背景に近接する紫はまるで漆かのような深い艶を示します。錯視の効果により、私達の眼は視野周縁部の紫を安定して捉えることができません。はっきりと紫として意識されるのは視野の中心にある紫だけであり、私たちの眼は周縁にかけてだんだんと紫と背景の青色を混同してしまうため、漆のような効果が生まれています。画面上部のナビゲーションバーには、その効果が特に顕著に表れています。
この漆のような効果に惚れ込み、Cosenseでそれを存分に堪能できないかと模索した結果、今回のテーマが誕生しました。
論文で報告された紫色と青色をそれぞれメインテーマとページ背景色として設定しつつ、はっきりと主張する紫とは対象的な、温かみのある色をノートの地の色に選びました。
積極的に紫を配置し、画面の一定の面積を紫が占めるように工夫しています
ポップな印象のある濃いピンクをアクセントとし、元気な印象にまとめました。
ぜひ、画面の輝度を高めに設定してお楽しみください
code:style.css
/*
著者 Yuki Minoh
ライセンス：CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
著作者名表示の上で自由に利用可
*/
.line-title {
font-weight: bold;
}
.line .indent-mark .dot {
background-color: var(--theme-purple);
}
.page-sidebar{
--page-bg: var(--theme-purple);
--page-text-color: var(--light-main) !important;
--page-link-color: var(--light-main) !important;
--card-description-color: var(--light-main) !important;
scrollbar-color: var(--accent) var(--theme-purple);
}
html {
scrollbar-color: var(--accent) var(--dark-main);
}
.footer {
border-right: solid black 1px;
}
.grid li.page-list-item:hover {
--card-bg: var(--theme-purple) !important;
--card-description-color: var(--light-main) !important;
--card-description-code-color: var(--light-main) !important;
--card-description-link-color: var(--light-main) !important;
--card-title-color: var(--light-main) !important;
}
/* https://coolors.co/6600ff-e0e1dd-fb6376-210124-495a9e */
:root {
--theme-purple: #6600FF;
--light-main: #e0e1dd;
--accent: #fb6376;
--dark-main: #495a9e;
--dark-sub: #210124;
--dark-mid: #352e61;
--2hop-search-bg: var(--dark-main) !important;
--body-bg: var(--dark-main) !important;
--brand-icon-color: var(--dark-main) !important;
--brand-icon-y-first-stop-opacity: 0.7 !important;
--brand-icon-y-last-stop-opacity: 0.7 !important;
--brand-icon-x-first-stop-opacity: 1 !important;
--brand-icon-x-last-stop-opacity: 1 !important;
--card-active-bg: rgb(from var(--dark-sub) r g b / 0.1);
--card-backside: var(--accent) !important;
--card-bg: var(--light-main) !important;
--card-box-hover-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-shadow-color: var(--theme-purple) !important;
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-description-code-color: var(--dark-mid) !important;
--card-description-color: var(--dark-sub) !important;
--card-description-link-color: var(--theme-purple) !important;
--card-hover-bg: transparent !important;
--card-title-bg-pinned: var(--accent) !important;
--card-title-bg: var(--theme-purple) !important;
--card-title-color: var(--theme-purple) !important;
--empty-page-link-color: var(--accent) !important;
--empty-page-link-hover-color: var(--dark-sub) !important;
--line-title-color: var(--theme-purple) !important;
--navbar-bg: var(--theme-purple) !important;
--navbar-icon-active-color: var(--dark-mid) !important;
--navbar-icon-color: var(--light-main) !important;
--navbar-icon-hovered-color: var(--theme-purple) !important;
--navbar-title-color: var(--light-main) !important;
--new-button-active-bg: var(--dark-mid) !important;
--new-button-bg: var(--light-main) !important;
--new-button-horizontal-color: var(--accent) !important;
--new-button-hover-bg: var(--dark-sub) !important;
--new-button-vertical-color: var(--accent) !important;
--page-bg: var(--light-main) !important;
--page-link-color-cursor-line: var(--dark-sub) !important;
--page-link-color: var(--theme-purple) !important;
--page-link-hover-color: var(--dark-sub) !important;
--page-text-color: var(--dark-sub) !important;
--relation-label-bg: var(--light-main) !important;
--relation-label-empty-bg: var(--accent) !important;
--relation-label-empty-text: var(--light-main) !important;
--relation-label-links-bg: var(--theme-purple) !important;
--relation-label-links-text: var(--light-main) !important;
--relation-label-text: var(--dark-sub) !important;
--search-form-bg: var(--dark-main) !important;
--search-form-icon-color: var(--light-main) !important;
--search-form-icon-focus-color: var(--dark-main) !important;
--telomere-border: var(--theme-purple) !important;
--telomere-unread: var(--accent) !important;
--telomere-updated: var(--accent) !important;
--tool-badge-bg: var(--theme-purple) !important;
--tool-bg: var(--theme-purple) !important;
--tool-color: var(--accent) !important;
--tool-light-color: var(--dark-sub) !important;
--tool-text-color: var(--light-main) !important;
}