SharpUI

To use the framework you should do the following steps: 1-After installation you should create a class named Theme and implement ITheme interface for that class. For Example: public sealed class Theme : ITheme { public string FontFamily => "Arial, Helvetica, sans-serif"; public string PrimaryColor => "#2196f3"; public string PrimaryDarkColor => "#0d69b3"; public string SecondaryColor => "#4ae54a"; public string SecondaryDarkColor => "#15cc15"; public string SuccessColor => "#4ae54a"; public string SuccessDarkColor => "#15cc15"; public string ErrorColor => "#f44336"; public string ErrorDarkColor => "#f44336"; public string TextColor => "#4e4e4e"; public string TextSecondaryColor => "#465280"; public string TextHintColor => "#c0cad5"; public string TextHeaderColor => "#2c4162"; public string PrimaryBorderColor => "#c0cad5"; public string SecondaryBorderColor => "#e1e1e1"; public string ThirdBgColor => "rgb(244, 246, 248)"; public string PrimaryBgColor => "white"; public string SecondaryBgColor => "rgb(252, 252, 252)"; public string[] Shadows => new[] { "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)", "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)", "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)", }; public int SpacingLength => 8;

        public string Spacing(double i)
        {
            return $"{SpacingLength * i}px";
        }

        public string Spacing(double i, double j)
        {
            return $"{SpacingLength * i}px {SpacingLength * j}px";
        }

        public string Spacing(double i, double j, double m, double n)
        {
            return $"{SpacingLength * i}px {SpacingLength * j}px {SpacingLength * m}px {SpacingLength * n}px";
        }
    }

2-Add a singleton service in startup class. services.AddSingleton<ITheme, Theme>();

3-Add the following line to _Imports.razor. @using SharpUI 4-Inside the App.razor file wrap content using the Styles tag from the SharpUI namespace.

Sorry, there's nothing at this address.

5-Add the following script tag to bottom of _Host.cshtml file.

6-If you would like to use extra functionality on Theme you can initialize ThemeHelper in Startup class constructor. ThemeHelper.Init(new Theme());

Congratulations. You're ready to go!!!.

Written By Farshad Goodarzi.