Default Theme

[sbwalker]

@hishamco noted in another issue that Oqtane currently has 2 themes that are included as part of the framework. For the 1.0 release we should only include 1 default theme and make the other theme its own standalone project on Github ( and installable via Nuget ). The question is which of the 2 themes should be the default?

Currently the default theme is based on the default Blazor template. Its appearance is immediately recognizable by anyone who has done any development or reading about Blazor. It needs some improvements to make it mobile friendly - which is currently underway. But when some people first see this theme it is not immediately obvious to them that Oqtane offers any improvements over the basic Blazor template.

The "Oqtane" theme is based on Bootswatch Cyborg ( a Bootstrap 4 compliant CSS implementation ). It is very different from the Blazor theme and the color/styling is reminiscent of many modern mobile apps.

I am looking for recommendations on which theme should be the default for Oqtane.

[hishamco]

I vote for the second one, but it would be nice if we support light and dark theme

[mikecasas]

I like the second one. Make it look like the IBuySpy Portal!

[PavelVsl]

Both are useful, I like 1, but I suggest some rebranding (minimally another color scheme to distinguish from standard blazor)

[W6HBR]

New here... Just started testing Oqtane and the first change I made was to switch to the Oqtane theme using multipane. My vote goes for #2.

[david-poindexter]

If we have to use 1 or 2, I’d pick 2, but I would personally love to design/develop a new one.
😁👍🏼

Let me know if there is interest and I’ll try to crank one out.

[mitchelsellers]

Between those two, I would say #2 for sure. But honestly I'd want a variation of that one without the dark background. Just my $0.02

[hishamco]

I'd want a variation of that one without the dark background

That's what I suggested earlier ;)

[sbwalker]

I know that I asked people to express their preferences between the 2 default themes, but I was actually hoping for more than just a "I like the Blazor theme" or "I like the Oqtane theme". I was hoping to get some real feedback on why people have these preferences. Its impossible to weigh the pros / cons if this is just a popularity contest.

And it might help if I provided a bit more context as well. The default theme which is bundled with Oqtane is intended to be primarily used by developers who are building web applications on their local machines. I would not expect that the default theme would be used as the basis for a production web application or website - if a developer wants to make their solution available in a production environment I would expect that they would use a custom theme.

The default theme should use all of the standard theme components. This is important because the standard theme components contain the default set of CSS classes which can be overwritten to customize the behavior of a theme. And although it is also possible to build your own theme components from scratch if you do not like the default ones, this task is beyond the skillset of most web designers. So in order to cater to the web design community we need a robust set of default CSS styles.

[W6HBR]

I chose the Oqtane theme because it included a multipane layout and worked as the basis for me to start modifying it for the type of layout I wanted. I added several other panes to that layout so I could do several multi-column sections. I found this theme sufficient as a starting point to do my own customizations. I've not dug into modifying the CSS yet, but that will be next.

What might help more people is having a quick "how-to" on modifying the basic themes. Include some detail about what the framework base files do and what specific theme files do and include some basic examples of how to change the layout, background color, font color, etc. I think the base themes with a little direction would get people going on their own more than trying to provide a generic theme to meet the varied needs.

[mikecasas]

If the purpose of the default theme is for developers, then no doubt make the theme the default Blazor template. You get instant brand recognition for Blazor, as most developers looking into Blazor will quickly recognize the theme.

But we better make it easy to switch themes (and have nice themes to switch to), since the first thing a developer will do after install is switch to a better theme. That's why my choice was for the second theme. It gets all of us closer to a production ready site. I know as soon as I say that, then a debate emerges as to what a production site looks like, but anyone can view the dozens of bootstrap template sites and get an idea of what people are creating and purchasing.

I know that coming from the framework side you want to remain neutral on certain aspects - give people a standard set of logic and tools and let them enhance it from there. You don't want to be all things to all people. But one competitive advantage of Oqtane may be a great looking default theme.

[sbwalker]

I mentioned this is my initial post in this thread above, but I should probably elaborate a bit more. The Oqtane Theme uses Bootswatch Cyborg - an open source Bootstrap 4 theme. You can see here https://bootswatch.com/ that there are 21 other themes to choose from. To create an Oqtane theme based on these themes simply create a copy of the current Oqtane theme and replace the Cyborg styles in theme.css with the styles from the other Bootswatch theme ( making sure to retain the custom Oqtane styles at the bottom of the theme.css file ). In fact what I believe we should do is create external theme projects for each Bootswatch theme and upload them to Nuget.org so people have the ability to download and install them instantly ( ie. Oqtane Cyborg, Oqtane Darkly, etc... ). But before we do this, the current Oqtane Cyborg theme needs to be made mobile friendly and enhanced to look a bit more polished ( leveraging only the default Bootstrap styles ) - as this theme will be the base template for the other themes.

