CSS変数駆動型Cosenseテーマ

スキン（略称）https://img.icons8.com/ios-glyphs/90/christmas-angel.pngCosense二次用語 Cosenseテーマ

「CSS変数駆動型Cosenseテーマ」の定義

CSS変数によるテーマ全体の着脱フラグの存在

プロジェクトテーマのCSS全体を@container style()でnowwriting[kanrisuruk

特性と注意事項#CSS#container style()とフラグ変数の組み合わせには応用の幅がある

nowwriting擬似的な条件分岐によるフラグ変更

nowwritingCosense の ProjectCSS は再利用が容易なブロック単位でモジュール化されていることが多いが,

実際に、このwikiの settings ではいくつかの実験的 ProjectCSS をフラグ変数で管理し、特定条件下でのみ有効になるように工夫してある

主な用途：

実験的に導入しているCSSのオン・オフ

実験的なProjectCSSモジュールを特定条件下でのみ作動させる

ライトスキンとダークスキンの指定

モジュールをメンバーが自分でオプトイン・アウトできるようにする

starスキンをページごとに着脱させることが可能になる

古典的なカスタムテーマはCSSが@importされた時点でCosenseテーマの変数の値が上書きされたり、レイアウトや表示の変更が起こる代物であることがほとんどである。

有効フラグの値を変更するユーザー記法を定義し、その記法をテーマを適用するページに設置するだけ。

@container style()の変数対応や:has擬似クラスの登場以前は、tbcProjectCSS のみでこのようなことを実現することができなかった。

記法の実装例：ページ全体のスキンを切り替える記法 – バーの右側の余白部分をクリックすると一時的に切り替わったり切り替わらなかったりする実験的な記法（バーの余白をクリック）--project-theme noskinhttps://scrapbox.io/files/68baa6be397c192788fc905c.mp4

特定のCosenseテーマに対して選択的に着脱させることが可能

ライトテーマのプロジェクトにダークスキンを被せる等

具体的にはこのようにする

ページ背景が暗色でないテーマに対して、ダークテーマとして「Termika Radiado」で 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) {

htmldata-project-theme=default,

/* htmldata-project-theme=default-dark, */ /* ページ背景が暗色のテーマにつき対象から除外 */