/suto3/UserScript:ColorScheme

generated at 2/17/2025, 1:15:30 PM

UserScript:ColorScheme
UserScriptとUserCSSで配色を変更する


下にあるの配色のリストから配色を変更する
ScrapboxのAPIでテーブル記法（csvファイル）を読んでページメニューに表示選択
選択されたデータをもとにCSSを書き換えて、ページの配色を変更、表示

何につかうのか
UserCSSの設定変更のプロトタイプに
複数のScrapboxプロジェクトに独自の配色を割り振って識別する（オススメ）
気分転換に

制限事項（できないこと）
使える色は5色のみ
あえて少なくした
増やすのは簡単（でもその分、メンテナンスが大変になる）
手つかずな所も多い
エフェクトにはほとんど手をつけていない
シンタックスハイライトとか
いわゆるダークモードで使うには注意が必要
エフェクト（暗くするエフェクト）を変更する必要がある
コードブロック記法のシンタックスハイライトの配色の変更が必要
けっこう変更点が多い
労力に見合うだけのリターンがあるとは思えない

カラースキーム

主調色（main-color）
カラースキームの中心となる色。
具体的にはナビゲーションバーなど。
従属色（assort-color）
主調色を補助する役割。
ページ、関連ページリスト、ページリストの地の色。
背景色（base-color）
外の背景の色。
強調色（accent-color）
特に目立たせたい所に使う色。
領域選択とテロメア
文字色（text-color）
文字の色。

color-schemeコメント（主調色）（従属色）（背景色）（強調色）（文字色）メモ欄（無視される）
白DarkGraywhiteWhiteSmokeGreenYellowblack灰色系
青DeepSkyBluewhiteAzureLightCoralgray青系
紫BlueVioletLavenderAliceBlueorangeblack紫
ピンクpinksnowlightpinkgreenblack薄いピンク系
赤CrimsonSnowLavenderBlushgreenyellowblack赤系
オレンジDarkOrangeLightYellowPeachPuffSkyBlueblackオレンジ系
緑DarkGreenHoneydewLightGreenLightCoralgray緑系
黒BlackWhiteSmokeSilveryellowblack黒系
dark#555#333#444pinkwhite灰色系
dark blue#556#334#445yellowwhiteダークブルー系
dark green#565#343#454pinkwhiteダーク系
dark red#655#433#544limewhiteダーク系

color-schemexxコメント（主調色）（従属色）（背景色）（強調色）（文字色）メモ欄（無視される）
デフォルトDarkGraywhiteWhiteSmokeGreenYellowblack灰色系
白系SilverWhiteSmokewhiteGreenYellowgrayデフォルトよりやや白い
超白系GainsborowhitewhiteGreenYellowlightgrayさらに白い

color-schemexx青系DarkBlueAzureSkyBlueLightCoralblack青系
青系2DeepSkyBluewhiteAzureLightCoralblack青系
水色系AquaLightCyanAzureLightCoralblack水色系
紫系BlueVioletLavenderAliceBlueGreenYellowblack紫
紫系2MediumPurplewhiteGhostWhiteGreenYellowblack薄い紫

color-schemexxピンク系DeepPinkLavenderBlushpinkGreenYellowblackピンク系
ピンク系2PinkwhiteSnowYellowblack薄いピンク系
赤系CrimsonSnowLavenderBlushGreenYellowblack赤系
オレンジ系DarkOrangeLightYellowPeachPuffGreenYellowblackオレンジ系
黄系LemonChiffonwhiteIvoryGreenYellowblack黄系
黄系2YellowIvoryLightYellowLightCyanblack黄系
緑系DarkGreenHoneydewLightGreenLightCoralblack緑系
緑系2LimeGreenwhiteHoneydewLightCoralblack緑系

color-schemexx茶系FirebrickBlanchedAlmondAntiqueWhiteGreenYellowblack無印良品みたいになった
←このように必須項目に抜けがあると無視される
黒系BlackWhiteSmokeSilverGreenYellowblack黒系
黒系2WhiteSmokeSilverBlackGreenYellowblack黒系

color-schemexx（従属色）（背景色）（強調色）（文字色）ダーク系
dark-1#555#333#444pinkwhite灰色系
dark-2#555#333#CCCpinkwhite灰色系
dark-3black#333blackpinksilver灰色系

