I could try to update it to v5. If I fail or get stuck, I will ask for help.

That would be super cool! But I think there's major things that we'll have to re-architect to support it. That doesn't mean we can't start now, but I didn't plan on that work before we release v0.1.0.

The biggest change that I'm aware of is how we'll be able to customize the appearance of components with Ant v5. We're doing it with CSS variables now, but I don't believe that's possible with v5 and they have a completely different approach that I didn't look much into since I wasn't personally ready for it.

I'm currently trying to get an overview about the current theming. I'll probably start off with a little sandbox example.

Because I still need to wrap around my head about
style-dictionary and all the surrounding tooling. I hope I can provide further information the next days 🙂

Hopefully I can explain how colors are handled and turned into themes. This should probably be documented!

The generated CSS file with all the variables is variables.css and is created with all the values of the following:

1. We set a bunch of colors in owncast-colors.yaml. These values are not supposed to ever be overwritten. It's the source of truth for our own color palette and is not related to Ant Design.
2. A new set of values are set that point to the Owncast colors above in default-theme.yaml. You can see these colors rendered in Storybook. These values are what we actually use in the UI and encourage people who operate Owncast to overwrite them. This isn't Ant Design specific.
3. For Ant Design we generate another set of colors that point to the variable names in default-theme.yaml with antd-overrides.yaml. This generates CSS variables that Antd uses and points them at our custom theme variable names.

Our colors -> Our theme -> Ant Design components

So as far as I can tell with Ant Design they no longer support using CSS variables to customize with v5, and instead require passing values through a ConfigProvider. https://ant.design/docs/react/customize-theme

Customize Theme - Ant Design

Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.

That was already helpful to me to understand it! I wasn't aware of this 😆

Then we should keep most of the tooling as it is I guess and try to find a way of how to adjust the theme for the ant design components.

Did I get this right?

That sounds right! And we could probably still use our existing CSS variables by passing them to getComputedStyle.

This is the example that's on that Ant page. So if in this example we wanted to use our color called --theme-color-components-primary-button-text as the Ant colorPrimary this might work:

<ConfigProvider
    theme={{
      token: {
        colorPrimary: getComputedStyle(document.documentElement).getPropertyValue('--theme-color-components-primary-button-text')
      },
    }}
  >
    <Button />
  </ConfigProvider>

But maybe not. I'm just guessing that it should :)

We could also generate a json file with style-dictionary that we can pass into that token value and not use CSS variables at all for it but we can worry about the specifics after you get a sandbox running.

Wow! This might work 🤯
style-dictionary is a powerful tool. Haven't heard about yet.

This is our style-dictionary config file. Basically it just says go through all those yaml files and spit out a bunch of CSS files. But you could also say spit out json, or Sketch, or a bunch of other types.

And just for completeness, the way that the user-defined custom values get set from the Owncast admin is in Theme.tsx. It sets a bunch of CSS variables to overwrite all the ones that were previously set by the Owncast values.

Ah cool that's also good to know. I learned so much stuff about theming 🤩

Hey @gabek , if you don't mind, I'd like to take a crack at this task. I'm wondering though, how much would you want to lean into the recommended conventions of Ant Design v5 during this upgrade versus trying to keep what exists while patching in Ant Design v5?

I ask because I would look to remove more custom code, as an example, replace some of the code in Theme.tsx in favor of using nested ConfigProvider. I would plan to keep Style Dictionary, but like you mentioned, opt for generating json instead of less so it can be imported by a ConfigProvider more easily.

I'm totally with you, less custom code is better, but it will probably take more upfront effort. But since there's no rush and no pressure to upgrade, it can take as long as it needs to.

While the theming is the big change, there's probably smaller changes as well that I'm not aware of. So who knows how much stuff needs to get addressed, but if you're up for a challenge, it's all yours :D

Sorry all the links above no longer work, since the webv2 branch is no longer available. But the paths in the project should still be correct.

Thanks for being interested in looking at this. It's been a todo for a long time, but has never been pressing enough to be a priority. But it would be great to be up to date.

It would make sense to figure this out before any of the UI heavy features slated for the future, so we're not building new UI with deprecated components.