[PavelVsl]

Or what about to load all bootswatch stylesheets to one theme and allow to change stylesheet by user or admin selection? It should be simple. Not necessary to maintain zilion nuggets. I have working sample. Only question is where to store name of current bootswatch. Partially done in #418

And next ideas ... for V.next include in default theme also layout with sidebar. menu by page level - horizontal for first level and vertical in sidebar for next levels on selected first level page.

[PavelVsl]

[PavelVsl]

[hishamco]

@chlupac thanks for your work but I think we need to hold while the major release are very close, please refer to my comment here

[PavelVsl]

@hishamco take it as POC, it's 7 lines of C# code and some download-copy-paste. I think than something like this should be included in V1, if we decided theme based on Bootswatch.

[hishamco]

IMHO supporting themes is the important thing, but adding Bootswatch or XYZ is something not essential to ship in core, but let us wait for @sbwalker comment

[PavelVsl]

@hishamco I listen to your complains, you are right. It's not necessary to put in Bootswatch distribution, when we have CDN. Simplified 7-liner version in #419.
@sbwalker I only simplify your idea about Boootswatch theme set and put it alive. For production we have to store somewhere full list of theme links including integrity keys:

<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-qdQEsAI45WFCO5QwXBelBe1rR9Nwiss4rGEqiszC+9olH1ScrLrMQr1KmDR964uZ" crossorigin="anonymous">

[mikecasas]

I like the way @chlupac has setup the css linkage. So easy and intuitive. Great job!

[uzabumuhire]

I vote for 2 because of the following reasons:

• the default Blazor theme is not developer friendly back office
• Octane is not Blazor and it should have its own identity or look and feel

Even though, I prefer the Bootswatch option for time constraint to release V1, I really think, for V.Next, we should develop from scratch a custom developer friendly back office for Octane by using Bootstrap/Blazor or using an existing Blazor/Bootstrap UX framework like BlazorStrap or BlazorStyled

[sbwalker]

@chlupac thank you for demonstrating how easy it is to adapt the Oqtane theme to utilize other Bootswatch themes. One of the goals of Oqtane is to make it super simple to create custom themes. I would like to hear some more opinions about the default theme to include in 1.0.

[sbwalker]

@uzabumuhire the philosophy ( https://www.oqtane.org/Resources/Blog/PostId/538/oqtane-philosophy ) is to avoid third party dependencies as much as possible in the core framework. Taking a dependency on Bootstrap is acceptable because it is so mature and widely used already but we will not take a dependency on other UX projects.

[sbwalker]

@chlupac the latest PR includes an enhancement to the JS Interop so that you can specify the integroty and crossorigin. Use the JSInterop API class rather than the IncludeCSS convenience method.

   public Task IncludeLink(string id, string rel, string url, string type, string integrity, string crossorigin)

[sbwalker]

There are a number of comments in this thread about developing a new theme from scratch. Just to provide some context... DNN went through this exact scenario at least 3-4 times over the years. Each time, a bunch of potential options would be created but because each person has very different preferences and perspectives ( ie. beauty is in the eye of the beholder ) it was impossible to get people to agree on a clear winner. The process would take months and at the end a decision would have to be made... but at least 50% of the people would be unhappy with the decision. After going through this a number of times I have concluded that is impossible to create a default theme that everyone likes. Its more important to have an extensible system which allows people to create their own custom themes. And its also important to have a number of external themes available which are easy to find and install.

[PavelVsl]

ideal default theme should be

• simple with clean design
• easily extensible and modifiable
• presents almost all possible features of framework
• eye catching
• distinctive from competitors
• presentation of brand
• solid base for creating custom solutions
• mobile friendly
• responsive

[thabaum]

I like the idea of Blazor and Oqtane being so "developer friendly" you can whoop out ideas rather quickly. I think Oqtane could have it's own theme however I believe the original blazor theme and bootswatch themes with a UI you can swap through them would be elite. This would also give examples to ways to you can grow out Oqtane functionality.

Personally I think the user themselves should be able to select from themes, or at least a dark or light versions.

I think something for selecting theme styles like https://bootstrapdemo.blazorise.com/ is pretty cool as well how you can select the theme color. I think theme options could be added for the users to be able to select from options in settings if enabled to do so on a site would be cool feature down the road.

Also a theme creator that helps you style at least the colors of themes would be slick. So you create a template an just feed it all colors from the framework, all modules and sites can use these common colors to help keep them site friendly for even faster deployments. If there was some sort of control and developers would follow it, it would save a lot of chaos in my opinion as developers could just use simple classes to style modules they know will fit the site theme styles. I can't stand having to change colors of every module for every site when it feels like it should be all in one places for 99% of everything used on sites.

The logo really says it all for Oqtane, the theme does not matter as much. A cool welcome to Oqtane theme to show off how nice a site you can actually make would be a plus. The basic site is rather boring, but works. Having options to switch around between a few templates is cool enough as it looks like we have a few ideas here to work with. And if David or anyone else can whoop up an idea real quick why not take a look at that as well. I think a repository on Github of Oqtane themes needs created.. if anyone can start cranking some out that would be awesome for everyone!

Maybe have a 1 week contest and call it "The Need For Themes" similar to the Need for Speed racing game have a community vote everyone gets to have a little fun, and add the best of the best created to add a variety of themes on the showroom floor to help display the power of Oqtane. May the best theme win :)