やってみよう

自分のページを変更
1. UserCSSの設定（これ以外の設定は、一時的に外しておくこと）
css@import "/api/code/suto3/UserScript:ColorScheme/style.css";

2. UserScriptの設定（これ以外の設定は、一時的に外しておくこと）
jsimport '/api/code/suto3/UserScript:ColorScheme/script.js'

3. リロード
UserCSSとUserScriptを読み込んで反映させる
ページメニューに「配色変更」が追加されていれば、とりあえず OK

動作確認
ページメニューに「配色変更」が追加される
配色変更のメニューに上（↑）で設定された配色のリストが表示される
編集権があるならば、配色の追加、削除など、編集してみる
リロードして、編集内容が反映されているか確認
あとは他のUserCSSとUserScriptとのすり合わせを行ってください


UserCSSの解説

CSSカスタムプロパティ（CSS変数）で色を設定している
カスタムプロパティはJavaScript（UserScript）から変更される
変更したい場所をあらかじめCSSに書いておく

style.css:root {
  --main-color: DarkGray;      /* 主調色 */
  --assort-color: White;       /* 従属色 */
  --base-color: WhiteSmoke;    /* 背景色 */
  --accent-color: GreenYellow; /* 強調色 */
  --text-color: Black;         /* 文字色 */
}

選択範囲のハイライト
→ UserCSS:選択範囲の色の変更 →  /scrapboxlab/選択範囲
style.css.selection{
  background-color: var(--accent-color, GreenYellow);
}

body要素
→ UserCSS:背景色
style.cssbody {
  background-color: var(--base-color, Red);
}

ページの部分 → Scrapbox:ページ
style.css
.page:not(:hover) {
  /*background-color: var(--base-color, WhiteSmoke); /* ホバー時に色を変えたい場合 */
  background-color: var(--assort-color, WhiteSmoke); /* 色を変えない場合 */
  /*opacity: 0.8; /* 背景透過の設定（色が変わる） */
}
.page:hover {
  background-color: var(--assort-color, White);
  /*opacity: 1; /* 不透明 */
}

ナビゲーションバー → Scrapbox:ナビゲーションバー
style.css .navbar {
  background-color: var(--main-color, Red);
}

Project Title /448/settings
Scrapbox:プロジェクトホーム
style.css
.quick-launch .project-home>.title {
  color: var(--main-color);
}
 
.page-menu .tool-btn, .related-page-list .tool-btn, .quick-launch .tool-btn {
  color: var(--main-color);
}

PIN /customize/pin折り返し部分の背景色
Scrapbox:ピン止め UserCSS:ピン止め
カードの折り返しの色は、より折り返しに見えるということで、決め打ち（#aaa）に妥協した。
style.css.grid li.page-list-item a .pin {
  /*background: linear-gradient(45deg, var(--main-color), var(--main-color) 50%, var(--base-color) 50%, var(--base-color));*/
  background: linear-gradient(45deg, #aaa, #aaa 50%, var(--base-color) 50%, var(--base-color));
}

テロメア /customize/Dark Theme CSS
Scrapbox:テロメア
style.css/* 新着以外のテロメア */
.line .telomere .telomere-border {
  border-color: var(--main-color); /* これ灰色のとこ */
}
 /* 新着のテロメア */
.line .telomere .telomere-border.unread {
  border-color: var(--accent-color) ; /* これ緑のとこ */
}
/* 日付が表示される部分 */
.line .telomere .telomere-border .description {
  background-color: var(--main-color); /* 背景色 */
  color: var(--assort-color); /* 文字色 */
}

ハッシュタグ　/masui/settings
Scrapbox:ハッシュタグ
style.css a[type="hashTag"]:not(:hover) {   
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--main-color);
  color: var(--assort-color);
}
a[type="hashTag"]:hover {
  background-color: var(--assort-color);
  color: var(--main-color);
  border-color: var(--main-color); /* */
}

カーソル → Scrapbox:カーソル
style.css.cursor {
  background-color: var(--accent-color);
}
.shared-cursors .cursor {
  background-color: var(--accent-color);
}

ステータスバー → Scrapbox:ステータスバー
style.css.status-bar {
  background-color: var(--base-color, Red);
}

