Aureolo Dark
https://scrapbox.io/api/pages/nrem-confIgs/Aureolo/icon#.png
Aureolo.iconEclipse
UserCSS.icon
Aureolo:appearance
Aŭreoloにダークテーマ対応を追加する
前身: Termika Radiado,
依存先:
Aureolo Light
Auto Dark Themes
Inter
BIZ UDGothic
code:style.css
@import url('../Aureolo/import.css');
@import url('../Aureolo:appearance/import.css');
@import url('../Aureolo/base.css');
@import url('../Aureolo:appearance/base.css');
@import url('../Aureolo/var.css');
@import url('../Aureolo:appearance/var.css');
@import url("./var.css");
@import url('../Aureolo/etc.css');
@import url('../Aureolo:appearance/etc.css');
:root {
color-scheme: dark;
}
code:var.css
@import url("../Aureolo Light/var.css");
@import url('../Auto Dark Themes/var.css');
@import url("./import.css");
html {
--brand-color: hsl(from var(--navbar-bg, midnightblue) h 57% 30% / 1);
}
htmldata-project-theme=default,
htmldata-project-theme=default-dark,
htmldata-project-theme=default-minimal,
htmldata-project-theme=blue,
htmldata-project-theme=purple,
htmldata-project-theme=green,
htmldata-project-theme=orange,
htmldata-project-theme=red,
htmldata-project-theme=hacker1,
htmldata-project-theme=hacker2,
htmldata-project-theme=spring,
htmldata-project-theme=summer,
htmldata-project-theme=autumn,
htmldata-project-theme=winter,
htmldata-project-theme=tropical,
htmldata-project-theme=kyoto,
htmldata-project-theme=paris,
htmldata-project-theme=mred,
htmldata-project-theme=lgreen,
htmldata-project-theme=paper-light,
htmldata-project-theme=paper-dark,
htmldata-project-theme=paper-dark-dark,
htmldata-project-theme=hacker2,
htmldata-project-theme=newyork {
--brand-color: oklch(from var(--navbar-bg, midnightblue) l c h / 1);
--interactive-color: var(--c-red-1, lightcoral);
--cursor-color: oklch(from var(--interactive-color, lightcoral) 100% 80% h);
--user-flag-bg: hsl(from var(--interactive-color, lightsalmon) h 100% 25%);
--user-flag-name-color: white;
--text-selection-bg: hsl(from var(--interactive-color, lightsalmon) h 79% 60%);
--text-selection-bg-opacity: .35;
--navbar-bg: hsl(from midnightblue h 57% 30% / 0%);
--navbar-title-color: hsl(from var(--brand-color) h 80% 55%);
/* --search-form-bg: hsl(from var(--brand-color) h 49% 40% / 30%); */
--search-form-bg: hsl(from var(--brand-color) h 65% 40% / 35%);
--edit-mode-search-form-bg: hsl(from var(--brand-color) h 25% 47% / .15);
--search-form-focus-bg: var(--dropdown-menu-bg);
--search-form-text-color: hsl(from var(--dropdown-menu-item-color) h 70% 65%);
--search-form-text-focus-color: var(--dropdown-menu-item-color, deepskyblue);
--search-form-icon-color: hsl(from var(--brand-color) h 60% 55%);
--search-form-icon-focus-color: hsl(from var(--brand-color) h 60% 65%);
--search-form-focus-box-shadow-color: hsl(from var(--brand-color, midnightblue) h 57% 90%);
--search-form-focus-box-shadow:
0 0 0.5em hsl(from var(--brand-color) h s l / 0.44),
0 0px 0.5em hsl(from var(--brand-color) h s l / 0.44),
0 0 0.5em hsl(from var(--brand-color) h s l / 0.44),
0 -3px 0.75em hsl(from var(--brand-color) h s l / 0.44),
0 0.5em 1em hsl(from var(--brand-color) h s l / 0.48);
--dropdown-menu-bg: hsl(from var(--brand-color) h 25% 10% / 98%);
--dropdown-menu-item-hover-bg: hsl(257 23% 16%);
--dropdown-menu-item-color: color-mix(in oklab, var(--page-text-color) 85%, var(--dropdown-menu-bg));
--dropdown-menu-item-hover-color: var(--dropdown-menu-item-color);
--page-menu-bg: hsl(from var(--brand-color) h 57% 30% / 35%);
--edit-mode-page-menu-opacity: .65;
--tool-color: hsl(from var(--brand-color, magenta) h 40% 75%);
--expandable-menu-tool-button-color: var(--tool-color, var(--navbar-title-color, #848484));
--expandable-menu-toggle-button-color: var(--navbar-title-color);
--edit-mode-expandable-menu-bg: hsl(from var(--interactive-color, crimson) h 57% 30% / .35);
--edit-mode-expandable-menu-tool-button-color: var(--edit-mode-navbar-title-color);
--statusbar-page-title-bg: hsl(from var(--brand-color) h s l / 65%);
--statusbar-page-title-color: white;
--statusbar-page-list-status-bg: hsl(from var(--brand-color) h s l / 85%);
--statusbar-page-list-status-label-color: white;
--statusbar-error-bg: hsl(from goldenrod h s l / 65%);
--statusbar-error-label-color: midnightblue;
--page-border: none;
/* --page-border-top: 4px solid hsl(from var(--page-bg) h 15% 15% / 85%); */
/* --page-bg: hsl(222 11% 24%); */
/* --page-bg: hsl(257 23% 16%) */
--page-bg: oklch(from var(--brand-color) 30% 2% h);
--page-bg: oklch(from var(--brand-color) 0.3123 0.0293 h);
--page-bg: color-mix(in oklab, hsl(from var(--body-bg) h 20% 20%) 90%, hsl(from var(--brand-color) h 30% l));
--cursor-line-bg: hsl(0 0% 0% / .08);
--cursor-line-text-color: var(--page-text-color);
--line-not-cursor-line-opacity: .65; /* 0.65 はガンマ補正込みで 0.8 相当 */
--page-text-color: hsl(257 20% 83% / .96);
--page-text-color: hsl(257 15% 83%);
--page-link-color: var(--c-blue-2, skyblue);
--page-link-hover-color: var(--c-blue-1, deepskyblue);
--empty-page-link-color: hsl(356 100% 75%);
--empty-page-link-hover-color: hsl(356 100% 80%);
--hashtag-color: var(--c-green-3, forestgreen);
--hashtag-hover-color: var(--c-green-2, green);
--empty-hashtag-color: violet;
--empty-hashtag-hover-color: plum;
/* --line-permalink-color: hsl(353 85% 60% / 10%); */
--line-permalink-color: oklch(from var(--interactive-color, lightcoral) 100% 80% h / 10%);
/* --quote-bg-color: hsl(from var(--page-bg) h 20% 10% / .45); */
--quote-bg-color: color-mix(in hsl, hsl(from var(--page-bg) h 20% 10%) 45%, oklch(from var(--page-bg) calc(l * 1) c h) );
/* --quote-border-color: oklch(from var(--quote-text-color) l c h / .45); */
--quote-border-color: hsl(from var(--telomere-border) h 30% calc(83% * 7/8) / .45);
/* --quote-text-color: hsl(from var(--page-text-color) h s l / .9); */
--quote-text-color: hsl(from var(--page-text-color) h s l / .85);
--code-bg: rgba(0, 0, 0, 0.18);
--code-color: #999;
--code-helpfeel-bg: color-mix(in oklab, var(--c-red-5) 80%, oklch(from var(--page-bg) l 0 h / 1) );
--code-helpfeel-prefix-color: color-mix(in oklab, hsl(0 100% 100%) 70%, oklch(from var(--page-bg) l 0 h / 1) );
--code-helpfeel-entry-color: color-mix(in oklab, hsl(0 100% 100%) 80%, oklch(from var(--page-bg) l 0 h / 1) );
--page-image-filter:
brightness(.9)
drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
drop-shadow(0 0 6px rgba(0, 0, 0, 0.12))
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
--telomere-border: color-mix(in oklab, hsl(from var(--page-text-color) h s l / 1) 30%, var(--body-bg));
--telomere-updated: hsl(from var(--interactive-color, crimson) h 100% 32.5% / 85%);
--card-title-color: hsl(from var(--page-text-color) h s 80%);
--card-title-color: hsl(from var(--page-text-color) h s 75%);
--card-title-hover-color: hsl(from var(--page-text-color) h s 80%);
--card-description-color: hsl(from var(--page-text-color) h s l / .7);
--card-description-link-color: hsl(from var(--page-link-color) h s l / .7);
--card-description-code-color: hsl(from var(--code-color, #333) h s l / .7);
/* --card-bg: hsl(from #373b44 h s 30% / .55); */
--card-bg: hsl(from var(--page-bg, #373b44) h s 20% / .55);
/* --card-focused-bg: hsl(from #373b44 h s 25% / .6); */
--card-focused-bg: hsl(from var(--page-bg, #373b44) h s l / .6);
--card-hover-bg: transparent;
/* --card-focused-bg: hsl(from #373b44 h s l / 15%); */
--card-border: 2px solid transparent;
--card-hover-border: 2px solid var(--page-menu-bg, transparent);
--card-unread-border: 4px solid var(--telomere-unread, transparent);
--card-unread-border-default: 2px solid transparent;
--card-icon-filter: brightness(.75);
--card-icon-focused-filter: brightness(.9);
--card-backside: var(--brand-color, #aaa);
--card-pin-overhang-color: transparent;
/* --card-box-shadow:
0 0 6px hsl(0 0 0 / 0.22),
0 0 0.25em rgba(0, 0, 0, 0.2),
2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05);
--card-box-hover-shadow:
0 0 4px hsl(from var(--brand-color) h s l / 0.22),
0 0px 6px hsl(from var(--brand-color) h s l / 0.22),
0 0 6px hsl(from var(--brand-color) h s l / 0.22),
0 8px 16px hsl(from var(--brand-color) h s l / 0.24),
0 0 6px hsl(from var(--brand-color) h s l / 0.22),
0 0 0.25em hsl(from var(--brand-color) h s l / 0.2),
2.8px 2.8px 2.2px hsl(from var(--brand-color) h s l / 0.02),
6.7px 6.7px 5.3px hsl(from var(--brand-color) h s l / 0.028),
12.5px 12.5px 10px hsl(from var(--brand-color) h s l / 0.035),
22.3px 22.3px 17.9px hsl(from var(--brand-color) h s l / 0.042); */
--card-box-shadow-color: black;
--card-box-shadow-color: hsl(from var(--page-bg) h 20% 5%);
/* --card-box-shadow:
0 0 6px hsl(from var(--card-box-shadow-color) h s l / 0.22),
0 0 0.25em hsl(from var(--card-box-shadow-color) h s l / 0.2),
2.8px 2.8px 2.2px hsl(from var(--card-box-shadow-color) h s l / 0.02),
6.7px 6.7px 5.3px hsl(from var(--card-box-shadow-color) h s l / 0.028),
12.5px 12.5px 10px hsl(from var(--card-box-shadow-color) h s l / 0.035),
22.3px 22.3px 17.9px hsl(from var(--card-box-shadow-color) h s l / 0.042),
41.8px 41.8px 33.4px hsl(from var(--card-box-shadow-color) h s l / 0.05); */
--card-box-shadow:
-4px -6.7px 5.3px hsl(from var(--card-box-shadow-color) h s l / 0.04),
4px 6.7px 5.3px hsl(from var(--card-box-shadow-color) h s l / 0.04),
-12.5px 12.5px 10px hsl(from var(--card-box-shadow-color) h s l / 0.035),
12.5px 12.5px 10px hsl(from var(--card-box-shadow-color) h s l / 0.035),
-12.3px 22.3px 17.9px hsl(from var(--card-box-shadow-color) h s l / 0.051),
12.3px 22.3px 17.9px hsl(from var(--card-box-shadow-color) h s l / 0.051);
--card-box-hover-shadow-color: hsl(from var(--brand-color) h 70% 45%);
--card-box-hover-shadow:
0 0 4px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),
0 0px 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),
0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),
0 8px 16px hsl(from var(--card-box-hover-shadow-color) h s l / 0.24),
0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),
0 0 0.25em hsl(from var(--card-box-hover-shadow-color) h s l / 0.2),
2.8px 2.8px 2.2px hsl(from var(--card-box-hover-shadow-color) h s l / 0.02),
6.7px 6.7px 5.3px hsl(from var(--card-box-hover-shadow-color) h s l / 0.028),
12.5px 12.5px 10px hsl(from var(--card-box-hover-shadow-color) h s l / 0.035),
22.3px 22.3px 17.9px hsl(from var(--card-box-hover-shadow-color) h s l / 0.042);
--card-icon-hover-animation-duration: 0.15s;
/* 1 hop links*/
--relation-label-links-bg: hsl(from var(--page-bg) h s 11.5%);
--relation-label-links-hover-bg: var(--relation-label-links-bg);
--relation-label-links-text: var(--page-link-color);
--relation-label-links-hover-text: var(--page-link-color);
/* 2 hop links */
--relation-label-bg: hsl(from var(--page-bg) h s 11.5%);
--relation-label-hover-bg: hsl(from var(--page-bg, #373b44) h s 20% / .15);
--relation-label-text: var(--hashtag-color);
--relation-label-hover-text: var(--hashtag-color);
--relation-label-box-shadow: none;
--relation-label-box-hover-shadow-color: hsl(from var(--hashtag-hover-color) h s 30%);
--relation-label-box-hover-shadow:
0 0 4px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),
0 0px 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),
0 0 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),
0 8px 16px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.24),
0 0 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),
0 0 0.25em hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.2),
2.8px 2.8px 2.2px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.02),
6.7px 6.7px 5.3px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.028),
12.5px 12.5px 10px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.035),
22.3px 22.3px 17.9px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.042);
--relation-label-border: 1px solid transparent;
--relation-label-hover-border: 1px solid hsl(from var(--hashtag-hover-color, transparent) h s l / .4);
--relation-label-2hop-hover-animation-duration: 0.4s;
--relation-label-empty-bg: var(--relation-label-links-bg);
--relation-label-empty-hover-bg: var(--relation-label-links-bg);
--relation-label-empty-text: var(--empty-page-link-color);
--relation-label-empty-hover-text: var(--empty-page-link-color);
--stream-section-label-bg: var(--search-form-bg);
}
body {
/* background-color: oklch(from var(--body-bg) 12% c h); */
background-color: hsl(from var(--body-bg) h s 12%);
}
htmldata-project-theme=blue { --navbar-bg: hsl(from var(--c-blue-3) h s l / 0); }
htmldata-project-theme=purple { --navbar-bg: hsl(from var(--c-purple-3) h s l / 0); }
htmldata-project-theme=green { --navbar-bg: hsl(from darkgreen h s l / 0); }
htmldata-project-theme=orange { --navbar-bg: hsl(43 71 50 / 0); }
htmldata-project-theme=red { --navbar-bg: hsl(from var(--c-red-4, darkred) h s l / 0); }
テキストの調整
BIZ UDGothic
Inter
Google Sans Flex
code:import.css
@import url('../BIZ UDGothic/style.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wdth,wght@6..144,25..151,1..1000&display=swap');
code:var.css
htmldata-project-theme {
--line-title-latin: "Google Sans Flex", "Google Sans", -apple-system, "Segoe UI Variable Display", "Roboto Flex", "Roboto", "Helvetica", "Arimo";
--line-title-ja: "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic Medium";
--line-title-font-weight: 550;
--line-title-font-size-adjust: initial;
--paragraph-latin: "Inter Variable", "Inter", "Roboto Flex", "Roboto", Helvetica, "Arimo", "Arial";
--paragraph-ja: "BIZ UDゴシック", "BIZ UDGothic", "Jikasei Rounded M PLUS", "M PLUS Rounded 1c", "Noto Sans JP", "Noto Sans CJK JP";
/* --page-font-size-adjust: 0.51; */
--page-font-size-adjust: 0.5;
}
.line .code { font-size-adjust: inherit; }
.line .deco-\/ { font-size-adjust: inherit; }
--deco-marking-pencil-color
code:import.css
@import url("../--deco-marking-pencil-color/dark.css");
#color_scheme
#UserCSS