Wisej’s Writable Themes
Customize the look and feel of your Wisej application
  1. Home
  2. Developer Blog
  3. Wisej Writable Themes

Customize the look and feel of your application with Wisej’s Writable Themes

Writeable Themes is one of the Wisej features introduced in version 2.1. This new feature allows you to apply different colors, fonts, and other styles for each user of your application. When you need to create different color schemes for your application, you no longer need to maintain multiple Wisej themes. At runtime, you can create a new theme based on the main theme and change its properties based on user preferences.

Saving user preferences can be done on different levels:

  • If your application uses some accounts for the users (username/password), then you can store the custom theme preferences for each user, in your application database. With this option, user preferences can be applied across all browser. Custom preferences will be applied after the user is logged in.
  • User preferences can be stored on client side (e.g. using cookies). In this case the preferences are stored separately for each browser.

In the following sample, different control types were added to a form.

A color scheme selector (ThemePopup.cs) was implemented based on a Wisej.Web.UserPopup. A Wisej.Web.UserPopup is a UserControl that can be attached to a control and shown as a popup window (that's another cool feature of Wisej).

To open the ThemePopup, a new ComponetTool was added to the form header (learn more about the ComponentTool in Jens' article here).

When a color scheme is selected by the user, the predefined colors are applied to a new theme created for the user at runtime.

public static void UpdateThemeColors(ColorScheme colorScheme)
{
 var customTheme = new ClientTheme("CustomTheme", Application.Theme);
customTheme.Colors.activeBorder = colorScheme.activeBorder;
customTheme.Colors.activeCaption = colorScheme.activeCaption;
customTheme.Colors.activeCaptionText = colorScheme.activeCaptionText;
customTheme.Colors.buttonFace = colorScheme.buttonFace;
customTheme.Colors.buttonHighlight = colorScheme.buttonHighlight;
customTheme.Colors.buttonPressed = colorScheme.buttonPressed;
customTheme.Colors.buttonSelected = colorScheme.buttonSelected;
customTheme.Colors.buttonSelectedText = colorScheme.buttonSelectedText;
customTheme.Colors.buttonText = colorScheme.buttonText;
customTheme.Colors.control = colorScheme.control;
customTheme.Colors.controlText = colorScheme.controlText;
customTheme.Colors.desktop = colorScheme.desktop;
customTheme.Colors.focusFrame = colorScheme.focusFrame;
customTheme.Colors.hotTrack = colorScheme.hotTrack;
customTheme.Colors.highlight = colorScheme.highlight;
customTheme.Colors.highlightText = colorScheme.highlightText;
customTheme.Colors.iconDark = colorScheme.iconDark;
customTheme.Colors.iconLight = colorScheme.iconLight;
customTheme.Colors.window = colorScheme.window;
customTheme.Colors.windowFrame = colorScheme.windowFrame;
customTheme.Colors.windowText = colorScheme.windowText;
Application.Theme = customTheme;


The selected color scheme is stored in a cookie so that the color scheme is applied the next time the user opens the application.

 //save the new color scheme to Cookies
 int cookieIndex = Application.Cookies.IndexOf(COLORSCHEMEKEY);
 if (cookieIndex == -1)
 {
   Application.Cookies.Add(COLORSCHEMEKEY, colorScheme.Name, DateTime.Now.AddYears(60));
 }
 else
 {
   Cookie colorSchemeCookie = Application.Cookies[cookieIndex];
   if (colorSchemeCookie.Value != colorScheme.Name)
   {
     colorSchemeCookie.Value = colorScheme.Name;
     colorSchemeCookie.Expires = DateTime.Now.AddYears(60);
   }
    }


This screen shows the different color schemes applied:

Fonts can also be changed in the theme. For this purpose, a sample text was added to the form. Pressing the A-/A+ will increase/decrease the font size.

Additional color schemes can be added, or current color schemes can be modified in the attached sample. Have fun trying it out! 

Silviu

Download: WritableThemes Sample (Zip file)

web wisej