CSSカスタムプロパティを変更するUserScript
テーブル記法で書かれたCSS カスタムプロパティ（CSS変数）をセットする（変更する）UserScriptです。
テーブルの書式は
table:sample-list
カスタムプロパティ プロパティ値 コメント
1カラム目がCSS カスタムプロパティの名前、2カラム目がCSS カスタムプロパティの値です
3カラム目以降は無視されます
APIからアクセスするので、テーブルを記述するプロジェクトは公開プロジェクトでないといけません。
設定の仕方
テーブル記法でカスタムプロパティを記述します
API の からテーブルのアクセス確認
自分のページのscript.jsに追加
code:sample_script.js
import { loadAndSetCssVariables } from "/api/code/suto3scratchpad/CSSカスタムプロパティを変更するUserScript/script.js";
loadAndSetCssVariables("/api/table/suto3scratchpad/suto3/property-list.csv");
loadAndSetCssVariables()で渡す引数はテーブル記法のURL
UserScript:custom-property
table:list
カスタムプロパティ プロパティ値 コメント
ナビゲーションバー
table:list
--navbar-bg rgba(55, 59, 68, 0.3) 背景色
--navbar-icon-color #ff0 ロゴボタン隣の矢印 --navbar-icon-active-color #338c46 クリックされた時の矢印 --navbar-icon-hovered-color #338c46 カーソルを合わせた矢印 --search-form-bg rgba(255, 255, 255, 0.13) 検索ボックス背景
--search-form-icon-color #fff 検索の虫眼鏡アイコン --search-form-icon-focus-color #4a4a4a 検索入力中の虫眼鏡 table:list
--card-hover-bg rgba(0, 0, 0, 0.1) カーソルを合わせた時
--card-active-bg rgba(229, 229, 229, 0.1) クリックした時
--card-backside #545860 ピン留めの折り目の裏地 --card-description-color #c4c4c4 詳細文字 --card-description-link-color #80c9fe 詳細文字（リンク） --card-description-code-color #ccc 詳細文字（コード） --card-box-shadow-color #000 下部の影の色 --card-box-shadow 0 2px 0 var(--card-box-shadow-color) 下部の影の形
--card-box-hover-shadow 0 2px 0 rgba(0, 0, 0, 0.23) カーソルを合わせた時
--card-title-bg-pinned #2b2e38 上部の色（ピン留め） table:list
--relation-label-bg #2b2e38 関連リンクの背景色 --relation-label-text #dddede 関連リンクの文字色 --relation-label-links-bg #80c9fe Linksの背景色 --relation-label-links-text #202228 Linksの文字色 --relation-label-empty-bg #fb7476 New Linksの背景色 --relation-label-empty-text #fff New Linksの文字色 table:list
--tool-badge-bg #2b2e38 Plan名が書かれているボタン --tool-text-color #dddede プロジェクトタイトル等の文字色 table:list
--new-button-vertical-color #fff 十字の縦線の色 --new-button-horizontal-color #fff 十字の横線の色 --new-button-hover-bg #338c46 マウスホバー時の背景 --new-button-active-bg #346447 クリックした時の背景 table:list
--telomere-updated #55b56a ページを開いた後の更新時 table:list
--page-text-color rgba(255, 255, 255, 0.87) 文字色
--page-link-hover-color #6a9ec6 ホバー時リンク色 --page-link-color-cursor-line #a985e4 リンクにカーソルを置いた時 --empty-page-link-color #fb7476 存在しないページへのリンク色 --empty-page-link-hover-color #b47576 ↑のマウスホバー時 --line-title-color rgba(255, 255, 255, 0.87) ページタイトル色
--line-permalink-color rgba(234, 218, 74, 0.35) 行を選択したときの色
--code-bg rgba(0, 0, 0, 0.18) コードの背景色
--quote-bg-color rgba(0, 0, 0, 0.2) 引用文の背景色
--cursor-color #fff 文字カーソルの色 code:script.js
// script.js
/**
* Fetches a CSV file and sets its contents as CSS variables on the root element.
* Column 1 is used as the variable name (prefixed with --), and Column 2 as the value.
* @param {string} url - The URL of the CSV file to fetch.
*/
export const loadAndSetCssVariables = async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(Network response was not ok: ${response.statusText});
}
const text = await response.text();
const lines = text.split("\n");
// Remove header and process lines
lines.slice(1).forEach(line => {
if (!line.trim()) {
return; // Skip empty lines
}
const columns = line.split(",");
if (columns.length >= 2) {
// Sanitize name for CSS variable format (e.g., remove invalid characters)
let name = --${columns[0].trim().replace(/[^a-zA-Z0-9-]/g, "-")};
// Coalesce 3 or more hyphens at the start into 2
name = name.replace(/^-{3,}/g, "--");
const value = columns1.trim().replace(/\\\/g, ""); // Clean value like url if (name !== "--") {
document.documentElement.style.setProperty(name, value);
console.log(Set CSS variable: ${name} = ${value});
}
}
});
} catch (error) {
console.error("Failed to load or set CSS variables:", error);
// Re-throw the error to allow the caller to handle it if needed
throw error;
}
};