Themes support

[alexcastano]

Now that we have real components in Dashboard I think we can support themes "easily":

1. We need to remove any CSS related code on our own pages.
2. Everything we use on our pages should be a component.
3. We define a Theme behaviour with all the components we use. It would be a little bit more complex than simple behaviour because it should have support for all the attrs and slots we use, but it will work.
4. We allow a custom theme to be given in the router options. The pages should automatically use the theme components without extra effort. Maybe we can pass the Theme module or we just delegate to the configured theme.

This is the basic idea. What do you think? Am I missing something relevant?

[mcrumm]

On #343 we determined we would accept a PR for dark mode, but I think that's it :)

[alexcastano]

On #343 we determined we would accept a PR for dark mode, but I think that's it :)

Yeah, I see. However, this was before having a real component system. Now it should be easier. 😅

I know José doesn't want to make this project very complex, and I absolutely understand, but I see massive potential if we allow the community more customization with themes and plugins.

Baby steps! It will be an awesome project anyway :)

[josevalim]

I think there are two topics here:

1. Themes - as in customizing the Dashboard look and feel
2. Adding new pages and plugins

My $.02: I don't see the benefit in supporting themes given the complexity they require. Any feature or design modification we do will break themes. So we would either: reach v1.0 and then be unable to improve features, as they would break themes, or release a feature that can break on every new release.

However, I do agree with making it public that we use Bootstrap, allow custom css, and have that as the building block for new pages.

[alexcastano]

I saw several plus points:

1. Extra components in custom themes. However, you can create a Hex package with extra components anytime. So it is pointless.
2. Custom navbar. If a user wants to add a lot of pages—imagine a page per database table—the current navbar won't be very practical. I wanted to give the user the power to create its custom navbar. But I realize we have to give support to the nested menu anyway. Maybe we can support different navbars, so we don't need themes for this.
3. Give the possibility to use a CSS framework different to bootstrap.
4. Customize the look & feel. I imagine using the dashboard to create pages for no technical user. It is nice to give the possibility to use corporate logos and colors. Again, we could opt to give very basic customization support for the logo and colors in the future, only if we really consider it interesting.

As you rightly point out, backward compatibility is a requirement for the project in the long term, and custom themes will break it. I didn't realize. Considering the pros and cons, it is better not to give theme support. We can solve future features with different approaches.

Thank you

[mcrumm]

I created #405 to track the docs changes. I am going to work on docs later this afternoon so if it is still open at that time then I will take it :)

Also I am closing this since we are not planning to step up to themes support. Thank you @alexcastano for all of the thoughtful conversation!

[sksar]

@josevalim
Is it possible to add custom css / html to the whole of a dashboard.

Suppose I want to change only 1 bit of the entire dashboard using custom css, or maybe add a bit of a javascript to do certain things.
So, at the layout level if it was possible to add a bit of a custom html.

There is already the on_mount functions that are available, and a few things such as the :page_title are customisable in that way, however apart from that, I could not really find any other way.

Doing something like this allowed me to change a few things such as the page title that is being used in the layout, but thats about it. I was hoping to maybe add a simple string here that can be possible to have certain custom javascript / css / any kind of html, that renders on the layout.

def on_mount(:default, _params, _session, socket) do
    socket = assign(socket, :page_title, "Custom Page Title Admin")
    {:cont, socket}
end

If this is possible, then I would assume, any kind of customisation would be possible with custom css / js at the layout level.