/suto3/UserCSS:ダークテーマ

generated at 2/11/2025, 10:14:39 AM
UserCSS:ダークテーマ
ダークテーマ（dark theme）

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