UserCSS:background-image

UserScriptの解説

やっていること
テーブルでカラースキームを定義しておく
APIを叩いてCSVファイルを読み込む
ページメニューに追加
CSSカスタムプロパティを使って色を変更し、反映させる

Scrapbox:API Scrapbox:テーブル
script.jsconst url =
  '/api/table/' 
//+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定
+ 'suto3/'         //プロジェクト名
//+ 'customize/' //プロジェクト名
//+ 'UserScript:壁紙' //ページ名
//+ '背景画像を設定するUserScript' //ページ名
//+ 'suto3' //ページ名
+ 'UserScript:ColorScheme' //ページ名
+ '/color-scheme.csv'  // テーブル名+ '.csv' （csvファイル名）

JavaScript:Fetch API
script.js  const lists = new Promise((resolve, reject) => {
  fetch(url)
  .then(response => response.text())
  .then(text =>
    text.split('\n').slice(1)
    .map(line => line.replace(/^,/,""))
    .join('\n') )
  .then(resolve)
  .catch(reject)
})

カスタムプロパティを変更する関数 CSS3:カスタムプロパティ
script.js   const change_color_ex = (main,assort,base,accent,textc) => {
  document.documentElement.style.setProperty('--main-color', main)
  document.documentElement.style.setProperty('--assort-color', assort)
  document.documentElement.style.setProperty('--base-color', base)
  document.documentElement.style.setProperty('--accent-color', accent)

  document.documentElement.style.setProperty('--text-color', textc)
     
  // すでにあるカスタムプロパティを変更してみたらいい感じになった
  document.documentElement.style.setProperty('--body-bg', base)
  document.documentElement.style.setProperty('--new-button-bg', base)
  
  document.documentElement.style.setProperty('--card-bg', assort)
  document.documentElement.style.setProperty('--navbar-link-color', assort)
  document.documentElement.style.setProperty('--new-button-bg', assort)
  document.documentElement.style.setProperty('--relation-label-bg', assort)
  //document.documentElement.style.setProperty('--relation-label-empty-bg', assort)
  //document.documentElement.style.setProperty('--relation-label-links-bg', assort)
  document.documentElement.style.setProperty('--page-bg', assort)
  
  document.documentElement.style.setProperty('--new-button-active-bg', accent)
  document.documentElement.style.setProperty('--cursor-color', accent)
     
  document.documentElement.style.setProperty('--body-headings-color', main)
  document.documentElement.style.setProperty('--navbar-bg', main)
  document.documentElement.style.setProperty('--card-title-bg', main)
  document.documentElement.style.setProperty('--new-button-horizontal-color', main)
  document.documentElement.style.setProperty('--new-button-vertical-color', main)
  document.documentElement.style.setProperty('--card-title-bg-pinned', main)
  
  document.documentElement.style.setProperty('--page-text-color', textc)
  document.documentElement.style.setProperty('--line-title-color', textc)
  document.documentElement.style.setProperty('--card-title-color', textc)
  document.documentElement.style.setProperty('--relation-label-text', textc)
  document.documentElement.style.setProperty('--tool-text-color', textc)
}
ランダム選択用
script.js     const change_color_line = (line) => {
  const [name, main, assort, base, accent,m] = line.split(',')
  change_color_ex(main,assort,base,accent)
} 
const choice = (arr) => arr[Math.floor(Math.random()*arr.length)]

/*function parseCSV(text, delim) {*/
const parseCSV = (text, delim) => {
  if (!delim) delim = ','
  var tokenizer = new RegExp(delim + '|\r?\n|[^' + delim + '"\r\n][^' + delim + '\r\n]*|"(?:[^"]|"")*"', 'g')
  var record = 0
  var field = 0
  var data = [['']]
  var qq = /""/g
  text.replace(/\r?\n$/, '').replace(tokenizer, function(token) {
    switch (token) {
    case delim: 
      data[record][++field] = ''
      break
    case '\n': case '\r\n':
      data[++record] = ['']
      field = 0
      break
    default:
      data[record][field] = (token.charAt(0) != '"') ? token : token.slice(1, -1).replace(qq, '"')
    }
  })
　//console.log(data[0][0])
  return data
}

