Cosenseテーマ
Cosense.iconCosense のネイティブテーマhttps://scrapbox.io/files/66c4890520f9ee001d6f416e.png#Cosense用語 #ProjectCSS /help/themes
app.css: https://scrapbox.io/assets/css/app.css
Cosense標準テーマはhtml[data-project-theme=]の値で判定を行う。
/programming-notes/ScrapboxのThemeの仕様 – CSS変数の一覧
/scrapboxlab/UserCSS で使える変数 – CSS変数の一覧
/villagepump/Scrapboxのライトテーマとダークテーマをワンタッチで切り替え – ブラウザの User JavaScript and CSS 拡張機能等でも実行可能
Cosense ネイティブテーマの一覧
redテーマ切り替えボタンは工事中です。
NremのCosenseテーマ互換レイヤー
ページ全体のスキンを切り替える記法
次のバーの右側をクリックすると現在のScrapboxのプロジェクトテーマになります。--project-theme noskin
Default
--project-theme settings.default
--project-theme settings.default-dark
--project-theme settings.default-compact
code:scrapbox-theme-list.css
html[data-project-theme=default]
html[data-project-theme=default-dark] /* ページ背景が暗色のテーマ */
html[data-project-theme=default-minimal]
html[data-project-theme=paper-light]
html[data-project-theme=paper-dark]
html[data-project-theme=paper-dark-dark] /* ページ背景が暗色のテーマ */
html[data-project-theme=blue]
html[data-project-theme=purple]
html[data-project-theme=green]
html[data-project-theme=orange]
html[data-project-theme=red]
html[data-project-theme=hacker1]
html[data-project-theme=hacker2]
html[data-project-theme=summer]
html[data-project-theme=spring]
html[data-project-theme=autumn]
html[data-project-theme=tropical]
html[data-project-theme=kyoto]
html[data-project-theme=newyork]
html[data-project-theme=paris]
html[data-project-theme=mred]
html[data-project-theme=lgreen]
Nrem.iconNrem のカスタムテーマhttps://img.icons8.com/ios-glyphs/90/christmas-angel.pngMain page: このサイトのCosenseテーマ#ProjectCSS #UserCSS #dark_themeCSS変数駆動型Cosenseテーマと呼称する新しい着脱管理方式を採用
NremのCosenseテーマの機能と焦点
カスタムテーマの一覧
CSS変数駆動型Cosenseテーマ
Anĝela Osto – --project-theme: "nremiel.osto"
Termika Radiado – --project-theme: "nremiel.radiado-dark"
Alruina Aŭreolo –--project-theme: "nremiel.aureolo"
NremのCosenseテーマ軽量版
NremのCosenseテーマ互換レイヤー
軽量版Alruina Aŭreolo
軽量版Termika Radiado
次のバーの右側をクリックすると「Anĝela Osto」をプレビューします。--project-theme nremiel.osto
次のバーの右側をクリックすると「Alruina Aŭreolo」をプレビューします。--project-theme nremiel.aureolo
次のバーの右側をクリックすると「Termika Radiado」をプレビューします。--project-theme nremiel.radiado-dark
コードブロック カラースキーム
settings/theme/Yaru/Code-block
他の Cosense ユーザーのカスタムテーマの例#ProjectCSS #UserCSS
再利用性のあるテーマ
#dark_theme
material-design – /hata6502/material-design
Scrapbox を Material Design 風にする UserCSS です。
ダークテーマにも対応しています。
/customize/Dark Theme CSS (fare de progfay k.a.)
ThemeはHacker1を使用
customize.dark-theme – Nrem.iconがCSS変数駆動型Cosenseテーマにしてページ単位で切り替えられるようにしたもの。
次のバーの右側をクリックするとをプレビューします。 --project-theme customize.dark-theme
プロジェクト固有の外観としてのテーマ
/pon-no-blog
/work4ai/work4ai ダークモード
/takker/takkerのdark theme CSS
コードブロック カラースキーム
/shokai/Dark Editor CSS
/appbirdNotebook-public/Atomっぽい見た目にしたい-CodeBlock編
/takker/Scrapboxで使うコードブロックの配色を決める
Tips
Stylus 等のブラウザ拡張を介して、別の Cosense.icon Cosense プロジェクトの ProjectCSS や他の人の #UserCSS を自分のブラウザに読み込ませることができる。
これには ProjectCSS のURLを@importするだけでよい。
ただし、悪意のある変更が加えられるリスクを伴う。もっとも、CSSでできることなどたかが知れている。
最も遭遇する可能性が高いのは、@importがリンク切れになること
他にあるとすれば、重要な項目がdisplay: none （非表示）になったり、画面全体を高速で点滅させる（光過敏性てんかん）くらいのものである。
セキュリティリスクはない。
もし不安ならば@importではなくコピーペーストすること。
例
Cosense プロジェクト『Scrapboxであそぼう！』のsettings/style.cssをそのまま反映させる。
code:import-style.css
@import "/api/code/scrasobox/setting/style.css";
Cosense にユーザー製のダークテーマ「/customize/Dark Theme CSS」を適用する。
Stylus のCSSの暗い/明るいモード設­定の値を暗いに設定すると、ブラウザのダークモード時にのみ適用されるようになる。
code:as-dark-theme.css
@import "/api/code/customize/Dark_Theme_CSS/style.css";
ソースコードのカラースキームを Yaru テーマに変更する。
code:exem.css
@import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/style.css";