Custom Theme Example

[schaveyt]

The documentation for the Custom Theme, while detailed, I still don't fully grasp it.

1. I am very familiar with using Tailwindcss but I have never created a tailwind plugin
2. I am very familiar with building a c# class library but it is unclear where it must be placed.

Could a example github repo be created in the LumexUI github org to provide such an example?

Ultimately, I want to evaluate creating a Flowbite custom theme

If you cool with it, perhaps you start the repo and I can run with it. It seem like it should be straightforward me to knockout once up an running..

[schaveyt]

@desmondinho ☝️

[schaveyt]

@creanium 👆

[desmondinho]

Hey @schaveyt,

Apologies if I’m a bit slow to catch on. I’d love to help, but I want to make sure I fully understand what you’re struggling with.

Please correct me if I’m wrong:

1. You are having difficulty creating a custom theme as outlined on the Customize Theme page.
2. Specifically, you are unsure where to place the theme file and how to apply it.
3. Additionally, you find it helpful to have an example repository with everything related to theme customization already set up.

Is that so?

[schaveyt]

@desmondinho correct. While the instructions may seem obvious to those who are comfortable with the tribal knowledge of the project, for those first encounter the project specific nuances...it's not quite so clear.

I am happy to contribute proposed documentation update via Pull request...once additional understanding is maintained.

[desmondinho]

Okay, I see.

I’m not entirely sure if we need a separate repository to serve as an example for this purpose. The reason is that theme customization should (and actually does from my POV) remain as straightforward as possible. Perhaps it’s better to focus on improving the documentation to make everything crystal clear.

When it comes to the LumexUI theme and its customization, users can already find complete guidance on the Theme page, which covers all the fundamentals and usage, and on the Customize Theme page, where customization is explained in detail.

Initially, I envisioned users going through all the articles under the Customization category. This way, they’d never encounter obstacles. However, it seems some users might skip certain articles, which could lead to confusion. This is something we should definitely consider addressing.

Would you mind sharing everything that confused you or slowed you down? Additionally, could you confirm whether going through all the articles under the Customization category is insufficient to fully understand the concept?

[hades200082]

tbh I am confused about how to set up a custom theme too. Some explicit questions:

• Where do I put the theme classes/records?
• How do I tell Lumex to use them?
• What if I want more than just light and dark?

[desmondinho]

It’s time to dive into the docs!

I recommend starting here:

v1.1.1

https://lumexui.org/docs/customization/theme

.. or v2.0.0-preview.1

https://dev.lumexui.org/docs/customization/theme

The documentation answers the first two questions.

As for the last one, the answer is simple: you can’t have more—at least for now.

[hades200082]

That makes a lot more sense than the last time I read it you sneaky update-goblin :P

A suggestion: You could adjust the LumexTheme.. instead of having:

public MyTheme()
    {
        DefaultTheme = ThemeType.Light;

        Light = new ThemeConfigLight()
        {
            Layout = new LayoutConfig() { /* ... */ },
            Colors = new ThemeColorsLight() { /* ... */ },
        };

        Dark = new ThemeConfigDark()
        {
            Layout = new LayoutConfig() { /* ... */ },
            Colors = new ThemeColorsDark() { /* ... */ },
        };
    }

It could be something like this instead, with a Dictionary<string, ThemeConfig>:

public MyTheme()
    {
        DefaultTheme = "light";
        Themes.Add("light", new ThemeConfig()
        {
            Layout = new LayoutConfig() { /* ... */ },
            Colors = new ThemeColors() { /* ... */ },
        });
        Themes.Add("dark", new ThemeConfig()
        {
            Layout = new LayoutConfig() { /* ... */ },
            Colors = new ThemeColors() { /* ... */ },
        });
        Themes.Add("contrast", new ThemeConfig()
        {
            Layout = new LayoutConfig() { /* ... */ },
            Colors = new ThemeColors() { /* ... */ },
        });
    }

Then when setting the data-theme attribute you can set it to the name you gave the theme.

[desmondinho]

sneaky update-goblin :P

hahaha, I assure you, it has been there for years!

.. a Dictionary<string, ThemeConfig>

Right. Feels like it's the only way!

[schaveyt]

I guess what I'm looking for is a quicker way to bootstrap myself thereby eliminating any sense of mistranslation or miscomprehension found in documentation. One can start with a properly configured setup as the authors intended. i.e. hence the popularity in starter repo or templates.

As an examples

• See step 8 of this ui library
• Radzen's sample repo

I suppose i can start a public repo and point it as I encounter questions

[desmondinho]

Yes, please go ahead! I already have a task on my list to create the .NET templates for a quicker bootstrap in the future. For now, a simple repository with a properly configured project(s) should be more than enough.

Thank you!

[schaveyt]

@desmondinho I have whipped up a starter repo. I did find a key hiccup on the getting started that blocked me for bit.

You ask folks to add the builder services in the Program.cs as follows:

builder.Services.AddLumexService();

This would not compile for the life of me...and then duh...its missing the s. Thu the --correction is simple:

builder.Services.AddLumexServices();

Starter Repo

Here is the link to the starter repo....literally just the basics to get things going...and to better understand how to make a custom theme or how to even better leverage your components...

https://github.com/[schaveyt/lumexui-starter-wasm](https://github.com/schaveyt/lumexui-starter-wasm)

Screenshot:

Feel free to fork and what not.

[desmondinho]

Great! Thank you so much for your time and effort!

I’ll fork it and extend it to cover all possible hosting models as soon as I can. Unfortunately, I’m currently working hard on the LumexSelect component to ensure the v1.0.0 release by the end of the year. Once that’s done, I’ll definitely revisit this topic.

P.S. From the screenshot, it seems there’s an issue with the LumexUI styles. Most likely, Tailwind isn’t scanning the correct files.

[schaveyt]

No problem. Take your time.