UserScript:background-color

CSSで背景色を変更するだけのシンプルなユーティリティ。

code:script.js

scrapbox.PageMenu.addItem({

title: 'background-color',

onClick: (e) => {

let style = document.getElementById('__col__')

if (style)

{

//console.log(style)

style.remove()

e.currentTarget.innerText = 'background-color'

return

}

const bgcolor = prompt("背景色")

if (bgcolor === undefined || bgcolor === null) {

e.currentTarget.innerText = 'background-color'

return

} else {

e.currentTarget.innerText = '✅background-color'

}

//console.log(bgcolor)

const css =

'body {'

+ ' background-color: ' + bgcolor +';'

+ '}'

//console.log(css)

style = document.createElement('style')

style.setAttribute('id', '__col__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

})

code:script.js

scrapbox.PageMenu.addItem({

title: '色変更テスト',

onClick: () => {

//const color='MistyRose'

const color = prompt("変更したい色を入力してください")

if (color === undefined || color === null) {

return

}

//const styles = getComputedStyle(document.documentElement)

//const styles = getComputedStyle(document.body);

//console.log(styles)

//const htmlStyle = document.documentElement.computedStyleMap();

// スタイルのうちカスタムプロパティのみ表示

// if (/^--/.test(propertyName)) {

// // valueはCSSStyleValueとして得られるので文字列に変換

// console.log(propertyName, value.toString());

// }

//}

// カスタムプロパティの値を取得

//const v = String(style.getPropertyValue('background-color')).trim()

//console.log(v)

// カスタムプロパティの値を取得（できた）

//const value = String(styles.getPropertyValue('--bg')).trim()

//var value = styles.getPropertyValue('--back-color')

//console.log(value)

// カスタムプロパティの値をセット（できる）

//document.documentElement.style.setProperty('--back-color', color)

document.documentElement.style.setProperty('--page-color', color)

}

})

code:style.css

:root {

--dummy: White;

--back-color: WhiteSmoke;

/*--page-color: White;*/

--page-color: MistyRose;

}

body {

/* 背景色 */

background-color: var(--back-color);

}

.page {

/* ページ色 */

background-color: var(--page-color);

}

.grid li.page-list-item a .header{

background-color: var(--page-color);

}

.grid li.two-two.page-list-item a .title {

background-color: var(--page-color);

}

.grid li.page-list-item a .content{

background-color: var(--page-color);

}

UserScript.icon