dotless.NamedThemes – add file-based theme switching in .less css preprocessing

I’ve just released a new project on github and at nuget.org which helps you provide switchable themes when using the dotless LESS handler.

Here’s what you need to do. First, add it to your projet using the NuGet package;

Then enable the plugin by adding it to the <dotless> element in web.config;

<dotless minifyCss="false" cache="false" web="false">
    <plugin name="NamedThemesPlugin" assembly="dotless.NamedThemes" />
</dotless>

Tell the web.config about the folder that holds your theme files;

<configuration>
    <appSettings>
        <add key="dotless.NamedThemes:ThemeBaseUrl" value="~/Content/Themes" />
    </appSettings>
</configuration>

Write files named after your theme;

// ~/Content/Theme/blueTheme.less
@theme-base-color:#003d7d;
@theme-base-secondary-color:#003d7d;
@theme-font-size-base:14px;
@theme-header-font-size-base:12px;
@theme-nav-bar-color:#3a3a3a;
@theme-nav-bar-bg-color:#FFFFFF;
@theme-link-color:#003d7d;

Now, the clever bit; in your actual .less file, use the getThemeColor function;

// ~/Content/themeAware.less
@theme-base-color:getThemeColor(@theme,theme-base-color);
@theme-base-secondary-color:getThemeColor(@theme,theme-base-secondary-color);

And make sure you pass the @theme variable in the url;

http://mysite/content/themeAware.less?theme=blueTheme

Voila! The theme name and the theme-specific colour are retrieved by the plugin.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s