ページ全体のスキンを切り替える記法
別名 スキン一時適用記法redhttps://img.icons8.com/material-outlined/384/000000/settings.png#追加記法 スキンバグの温床。要修正。
表示確認
https://scrapbox.io/files/68baa6be397c192788fc905c.mp4
A
--project-theme noskin
--project-theme nremiel.auto
--project-theme another-dimension
管理用
settings.icon
このサイトのCosenseテーマ
Anĝela Osto--project-theme nremiel.osto
Termika Radiado--project-theme nremiel.radiado-dark
Alruina Aŭreolo--project-theme nremiel.aureolo
他のCosenseユーザーによる公開テーマ
--project-theme customize.dark-theme
Cosense Native
Default
Light--project-theme settings.default
Dark--project-theme settings.default-dark
Compact--project-theme settings.default-compact
Paper
Light--project-theme settings.paper
Dark--project-theme settings.paper-dark
Dark Dark--project-theme settings.paper-dark-dark
Stationary
Blue--project-theme settings.blue
Purple--project-theme settings.purple
Green--project-theme settings.green
Orange--project-theme settings.orange
Red--project-theme settings.red
Hacker
Hacker 1--project-theme settings.hacker1
Hacker 2--project-theme settings.hacker2
Seasons
Winter--project-theme settings.winter
Summer--project-theme settings.summer
Spring--project-theme settings.spring
Autumn--project-theme settings.autumn
Tropical
Tropical--project-theme settings.tropical
City
Kyoto--project-theme settings.kyoto
New York--project-theme settings.newyork
Paris--project-theme settings.paris
Game
Red--project-theme settings.mred
Green--project-theme settings.lgreen
CSS
code:style.css
*:has(.deco-\<.deco-\#) {
&:has(span:nth-child(1) > adata-page-title="--project-theme noskin") {
--overwrite-native-themes: n;
--project-theme: "";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme noskin") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "スキン無効";
display: block;
width: 100%;
background-color: black;
color: crimson;
text-align: start;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.auto") {
@media screen and (prefers-color-scheme: light) {
--project-theme: "nremiel.aureolo";
}
@media screen and (prefers-color-scheme: dark) {
--project-theme: "nremiel.radiado-dark";
}
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.auto") {
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme another-dimension") {
@media screen and (prefers-color-scheme: light) {
--project-theme: "nremiel.osto";
}
@media screen and (prefers-color-scheme: dark) {
--project-theme: "nremiel.radiado-dark";
}
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.auto") {
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.osto") {
--project-theme: "nremiel.osto";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.osto") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.radiado-dark") {
--project-theme: "nremiel.radiado-dark";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.radiado-dark") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-2);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.aureolo") {
--project-theme: "nremiel.aureolo";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme nremiel.aureolo") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.default-auto") {
@media screen and (prefers-color-scheme: light) {
--project-theme: "settings.default";
}
@media screen and (prefers-color-scheme: dark) {
--project-theme: "settings.default-dark";
}
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.default-auto") {
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.default") {
--overwrite-native-themes: n;
--project-theme: "settings.default";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.default") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.default-dark") {
--overwrite-native-themes: n;
--project-theme: "settings.default-dark";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.default-dark") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.paper-dark-dark") {
--overwrite-native-themes: n;
--project-theme: "settings.paper-dark-dark";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.paper-dark-dark") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.hacker1") {
--overwrite-native-themes: n;
--project-theme: "settings.hacker1";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.hacker1") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.hacker2") {
--overwrite-native-themes: n;
--project-theme: "settings.hacker2";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.hacker2") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme settings.autumn") {
--overwrite-native-themes: n;
--project-theme: "settings.autumn";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme settings.autumn") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > adata-page-title="--project-theme customize.dark-theme") {
--overwrite-native-themes: n;
--project-theme: "customize.dark-theme";
& .deco-\<.deco-\#:has(span:nth-child(1) > adata-page-title="--project-theme customize.dark-theme") {
& > span:nth-child(1) > a { display: none; }
&::after {
content: "現在のスキン: " var(--current-project-skin-name);
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > a.iconhref="/nremiel/settings") {
@media screen and (prefers-color-scheme: light) {
--project-theme: "nremiel.osto";
}
@media screen and (prefers-color-scheme: dark) {
--project-theme: "nremiel.radiado-dark";
}
& .deco-\<.deco-\#:has(span:nth-child(1) > a.iconhref="/nremiel/settings") {
&::after {
content: "現在のスキン: settings (" var(--current-project-skin-name) ")";
display: block;
width: 100%;
background-color: transparent;
color: var(--c-red-1);
text-align: center;
font-weight: bold;
font-family: var(--ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
}
}
}
&:has(span:nth-child(1) > atype="hashTag"data-page-title="category") {
@media screen and (prefers-color-scheme: light) {
--overwrite-native-themes: n;
--project-theme: "customize.dark-theme";
}
@media screen and (prefers-color-scheme: dark) {
--overwrite-native-themes: n;
--project-theme: "customize.dark-theme";
}
}
&:has(span:nth-child(1) > atype="hashTag"data-page-title="keyword-anchor") {
@media screen and (prefers-color-scheme: light) {
--overwrite-native-themes: n;
--project-theme: "customize.dark-theme";
}
@media screen and (prefers-color-scheme: dark) {
--overwrite-native-themes: n;
--project-theme: "customize.dark-theme";
}
}
}