メイン部
script.jsconst menu_title='配色変更'
scrapbox.PageMenu.addMenu({
  title: menu_title,
  image: '/api/pages/suto3/UserScript:ColorScheme/icon',
  onClick: async () => {
    scrapbox.PageMenu(menu_title).addItem({ title: 'Now loading...', onClick: () => null })
    await lists.then((text) => {
      scrapbox.PageMenu(menu_title).removeAllItems()
       
      const lines = text.split("\n")
      .map( line => {
        //const [name, main,assort,base,accent ,m] = line.split(/"(?:[^"]|"")*"|,/g)
        //const [name, main,assort,base,accent ,m] = line.split(/,|\r?\n|[^,"\r\n]+|"(?:[^"]|"")*"/g)
        //const [name, main,assort,base,accent ,m] = line.split(/,/)
        //const [name, main,assort,base,accent ,m] = line.split(',')
        var ret =　parseCSV(line, ',')
        const [name, main, assort, base, accent, textc, m] = ret[0]
        //const name = ret[0][0]
        //const main = ret[0][1]
        console.log(main)
        //const len = line.split(',').length
        const len = ret[0].length
        if ((len < 6)||(len > 7)) {
          console.log(len)
          return null
        }
        // うーん
        if(!name || !main || !assort || !base || !accent || !textc) {
          //console.log(line)
          return null
        }
        scrapbox.PageMenu(menu_title).addItem({
          title: name,
          onClick: () => {change_color_ex(main,assort,base,accent,textc)}
        })
        return line
      })
      .filter(line => line)
      //console.log(lines)
      scrapbox.PageMenu(menu_title).addItem({
        title: 'ランダム',
        onClick: () => {change_color_line(choice(lines))}
      })
    })
  }
})

5色配色
CSS3:カスタムプロパティ
UserScript:background-color
UserScript:page-color

コメント	（主調色）	（従属色）	（背景色）	（強調色）	（文字色）	メモ欄（無視される）
白	DarkGray	white	WhiteSmoke	GreenYellow	black	灰色系
青	DeepSkyBlue	white	Azure	LightCoral	gray	青系
紫	BlueViolet	Lavender	AliceBlue	orange	black	紫
ピンク	pink	snow	lightpink	green	black	薄いピンク系
赤	Crimson	Snow	LavenderBlush	greenyellow	black	赤系
オレンジ	DarkOrange	LightYellow	PeachPuff	SkyBlue	black	オレンジ系
緑	DarkGreen	Honeydew	LightGreen	LightCoral	gray	緑系
黒	Black	WhiteSmoke	Silver	yellow	black	黒系
dark	#555	#333	#444	pink	white	灰色系
dark blue	#556	#334	#445	yellow	white	ダークブルー系
dark green	#565	#343	#454	pink	white	ダーク系
dark red	#655	#433	#544	lime	white	ダーク系

青系	DarkBlue	Azure	SkyBlue	LightCoral	black	青系
青系2	DeepSkyBlue	white	Azure	LightCoral	black	青系
水色系	Aqua	LightCyan	Azure	LightCoral	black	水色系
紫系	BlueViolet	Lavender	AliceBlue	GreenYellow	black	紫
紫系2	MediumPurple	white	GhostWhite	GreenYellow	black	薄い紫

ピンク系	DeepPink	LavenderBlush	pink	GreenYellow	black	ピンク系
ピンク系2	Pink	white	Snow	Yellow	black	薄いピンク系
赤系	Crimson	Snow	LavenderBlush	GreenYellow	black	赤系
オレンジ系	DarkOrange	LightYellow	PeachPuff	GreenYellow	black	オレンジ系
黄系	LemonChiffon	white	Ivory	GreenYellow	black	黄系
黄系2	Yellow	Ivory	LightYellow	LightCyan	black	黄系
緑系	DarkGreen	Honeydew	LightGreen	LightCoral	black	緑系
緑系2	LimeGreen	white	Honeydew	LightCoral	black	緑系

茶系	Firebrick	BlanchedAlmond	AntiqueWhite	GreenYellow	black	無印良品みたいになった
			←このように	必須項目に		抜けがあると無視される
黒系	Black	WhiteSmoke	Silver	GreenYellow	black	黒系
黒系2	WhiteSmoke	Silver	Black	GreenYellow	black	黒系