UserCSS:ダークテーマ
ダークテーマ（dark theme）
code:style.css
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #121212;
--line-title-color: #ffffff;
--card-bg: rgba(255, 255, 255, 0.2);
--card-description-color: rgba(255, 255, 255, 0.7);
--card-hover-bg: rgba(255, 255, 255, 0.05);
--card-title-bg: rgba(255, 255, 255, 0.12);
--card-title-bg-pinned: rgba(255, 255, 255, 0.08);
--card-title-color: #ffffff;
--code-bg: rgba(255, 255, 255, 0.8);
--navbar-bg: #424242;
--navbar-icon-color: #ffffff;
--page-bg: rgba(255, 255, 255, 0.2);
--page-text-color: #ffffff;
--quote-bg-color: rgba(255, 255, 255, 0.04);
--search-form-bg: rgba(255, 255, 255, 0);
--search-form-icon-color: rgba(255, 255, 255, 0.2);
--search-form-icon-focus-color: rgba(255, 255, 255, 0.54);
--search-form-text-color: #ffffff;
--tool-badge-bg: rgba(255, 255, 255, 0.2);
--tool-bg: rgba(255, 255, 255, 0.2);
--tool-color: rgba(255, 255, 255, 0.7);
--tool-text-color: #ffffff;
}
.cursor {
stroke: #808080;
}
.drawer .drawer-menu {
background-color: #424242;
}
.drawer .drawer-menu .divider {
background-color: rgba(255, 255, 255, 0.12);
}
.drawer .drawer-menu ul li a {
color: #ffffff;
}
.drawer .drawer-menu ul li.list-header {
color: rgba(255, 255, 255, 0.7);
}
.drawer .drawer-menu ul li.list-menu-button a {
color: rgba(255, 255, 255, 0.7);
}
.dropdown-header {
color: rgba(255, 255, 255, 0.7);
}
.dropdown-menu {
background-color: #424242;
}
.dropdown-menu .divider {
background-color: rgba(255, 255, 255, 0.12);
}
.dropdown-menu > li > a {
color: #ffffff;
}
.dropdown-menu > li > a:active,
data-hover-visible .dropdown-menu > li > a:hover,
data-focus-visible .dropdown-menu > li > a:focus {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:active,
data-hover-visible .dropdown-menu > .disabled > a:hover,
data-focus-visible .dropdown-menu > .disabled > a:focus {
color: rgba(255, 255, 255, 0.5);
}
.expandable-menu .page-menu .tool-btn {
color: rgba(255, 255, 255, 0.26);
}
.expandable-menu .toggle-button {
color: rgba(255, 255, 255, 0.26);
}
.global-menu.dropdown-menu > li.dropdown-menu-button a {
color: rgba(255, 255, 255, 0.7);
}
.global-menu.dropdown-menu > li > a .kamon,
.global-menu.dropdown-menu > li.dropdown-header .kamon {
fill: #ffffff;
}
.global-menu .project-list-filter .kamon,
.drawer .project-list-filter .kamon {
fill: #ffffff;
}
.list li.page-list-item {
background-color: rgba(255, 255, 255, 0.2);
border-bottom: rgba(255, 255, 255, 0.12);
}
.list li.page-list-item a:active {
background-color: rgba(255, 255, 255, 0.2);
}
data-hover-visible .list li.page-list-item a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.list li.page-list-item a {
color: #ffffff;
}
.list li.page-list-item a .description {
color: rgba(255, 255, 255, 0.7);
}
.navbar .navbar-brand .kamon-caret-down {
color: rgba(255, 255, 255, 0.26);
}
.navbar .navbar-brand:hover .kamon-caret-down {
color: rgba(255, 255, 255, 0.54);
}
.navbar .navbar-menu > li > a {
color: rgba(255, 255, 255, 0.26);
}
.page-menu ul > li > div {
color: #ffffff;
}
.search-form {
border: 1px solid rgba(255, 255, 255, 0.23);
}
.search-form .form-group input:focus {
color: #ffffff;
background-color: #424242;
}
}