Implementation:Langgenius Dify Theme Var Define
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Theming, DesignSystem |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Auto-generated mapping of Tailwind CSS color names to CSS custom property references, enabling the Dify design system's theming layer.
Description
web/themes/tailwind-theme-var-define.ts is a code-generated file (marked with "Generate by code. Don't update by hand!!!") that exports a single default object mapping approximately 800 semantic color token names to CSS custom property references. This file serves as the bridge between the Dify design token system and Tailwind CSS.
The mapping object is organized into these major categories:
- Components: Input, button (primary, secondary, tertiary, ghost, destructive, debug, indigo), checkbox, radio, toggle, card, menu item, panel, main navigation (including glass effects), slider, segmented control, option card, tab, badge (status lights, soft colors), chart, actionbar, dropzone, progress (brand, white, gray, warning, error), chat input, avatar, label, premium badge (blue, indigo, grey, orange), progress bar, icon backgrounds, and marketplace header.
- Text: Primary, secondary, tertiary, quaternary, destructive, success, warning, accent, placeholder, disabled, inverted, and logo text.
- Background: Body, default, subtle, neutral, sidenav, soft, gradient fills for chat/debug, gradient masks, overlays, sections, and surface.
- Shadow: 10 levels of shadow tokens (shadow-1 through shadow-10).
- Workflow: Block, canvas, link lines (normal, active, failure, success, error), minimap, display states (success, error, warning, normal, disabled), progress, debug, and test-run tokens.
- Divider: Subtle, regular, deep, burn, intense, solid, and accent dividers.
- State: Base, accent, destructive, success, and warning states with hover/active variants.
- Effects: Highlight, image frame, icon border.
- Utility colors: Full shade scales (50-700) for orange-dark, orange, pink, fuchsia, purple, indigo, blue, blue-light, gray-blue, blue-brand, red, green, warning, yellow, teal, cyan, violet, gray, green-light, rose, and midnight.
- Third-party: LangChain, Langfuse, GitHub, OpenAI, Anthropic, AWS.
- SaaS and branding: Dify-specific brand colors and pricing page tokens.
Each entry follows the pattern 'token-name': 'var(--color-token-name)', allowing Tailwind utility classes to resolve to CSS custom properties that can be swapped at runtime for light/dark theme support.
Usage
This file is consumed by tailwind-common-config.ts where it is spread into the theme.extend.colors object. It should never be edited manually; regenerate it from the design system source when tokens change.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/themes/tailwind-theme-var-define.ts
- Lines: 1-816
Signature
/* Attention: Generate by code. Don't update by hand!!! */
const vars = {
'components-input-bg-normal': 'var(--color-components-input-bg-normal)',
'components-button-primary-bg': 'var(--color-components-button-primary-bg)',
'text-primary': 'var(--color-text-primary)',
'background-body': 'var(--color-background-body)',
'workflow-block-bg': 'var(--color-workflow-block-bg)',
'divider-subtle': 'var(--color-divider-subtle)',
'state-accent-hover': 'var(--color-state-accent-hover)',
// ...approximately 800 entries total
}
export default vars
Import
import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts'
// Used in tailwind-common-config.ts:
colors: {
...tailwindThemeVarDefine,
}
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| N/A | N/A | N/A | This is a static data module with no runtime inputs. It is code-generated from the design system. |
Outputs
| Name | Type | Description |
|---|---|---|
| default export | Record<string, string> | Object mapping ~800 semantic color token names to CSS var() references |
Usage Examples
Using a Theme Token in Tailwind
<!-- After integration with Tailwind config, use tokens as utility classes -->
<div class="bg-background-body text-text-primary border-divider-subtle">
<button class="bg-components-button-primary-bg text-components-button-primary-text">
Click me
</button>
</div>