このサイトのCosenseテーマ
永遠の未完成品。
table:Cosense themes by Nremiel
Initial release Theme name light dark Description Release note
2025-08 Anĝela Osto.icon Anĝela Osto y – “Angel's Bone” 2025-09 Alruina Aŭreolo.icon Alruina Aŭreolo y – “The Halo that is toward being ruined” 機能と焦点
ProjectCSS またはユーザーCSSとしての利用
動作環境
システムフォントへの依存
Windows や macOS のシステムフォント。他のプラットフォームでは別のフォントで表示される。
代わりとなるウェブフォントを探している。
starこのような記述starを Cosense.iconCosense 用のCSSに追加する。 code:example.css
@import "/api/code/nremiel/settings%2Ftheme%2Faureolo/style.css";
:root {
color-scheme: light dark;
}
@media screen and (prefers-color-scheme: light) {
:root {
--project-theme: "nremiel.aureolo";
}
}
例A. そのまま Cosense の外観を上書きする
code:aureolo.css
@import "/api/code/nremiel/settings%2Ftheme%2Faureolo/style.css";
:root {
--project-theme: "nremiel.aureolo";
}
例B. Cosense のダークテーマとして反映させる
code:as-dark.css
@import "/api/code/nremiel/settings%2Ftheme%2Fradiado-dark/style.css";
:root {
color-scheme: light dark;
}
@media screen and (prefers-color-scheme: dark) {
--project-theme: "nremiel.radiado-dark";
}
}
例C. Cosense テーマのページ背景色に基づいて変更する
この「Termika Radiado」をページ背景が暗色でない Cosense テーマ用のダークテーマとして
「Anĝela Osto」をページ背景が明色でない Cosense テーマ用のライトテーマとして、
Cosense の外観を上書きする場合。
以下のいずれかのコードを追加する。
code:example.css
@import "/api/code/nremiel/Termika_Radiado/auto-smart.css";
または
code:auto-smart.css
@import "/api/code/nremiel/An%C4%9Dela_Osto/as-light.css";
@import "/api/code/nremiel/Termika_Radiado/as-dark.css";
あ
CSS変数を定義する「テーマプロファイル」部と、CSS変数の値を参照する「反映」部の2つのグループがある。
1. starProjectCSSが「テーマプロファイル」CSSを@importstarする。 ProjectCSSに@importされた「テーマプロファイル」は「反映」部を@importする。
ProjectCSSが「反映」部を直接@importする必要はない。
2. starProjectCSSにCSS変数--project-themestarを定義して、starページに適用する「テーマプロファイル」を指定する。 この変数にはテーマ固有の文字列を代入する。
有効な値の場合にのみ、これらのカスタムテーマが適用される。
DOM構造の途中から部分的にカスタムテーマを適用したり別のテーマに変えたりすることができなくもないが、Cosenseの挙動がくっそ重くなっても作者は知らないよ。
テーマプロファイル部
変数反映部
CSSの@container style()とvar()を複数組み合わせて実装されており、重い。
詳細度と変数のスコープを間違えた瞬間に Cosense の動作が重くなり、使い物にならなくなる。
胡乱な解説
CSS変数を定義する「テーマプロファイル」部と、CSS変数の値を参照する「反映」部の2つのグループがある。
1. starProjectCSSが「テーマプロファイル」CSSを@importstarする。 ProjectCSSに@importされた「テーマプロファイル」は「反映」部を@importする。
2. starProjectCSSにCSS変数--project-themestarを定義して、starページに適用する「テーマプロファイル」を指定する。 この変数にはテーマ固有の文字列を代入する。
有効な値の場合にのみ、これらのカスタムテーマが適用される。
DOM構造の途中から部分的にカスタムテーマを適用したり別のテーマに変えたりすることができなくもないが、Cosenseの挙動がくっそ重くなっても作者は知らないよ。
yellowテーマプロファイルが有効な場合、プロファイル自身がCSS変数--overwrite-native-themesを定義してその値にyを代入する。 これにより反映部が有効になる（@container style(--overwrite-native-themes: y)が条件）。
orangeProjectCSSがこの変数に直接触れる必要はない。 この変数は通常、--project-themeで指定されたプロファイル自身が定義する。
この変数をy以外の値（n等）にするとNremのカスタムテーマが反映されなくなる。
CSS変数--project-themeが不正な値の場合、
プロファイルのCSS変数が未定義状態になる。
CSS変数--overwrite-native-themesが未定義状態になる。
つまり、適用される変数も変数を適用する者もいなくなる。