UserScript:配色変更
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/cube/cube02.svg
カラースキーム
5色配色
1. 主調色（main-color）
カラースキームの中心となる色。
具体的にはナビゲーションバーなど。
2. 従属色（assort-color）
主調色を補助する役割。
ページ、関連ページリスト、ページリストの地の色。
3. 背景色（base-color）
外側の背景の色。
4. 強調色（accent-color）
特に目立たせたい所に使う色。
領域選択とテロメア
5. 文字色（text-color）
文字の色。
カラーキーワードによる表記
table:color-schemex
DarkGray
White
WhiteSmoke
yellow
Black
color-scheme-button.icon←変更ボタン
009AE0
https://idy.herokuapp.com/color/pink#.svg 主調色（main-color）
https://idy.herokuapp.com/color/white#.svg従属色（assort-color）
https://idy.herokuapp.com/color/WhiteSmoke#.svg背景色（base-color）
https://idy.herokuapp.com/color/yellow#.svg強調色（accent-color）
https://idy.herokuapp.com/color/Black#.svg文字色（text-color）
table:color-scheme00
pink
white
whitesmoke
yellow
black
table:color-scheme
white
brown
black
yellow
red
table:color-scheme00
#009AE0
white
whitesmoke
yellow
black
16進数表記
table:color-scheme-01
#444
#888
#EEE
#FFA
#111
table:color-scheme-01b
#888
#666
#111
#FFA
#EEE
16進数表記
table:color-scheme-02
#FFEEE4
#F17F42
#CE6D39
#000000
RGB、RGBA表記
table:color-scheme-03
rgb(90%,90%,90%)
rgb(70%,70%,70%)
rgb(50%,50%,50%)
rgb(70%,70%,10%)
rgb(10%,10%,10%)
HSL、HSLA表記
table:color-scheme-04
hsla(0,100%,90%,0.4)
hsla(36,100%,90%,0.4)
hsla(72,100%,90%,0.4)
hsla(108,100%,90%,0.4)
スタイルシート
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: GreenYellow; /* 強調色 */
--text-color: Black; /* 文字色 */
}
.selection{
background-color: var(--accent-color, GreenYellow);
}
.text {
color: var(--text-color, Black);
}
body {
background-color: var(--base-color, Red);
}
.page {
background-color: var(--assort-color, Red);
}
.navbar {
background-color: var(--main-color, Red);
}
/* プロジェクトホーム */
.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);
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #aaa, #aaa 50%, var(--base-color) 50%, var(--base-color));
}
/* テロメア */
.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); /* 文字色 */
}
/* ハッシュタグ */
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); /* */
}
/* カーソル */
.cursor {
background-color: var(--accent-color);
}
.shared-cursors .cursor {
background-color: var(--accent-color);
}
/* ステータスバー */
.status-bar {
background-color: var(--base-color, Red);
}
スクリプト
code:script.js
const url =
'/api/table/'
//+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定
+ 'suto3/' //プロジェクト名
//+ 'customize/' //プロジェクト名
+ 'UserScript:配色変更' //ページ名
//+ '配色変更UserScript' //ページ名
+ '/color-scheme.csv' // テーブル名+ '.csv' （csvファイル名）
カスタムプロパティを変更する関数 パワーアップ版 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('--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('--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('--page-text-color', textc)
document.documentElement.style.setProperty('--line-title-color', textc)
}
メイン部
code:script.js
scrapbox.PageMenu.addMenu({
title: '配色変更テスト',
//image: 'https://icongr.am/fontawesome/cube.svg',
image: '/api/pages/suto3/UserScript:配色変更/icon',
onClick: () => {
fetch(url)
.then(response => response.text())
.then(text => {
//console.log(text)
const lines = text.split('\n')
if (lines.length != 5) {
//console.log(lines.length)
return null
}
const main = lines0.replace(/^"|"$/g, "")
const assort = lines1.replace(/^"|"$/g, "")
const base = lines2.replace(/^"|"$/g, "")
const accent = lines3.replace(/^"|"$/g, "")
const textc = lines4.replace(/^"|"$/g, "")
console.log(main)
console.log(assort)
console.log(base)
console.log(accent)
console.log(textc)
change_color_ex(main,assort,base,accent,textc)
}).catch(err => {
console.error('fetch failed', err)
})
}
})
UserScript.icon