UserScript:ColorScheme
UserScriptとUserCSSで配色を変更する
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/palette/p01.svg
下にあるの配色のリストから配色を変更する
ScrapboxのAPIでテーブル記法（csvファイル）を読んでページメニューに表示選択
選択されたデータをもとにCSSを書き換えて、ページの配色を変更、表示
何につかうのか
UserCSSの設定変更のプロトタイプに
複数のScrapboxプロジェクトに独自の配色を割り振って識別する（オススメ）
気分転換に
制限事項（できないこと）
使える色は5色のみ
あえて少なくした
増やすのは簡単（でもその分、メンテナンスが大変になる）
手つかずな所も多い
エフェクトにはほとんど手をつけていない
シンタックスハイライトとか
いわゆるダークモードで使うには注意が必要
エフェクト（暗くするエフェクト）を変更する必要がある
コードブロック記法のシンタックスハイライトの配色の変更が必要
けっこう変更点が多い
労力に見合うだけのリターンがあるとは思えない
カラースキーム
主調色（main-color）
カラースキームの中心となる色。
具体的にはナビゲーションバーなど。
従属色（assort-color）
主調色を補助する役割。
ページ、関連ページリスト、ページリストの地の色。
背景色（base-color）
外の背景の色。
強調色（accent-color）
特に目立たせたい所に使う色。
領域選択とテロメア
文字色（text-color）
文字の色。
table:color-scheme
コメント （主調色） （従属色） （背景色） （強調色） （文字色） メモ欄（無視される）
白 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 ダーク系
table:color-schemexx
コメント （主調色） （従属色） （背景色） （強調色） （文字色） メモ欄（無視される）
デフォルト DarkGray white WhiteSmoke GreenYellow black 灰色系
白系 Silver WhiteSmoke white GreenYellow gray デフォルトよりやや白い
超白系 Gainsboro white white GreenYellow lightgray さらに白い
table:color-schemexx
青系 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 薄い紫
table:color-schemexx
ピンク系 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 緑系
table:color-schemexx
茶系 Firebrick BlanchedAlmond AntiqueWhite GreenYellow black 無印良品みたいになった
←このように 必須項目に 抜けがあると無視される
黒系 Black WhiteSmoke Silver GreenYellow black 黒系
黒系2 WhiteSmoke Silver Black GreenYellow black 黒系
table:color-schemexx
（従属色） （背景色） （強調色） （文字色） ダーク系
dark-1 #555 #333 #444 pink white 灰色系
dark-2 #555 #333 #CCC pink white 灰色系
dark-3 black #333 black pink silver 灰色系
https://idy.herokuapp.com/color/555#.svg
https://idy.herokuapp.com/color/444#.svg
https://idy.herokuapp.com/color/333#.svg
https://idy.herokuapp.com/color/lightpink#.svg
https://idy.herokuapp.com/color/white#.svg
やってみよう
自分のページを変更
1. UserCSSの設定（これ以外の設定は、一時的に外しておくこと）
code:css
@import "/api/code/suto3/UserScript:ColorScheme/style.css";
2. UserScriptの設定（これ以外の設定は、一時的に外しておくこと）
code:js
import '/api/code/suto3/UserScript:ColorScheme/script.js'
3. リロード
UserCSSとUserScriptを読み込んで反映させる
ページメニューに「配色変更」が追加されていれば、とりあえず OK
動作確認
ページメニューに「配色変更」が追加される
配色変更のメニューに上（↑）で設定された配色のリストが表示される
編集権があるならば、配色の追加、削除など、編集してみる
リロードして、編集内容が反映されているか確認
あとは他のUserCSSとUserScriptとのすり合わせを行ってください
UserCSSの解説
CSSカスタムプロパティ（CSS変数）で色を設定している
カスタムプロパティはJavaScript（UserScript）から変更される
変更したい場所をあらかじめCSSに書いておく
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: GreenYellow; /* 強調色 */
--text-color: Black; /* 文字色 */
}
選択範囲のハイライト
→ UserCSS:選択範囲の色の変更 → /scrapboxlab/選択範囲
code:style.css
.selection{
background-color: var(--accent-color, GreenYellow);
}
body要素
→ UserCSS:背景色
code:style.css
body {
background-color: var(--base-color, Red);
}
ページの部分 → Scrapbox:ページ
code: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:ナビゲーションバー
code:style.css
.navbar {
background-color: var(--main-color, Red);
}
Project Title /448/settings
Scrapbox:プロジェクトホーム
code: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）に妥協した。
code: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:テロメア
code: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:ハッシュタグ
code:style.css
atype="hashTag":not(:hover) {
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
background-color: var(--main-color);
color: var(--assort-color);
}
atype="hashTag":hover {
background-color: var(--assort-color);
color: var(--main-color);
border-color: var(--main-color); /* */
}
カーソル → Scrapbox:カーソル
code:style.css
.cursor {
background-color: var(--accent-color);
}
.shared-cursors .cursor {
background-color: var(--accent-color);
}
ステータスバー → Scrapbox:ステータスバー
code:style.css
.status-bar {
background-color: var(--base-color, Red);
}
UserCSS:background-image
UserScriptの解説
やっていること
テーブルでカラースキームを定義しておく
APIを叩いてCSVファイルを読み込む
ページメニューに追加
CSSカスタムプロパティを使って色を変更し、反映させる
Scrapbox:API Scrapbox:テーブル
code:script.js
const url =
'/api/table/'
//+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定
+ 'suto3/' //プロジェクト名
//+ 'customize/' //プロジェクト名
//+ 'UserScript:壁紙' //ページ名
//+ '背景画像を設定するUserScript' //ページ名
//+ 'suto3' //ページ名
+ 'UserScript:ColorScheme' //ページ名
+ '/color-scheme.csv' // テーブル名+ '.csv' （csvファイル名）
JavaScript:Fetch API
code: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:カスタムプロパティ
code: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)
}
ランダム選択用
code: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) => arrMath.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:
datarecord++field = ''
break
case '\n': case '\r\n':
data++record = ''
field = 0
break
default:
datarecordfield = (token.charAt(0) != '"') ? token : token.slice(1, -1).replace(qq, '"')
}
})
//console.log(data00)
return data
}
メイン部
code:script.js
const 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 = ret0
//const name = ret00
//const main = ret01
console.log(main)
//const len = line.split(',').length
const len = ret0.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
UserScript.icon