👁 Image
Abstractions.Sass.Theming 1.0.3

Abstractions SASS Theming System

System used to enable generating custom themes as CSS using Sass.

Packages

Abstractions.Sass.Theming.Models

Contains models used by the system. Reference in all consumers.

Abstractions.Sass.Theming

Contains the functinality required to add theming support to an .net core web application

Configuration

ThemeOptions may be configured, otherwhise the followinf default is used

{
	// Folder where source SCSS files are located
	"stylePath": "Styles",

	// There is only one entry file, but it may @import 
	// as many other files as it wants
	"entryFile": "site",

	// The name of a file @imported by the entry file,
	// containing theme settings and variables
	"themeFile": "theme"
}

Bootstrapping

Add the following snipped to ConfigureServices

public void ConfigureServices(IServiceCollection services)
{
	services.AddSassThemeSupport();
}

Compiling a theme

Theme compilation is offered by the IThemeCompiler service.

// To compile a an implementation of 'ITheme' to CSS
var css = themeCompiler.CompileTheme(theme);

// To update the compiled theme of a themable object implementing 'IThemeProvider' or 'IThemeProvider<T>'
themeCompiler.CompileTheme(themable);

ITheme

Themes are defined by classes implmeneting ITheme. The class itself defines the structure of the theme, such as variables or other configuration, while the instances hold the actual values of the theme.

An example implementation

public class Theme : ITheme 
{
 public string FontFamily { get; set; }
 public string PrimaryColor { get; set; }
 public string WarningColor { get; set; }

 #region ITheme Implementation

 // this method should not append the '$' to the
 // variable names, that's handled by the runtime
 public IEnumerable<ThemeVariable> Variables
 {
 get
 {
 yield return new ThemeVariable("primary", PrimaryColor);
 yield return new ThemeVariable("warning", WarningColor);
 yield return new ThemeVariable("font", FontFamily);
 }
 }

 // Generate your own scss that will be appended to the 'theme' scss-file
 string ITheme.UntypedVariables => null;

 // Generate your own scss that will be appended to the end of the scss entry file,
 // overriding any previously defined styles
 string ITheme.Overrides => null;

 #endregion
}

IThemeProvider and IThemeProvider[T]

IThemeProvider and IThemeProvider<T> are interfaces meant to be implemented by themeable objects. They hold both the theme definition and compiled CSS.

An example implementation

public class Customer : IThemeProvider<MyTheme> 
{
 // Holds the cusomers theme as a strongly typed object implementing 'ITheme'
 public MyTheme Theme { get; set; }

 // Holds the compiled CSS
 public string CompiledTheme { get; set; }

 // Updated when compiled CSS is updated in order to 
 // avoid caching. Should be appended to the CSS url
 public string ThemeRevision { get; set; }

}