TweakFlux

https://github.com/joshcirre/tweakflux
Admin
TweakFlux provides deep theming for Flux UI by overriding Tailwind CSS v4 custom properties to...
Tokens:6,302
Snippets:38
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Global installation and apply theme

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Installs TweakFlux globally with Composer, then applies a theme from any project directory.

```bash
composer global require joshcirre/tweakflux
```

```bash
tweakflux apply bubblegum
```

--------------------------------

### Per-project installation and apply theme

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Installs TweakFlux as a per-project dev dependency, then runs the apply command via the vendor binary.

```bash
composer require joshcirre/tweakflux --dev
```

```bash
./vendor/bin/tweakflux apply bubblegum
```

--------------------------------

### Example theme JSON with font, accent, and radius overrides

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Example theme JSON showing how to override fonts, light accent color, and large radius. Values set to null keep the Flux default.

```json
{
    "fonts": {
        "sans": "Quicksand, sans-serif",
        "urls": ["https://fonts.googleapis.com/css2?family=Quicksand:wght@400..700&display=swap"]
    },
    "light": {
        "accent": "oklch(0.65 0.24 350)"
    },
    "radius": {
        "lg": "1rem"
    }
}
```

--------------------------------

### Bubblegum theme JSON example

Source: https://github.com/joshcirre/tweakflux/blob/main/resources/boost/skills/tweakflux-theme-generator/SKILL.md

Complete Bubblegum theme JSON reference. Set any field to null to keep the Flux default; an empty "semantic": {} means no semantic color overrides. Save to resources/themes/{slug}.json, then run tweakflux apply {slug} to generate CSS.

```json
{
    "name": "Bubblegum",
    "description": "Playful pink accents with warm rose-tinted neutrals and rounded corners",
    "fonts": {
        "sans": "Quicksand, sans-serif",
        "mono": null,
        "serif": null,
        "urls": ["https://fonts.googleapis.com/css2?family=Quicksand:wght@400..700&display=swap"]
    },
    "light": {
        "accent": "oklch(0.65 0.24 350)",
        "accent-content": "oklch(0.65 0.24 350)",
        "accent-foreground": "oklch(0.98 0.01 350)",
        "zinc": {
            "50": "oklch(0.985 0.005 350)",
            "100": "oklch(0.965 0.008 350)",
            "200": "oklch(0.925 0.012 350)",
            "300": "oklch(0.87 0.016 350)",
            "400": "oklch(0.70 0.02 350)",
            "500": "oklch(0.55 0.02 350)",
            "600": "oklch(0.45 0.018 350)",
            "700": "oklch(0.37 0.016 350)",
            "800": "oklch(0.27 0.012 350)",
            "900": "oklch(0.20 0.01 350)",
            "950": "oklch(0.14 0.008 350)"
        },
        "semantic": {}
    },
    "dark": {
        "accent": "oklch(0.80 0.15 80)",
        "accent-content": "oklch(0.80 0.15 80)",
        "accent-foreground": "oklch(0.18 0.02 80)",
        "zinc": {
            "50": "oklch(0.985 0.005 350)",
            "100": "oklch(0.965 0.008 350)",
            "200": "oklch(0.925 0.012 350)",
            "300": "oklch(0.87 0.016 350)",
            "400": "oklch(0.70 0.02 350)",
            "500": "oklch(0.55 0.02 350)",
            "600": "oklch(0.45 0.018 350)",
            "700": "oklch(0.37 0.016 350)",
            "800": "oklch(0.27 0.012 350)",
            "900": "oklch(0.20 0.01 350)",
            "950": "oklch(0.14 0.008 350)"
        },
        "semantic": {}
    },
    "radius": {
        "sm": "0.375rem",
        "md": "0.625rem",
        "lg": "1rem",
        "xl": "1.5rem",
        "2xl": "2rem"
    },
    "shadows": {
        "2xs": "0 1px 1px oklch(0.65 0.15 350 / 0.06)",
        "xs": "0 1px 3px oklch(0.65 0.15 350 / 0.1), 0 1px 2px oklch(0.65 0.15 350 / 0.06)",
        "sm": "0 2px 6px oklch(0.65 0.15 350 / 0.12), 0 1px 3px oklch(0.65 0.15 350 / 0.08)",
        "DEFAULT": "0 4px 10px oklch(0.65 0.15 350 / 0.12), 0 2px 4px oklch(0.65 0.15 350 / 0.08)",
        "md": "0 6px 16px oklch(0.65 0.15 350 / 0.14), 0 2px 6px oklch(0.65 0.15 350 / 0.08)",
        "lg": "0 12px 28px oklch(0.65 0.15 350 / 0.16), 0 4px 10px oklch(0.65 0.15 350 / 0.08)",
        "xl": "0 20px 40px oklch(0.65 0.15 350 / 0.18)",
        "2xl": "0 28px 56px oklch(0.65 0.15 350 / 0.22)"
    },
    "css": null,
    "spacing": null,
    "effects": null
}
```

--------------------------------

