{"record":{"id":"6c320a6cb4ae534d","repo":"reflex-dev/reflex","slug":"cannot-serialize-color-that-contains-non-literal-v","errorCode":null,"errorMessage":"Cannot serialize color that contains non-literal vars.","messagePattern":"Cannot serialize color that contains non-literal vars\\.","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/reflex-base/src/reflex_base/vars/color.py","lineNumber":158,"sourceCode":"            self._var_data,\n        )\n\n    def json(self) -> str:\n        \"\"\"Get the JSON representation of the var.\n\n        Returns:\n            The JSON representation of the var.\n\n        Raises:\n            TypeError: If the color is not a valid color.\n        \"\"\"\n        color, alpha, shade = map(\n            get_python_literal,\n            (self._var_value.color, self._var_value.alpha, self._var_value.shade),\n        )\n        if color is None or alpha is None or shade is None:\n            msg = \"Cannot serialize color that contains non-literal vars.\"\n            raise TypeError(msg)\n        if (\n            not isinstance(color, str)\n            or not isinstance(alpha, bool)\n            or not isinstance(shade, int)\n        ):\n            msg = \"Color is not a valid color.\"\n            raise TypeError(msg)\n        return f\"var(--{color}-{'a' if alpha else ''}{shade})\"\n","sourceCodeStart":140,"sourceCodeEnd":167,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/packages/reflex-base/src/reflex_base/vars/color.py#L140-L167","documentation":"Color.json() must emit a CSS custom property, which requires color/alpha/shade to be literal values. If any of them is a Var (non-literal), serialization is impossible and TypeError is raised.","triggerScenarios":"Building a color from Var-driven components, e.g. rx.color(f\"{my_var}\", shade=n) where the color name or shade resolves to a Var, then rendering/serializing it.","commonSituations":"Dynamically picking a color from state and passing it where a serializable literal color is required (e.g. theme serialization).","solutions":["Resolve the Var to a literal before constructing the color (compute the chosen color in state and use a static lookup)","Use rx.color with literal strings/integers only","If the value varies per render, keep it as a Var expression rather than calling .json()"],"exampleFix":"# before\ncolor = rx.color(State.color_name, shade=5)  # State.color_name is a Var\n# after\ncolor = rx.color(\"grass\", shade=5)  # literal; pick dynamically in state instead","handlingStrategy":"type-guard","validationCode":"from reflex.vars.base import get_python_literal\nparts = [get_python_literal(p) for p in (color._var_value.color, color._var_value.alpha, color._var_value.shade)]\nassert all(p is not None for p in parts), 'color contains non-literal vars'","typeGuard":"def is_literal_color(color) -> bool:\n    from reflex.vars.base import get_python_literal\n    v = color._var_value\n    return all(get_python_literal(p) is not None for p in (v.color, v.alpha, v.shade))","tryCatchPattern":null,"preventionTips":["Only pass literal strings/ints to rx.color","Resolve state-driven choices into literals inside state before building colors"],"tags":["reflex","color","serialization","literal"],"backgroundTag":"non-literal-serialization-failure","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}