Color Picker with saved themes

Open theme-color-picker in Script Kit

// Name: Theme Maker
// Description: Test Themes

import "@johnlindquist/kit"


const themePath = kenvPath('theme.json');

if (!(await isFile(themePath))) {
    let defaultTheme = `{
        "foreground": "#ffffff",
        "accent": "#fbbf24",
        "ui": "#343434",
        "background": "#000000",
        "opacity": "0.85"
    }`.trim()

    await writeFile(themePath, defaultTheme)
}

const theme = await readJson(themePath)

const { foreground, accent, ui, background, opacity } = theme

const list = ["foreground", "accent", "ui", "background"]
const valueList = [foreground, accent, ui, background, opacity]


const arrayList = list.map((value, index) => {
    return { type: "color", label: value, value: valueList[index] }
})

arrayList.push({ type: "range", label: "Opacity", value: opacity })

await fields({
    onChange: (input, { value }) => {
        const [foreground, accent, ui, background, opacity] = value
        theme.foreground = foreground
        theme.accent = accent
        theme.ui = ui
        theme.background = background
        theme.opacity = opacity

        setTheme(theme);
        writeJson(themePath, theme)
    },
    fields: arrayList,
})

let result = await div(md(`# Success!`))