I like the idea of using packages to git themes, it would be slick to have a way Oqtane can search and display packages with certain keyword tags that are available with somethinng like "Oqtane Theme" down the road possibly?

If this feature was available now we could test it with the contest?!

[thabaum]

ideal default theme should be

* simple with clean design

* easily extensible and modifiable

* presents  almost all  possible features of framework

* eye catching

* distinctive from competitors

* presentation of brand

* solid base for creating custom solutions

@chlupac Add this to the list :)

It needs some improvements to make it mobile friendly - which is currently underway.

[thabaum]

For the "Eye Catching" part I suggest something similar to the Oqtane website but unique picture, a button that says read more that maybe goes to the next "section" of the page that has all the stuff instead of having to scroll you can hit that to "boost" you downward on the page to the information presented. I would be interested in seeing what @david-poindexter can do here if he may know what I am talking about. It can be a spin off the Cyborg theme with some love added to it as well for @mitchelsellers to like it... This would keep it fairly simple and use some effects to bring in the content.

[kurtwilbies]

Why bootstrap and why bootswatch/bootshit? Use a material design theme. Thats the future.

[sbwalker]

After weighing the pros and cons I am going to switch the default theme to the Oqtane theme for the 1.0 release. It showcases more of the capabilities and can be easily modified by updating a single stylesheet reference to another Bootswatch theme. Plus it is now mobile friendly so it shows well in desktop and mobile scenarios.

[kurtwilbies]

@sbwalker If the community agrees I can develop a theme based on material design (MUI).

[sbwalker]

The Bootstrap ecosystem is massive and very mature and is also the dominant framework in enterprise software environments. These are the reasons why it was chosen as the underlying UX framework for Oqtane and there is no plan to transition to a different framework in the near future. I respect your opinion and will not try to convince you that Bootstrap is better than Material Design or vice versa. You can certainly create a theme based on Material Design however the entire administrative user experience is based on Bootstrap so you will still need to include a reference to Bootstrap.

[kurtwilbies]

@sbwalker I am indeed biased. And bootstrap is fine.

[uzabumuhire]

Yeah let’s keep the Oqtane default Bootstrap theme, if user wants another theme they can create a custom.

[thabaum]

I like where we have been heading using bootstrap which I feel is currently industry standard... however it would be cool to see some themes pop up on GitHub in other repos to be shared and collaborated on for different use cases.

I will help tweak in the Cyborg theme or whatever themes get used in the framework. If I ever add any others from repos I will help on those as well if I feel I have something to offer. Time to get some themes and mods flowing for Oqtane!

[thabaum]

I also plan to help out the Bootstrap project as I see a few things that could be tweaked there as well. I think the projects connected to the framework that are open source should also be mentioned as projects to help support to help further Oqtane. Currently Oqtane uses Blazor and Bootstrap for UX these projects should also be supported by our community.

[sbwalker]

Closing, as we moved ahead with the Oqtane theme as the default and also included the Blazor theme