MVC Theming Made Easy

Painting your app in compelling colors and decorating its fonts in appealing styles are usually the last steps in development, but they’re the first aspects of your work that users see. Theming is not to be neglected, but often it is hurried through.

That’s why Syncfusion created Theme Studio for ASP.NET MVC—a quick way to create an organized style sheet without writing the definitions yourself.

Building a theme for a web-based app can be an arduous undertaking. Good designers view the front end of their projects with an eye for the overall picture—a view that’s easily lost when attending to individual style definitions in code. Changing the CSS and then moving to the view to see the result of your change is not a fluid design workflow. The ideal option is to look at the controls that comprise your UI and watch them change as your style definitions change.

In Theme Studio, Syncfusion has created a malleable canvas that updates an array of sample controls as you change common style properties. This lets you instantly experiment with foregrounds, backgrounds, and other visuals. Will a given theme work for a tag cloud as well as it does for a calendar? You only know when you see it applied to both.

Syncfusion Theme Studio

Theme Studio is web-based and free—no download required—and the styles are optimized specifically for Syncfusion controls.

The simple interface is composed of three sections: a combo box at the top lets you select the type of control you want to style (grid, schedule, or general UI); the left pane dictates the styles; and the dominate pane contains sample controls displayed in the theme you set.

Three sections of Theme Studio

Use the categorized set of properties on the left to customize the look of the different controls. The skin you create stays in your browser’s session and applies to them all. The theme can also be applied to other controls you might bring into view by changing the combo box selection.

As you can tell, having an automated system create clear CSS while you operate in a WYSIWYG environment saves a lot of time and preserves your fingers’ energy. Should you, however, need a theme faster still, we’ve created a gallery of prescribed themes ready for immediate download. Just click GALLERY to browse. You can even edit and create customized versions of these predefined themes.

GALLERY button

After your theme has been tested and tweaked, it’s ready to for you to download and apply to your app. Theme Studio exports both the CSS file and the images folder to a .zip file delivered right to your desktop.

The theme of an application is important in conveying tone and distinguishing your brand. Don’t let it slide to the wayside due to time constraints. Keep an eye on Theme Studio. It’s now in beta, so as it matures it will add more features and include other Syncfusion controls.

Tres Watkins

Tres Watkins oversees Syncfusion's content development and editorial team to deliver an accessible, uncomplicated reader experience. He has worked in publishing for 15 years, where he honed his craft of communicating essential information to target audiences. He holds a bachelor's degree in communications from Appalachian State University