Change stat color

[kjgoodrick]

📝 Summary

With this PR it possible to manually swap the color of the triangle in the mo.stat UI element. Previously the color was always green for increases and always red for decreases, but sometimes a decrease is "good" and one may want to display a green downwards facing triangle.

🔍 Description of Changes

The stat function now has a color argument that accepts the literals "positive" (green) or "negative" (red) to allow the user to set the color manually. If not specified the color will be as it is now, green for increase and red for decrease.

📋 Checklist

• [X] I have read the contributor guidelines.
• [X] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable). https://discord.com/channels/1059888774789730424/1059891311190229082/1438631478178353232
• [X] I have added tests for the changes made.
• [X] I have run the code and verified that it works as expected.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Nov 18, 2025 1:03am

[Light2Dark]

Thanks! Feel free to disagree, would it be more intuitive if the API is just reverse_color=True or invert_color?

[kjgoodrick]

Thanks for suggesting that, I do think it’s less confusing to use reverse_color. I will update the PR.

[Light2Dark]

@mscolnick, fyi on the API change.

[Light2Dark]

thank you! using var will raise pre-commit issues, we should use let / const instead. this snippet should help clean it up.

  const fillColors = {
    increase: "var(--grass-8)",
    decrease: "var(--red-8)",
  };

  const strokeColors = {
    increase: "var(--grass-9)",
    decrease: "var(--red-9)",
  };

...
             <TriangleIcon
                className="w-4 h-4 mr-1 p-0.5"
                fill={reverseColor ? fillColors.decrease : fillColors.increase}
                stroke={
                  reverseColor ? strokeColors.decrease : strokeColors.increase
                }
              />