UserCSS で使える変数
Scrapbox の app.css から、
UserCSS で使える変数を抽出してみた。
スクリプト
js#!/bin/env zx
const style = await fs.readFile('app.css', 'utf-8');
const variables = [...new Set([...style.match(/--[\w\-]+/g)])].sort();
variables.forEach((variable) => console.log(variable));
web browser
jsconst style = await (await fetch("/assets/css/app.css")).text();
const variables = [...new Set([...style.match(/--[\w\-]+/g)])].sort();
alert(variables.join("\n"));
抽出結果
下の方の情報は2021/8/22時点の古いもので現在と異なる箇所があるため2024/5/5時点の抽出結果に更新します
2024-05-05| --2hop-search-bg |
| --body-bg |
| --body-headings-color |
| --button-active-color |
| --button-hover-color |
| --card-active-bg |
| --card-backside |
| --card-bg |
| --card-box-hover-shadow |
| --card-box-shadow |
| --card-box-shadow-color |
| --card-description-code-color |
| --card-description-color |
| --card-description-link-color |
| --card-hover-bg |
| --card-title-bg |
| --card-title-bg-pinned |
| --card-title-color |
| --code-bg |
| --code-color |
| --cursor-color |
| --empty-page-link-color |
| --empty-page-link-hover-color |
| --expandable-menu-bg |
| --line-permalink-color |
| --line-title-color |
| --logo-url |
| --navbar-bg |
| --navbar-border-color |
| --navbar-icon-active-color |
| --navbar-icon-border-color |
| --navbar-icon-color |
| --navbar-icon-hovered-color |
| --navbar-link-color |
| --navbar-title-color |
| --new-button-active-bg |
| --new-button-bg |
| --new-button-horizontal-color |
| --new-button-hover-bg |
| --new-button-vertical-color |
| --page-bg |
| --page-image-loading-border-color |
| --page-link-color |
| --page-link-color-cursor-line |
| --page-link-hover-color |
| --page-text-color |
| --quote-bg-color |
| --relation-label-bg |
| --relation-label-empty-bg |
| --relation-label-empty-text |
| --relation-label-links-bg |
| --relation-label-links-text |
| --relation-label-text |
| --search-form-bg |
| --search-form-icon-color |
| --search-form-icon-focus-color |
| --search-form-text-color |
| --telomere-border |
| --telomere-unread |
| --telomere-updated |
| --tool-badge-bg |
| --tool-bg |
| --tool-color |
| --tool-light-color |
| --tool-text-color |
↓2021/8/22
--body-bg
--body-headings-color
--card-active-bg
--card-backside
--card-bg
--card-box-hover-shadow
--card-box-shadow
--card-box-shadow-color
--card-description-code-color
--card-description-color
--card-description-link-color
--card-hover-bg
--card-title-bg
--card-title-bg-pinned
--card-title-color
--code-bg
--code-color
--cursor-color
--empty-page-link-color
--empty-page-link-hover-color
--line-permalink-color
--line-title-color
--logo-url
--navbar-bg
--navbar-icon-active-color
--navbar-icon-color
--navbar-icon-hovered-color
--navbar-link-color
--new-button-active-bg
--new-button-bg
--new-button-horizontal-color
--new-button-hover-bg
--new-button-vertical-color
--page-bg
--page-link-color
--page-link-color-cursor-line
--page-link-hover-color
--page-text-color
--quote-bg-color
--relation-label-bg
--relation-label-empty-bg
--relation-label-empty-text
--relation-label-links-bg
--relation-label-links-text
--relation-label-text
--search-form-bg
--search-form-icon-color
--search-form-icon-focus-color
--search-form-text-color
--telomere-border
--telomere-unread
--tool-badge-bg
--tool-bg
--tool-color
--tool-light-color
--tool-text-color