### Create a new theme with tweakflux create

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Scaffolds a new theme JSON file at resources/themes/my-theme.json. Set any value to null to keep the Flux default; only override what you need.

```bash
tweakflux create my-theme
```

--------------------------------

### Apply theme with or without effects using --no-effects

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Apply a theme with effects by default, or skip the prompt and disable effects using the --no-effects flag.

```bash
# Apply with effects (default)
tweakflux apply neon

# Apply without effects
tweakflux apply neon --no-effects
```

--------------------------------

### TweakFlux Theme JSON Schema

Source: https://github.com/joshcirre/tweakflux/blob/main/resources/boost/skills/tweakflux-theme-generator/SKILL.md

Complete schema for a TweakFlux theme file saved to resources/themes/{slug}.json. Includes all available fields: name, description, fonts, light/dark palettes with accent and zinc shades, radius, shadows, optional CSS, spacing, and effects.

```json
{
    "name": "Display Name",
    "description": "Short description of the theme",
    "fonts": {
        "sans": "Font Family, sans-serif",
        "mono": "Mono Font, monospace",
        "serif": "Serif Font, serif",
        "urls": [
            "https://fonts.googleapis.com/css2?family=Font+Family:wght@400..700&display=swap"
        ]
    },
    "light": {
        "accent": "oklch(L C H)",
        "accent-content": "oklch(L C H)",
        "accent-foreground": "oklch(L C H)",
        "zinc": {
            "50": "oklch(L C H)",
            "100": "oklch(L C H)",
            "200": "oklch(L C H)",
            "300": "oklch(L C H)",
            "400": "oklch(L C H)",
            "500": "oklch(L C H)",
            "600": "oklch(L C H)",
            "700": "oklch(L C H)",
            "800": "oklch(L C H)",
            "900": "oklch(L C H)",
            "950": "oklch(L C H)"
        },
        "semantic": {}
    },
    "dark": {
        "accent": "oklch(L C H)",
        "accent-content": "oklch(L C H)",
        "accent-foreground": "oklch(L C H)",
        "zinc": {
            "50": "oklch(L C H)",
            "100": "oklch(L C H)",
            "200": "oklch(L C H)",
            "300": "oklch(L C H)",
            "400": "oklch(L C H)",
            "500": "oklch(L C H)",
            "600": "oklch(L C H)",
            "700": "oklch(L C H)",
            "800": "oklch(L C H)",
            "900": "oklch(L C H)",
            "950": "oklch(L C H)"
        },
        "semantic": {}
    },
    "radius": {
        "sm": "0.25rem",
        "md": "0.375rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "2xl": "1rem"
    },
    "shadows": {
        "2xs": "shadow value",
        "xs": "shadow value",
        "sm": "shadow value",
        "DEFAULT": "shadow value",
        "md": "shadow value",
        "lg": "shadow value",
        "xl": "shadow value",
        "2xl": "shadow value"
    },
    "css": "/* Optional structural CSS appended after theme variables */",
    "spacing": null,
    "effects": "/* Optional toggleable effects CSS (glows, animations) — users can disable with --no-effects */"
}
```

--------------------------------

### Theme JSON with effects field for toggleable decorative CSS

Source: https://github.com/joshcirre/tweakflux/blob/main/README.md

Theme JSON showing the effects field for decorative CSS (e.g., hover glow) that users can toggle off, while css holds structural CSS essential to the theme's identity.

```json
{
    "css": null,
    "effects": "/* Glow on button hover */\n[data-flux-button]:hover {\n    box-shadow: 0 0 12px oklch(0.83 0.28 142 / 0.3);\n}"
}
```

--------------------------------

### Raised button CSS with data-flux-group-target

Source: https://github.com/joshcirre/tweakflux/blob/main/resources/boost/skills/tweakflux-theme-generator/SKILL.md

Structural CSS for raised PostHog-style buttons. Targets primary/filled/outline/danger variants via the `data-flux-group-target` attribute (presence, not `="true"`) while excluding ghost/subtle. Always included in the theme's `css` field.

```css
[data-flux-button][data-flux-group-target] {
    border: 1.5px solid var(--posty-border) !important;
    box-shadow: 0 2px 0 0 var(--posty-shelf);
    transform: translateY(-2px);
    top: 2px;
    font-weight: 700;
    position: relative;
}
```

--------------------------------

### Neon glow hover effect with oklch

Source: https://github.com/joshcirre/tweakflux/blob/main/resources/boost/skills/tweakflux-theme-generator/SKILL.md

Toggleable neon glow effect on button hover. Place in the `effects` field (not `css`) because it adds decorative flair that users can disable with `tweakflux apply {theme} --no-effects` or the playground UI toggle.

```css
[data-flux-button][data-flux-group-target] {
    border: 1px solid oklch(0.83 0.28 142 / 0.3) !important;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}
[data-flux-button][data-flux-group-target]:hover {
    border-color: oklch(0.83 0.28 142 / 0.6) !important;
    box-shadow: 0 0 12px oklch(0.83 0.28 142 / 0.3), 0 0 4px oklch(0.83 0.28 142 / 0.2);
}
```
Tokens:
Raw