Theming Activate

activate theme and ui customization activate is built on the material ui (mui) component library the application theme can be customized to align with your organization’s branding and design preferences full details on theming are available at 🔗 https //mui com/material ui/customization/theming/ theme design tools the community provides several helpful tools for designing and previewing mui themes https //bareynol github io/mui theme creator/ a visual tool to design and customize mui themes it includes sample layouts that demonstrate how your chosen theme affects various components https //material io/inline tools/color/ use this to generate a color palette based on your chosen primary color you can view the default mui theme https //mui com/material ui/customization/default theme/ the activate theme configuration is stored in //resources/configuration/web/theme/theme json this file can be customized using the above tools and documentation custom less custom less can be used to define additional css classes if required however, it does not have access to the mui theme data and should only be used sparingly most styling adjustments can be completed using properties such as margin, padding, color, and backgroundcolor directly on panels icons activate uses svg icons by default these icons are scalable, theme aware (automatically colored and resized), and support overlays without requiring separate image files you can still use custom png or gif icons if required note that these will not dynamically adjust to theme colors they should be placed in c \program files\activate\instances\\\[instancename]\wwwroot\clientapp\build\images and referenced using /images/xxxx png a wide range of open source icons are also included and can be browsed at 🔗 https //icon sets iconify design/ available icon sets include material design icons (mdi prefix) – 7,000 icons material symbols (material symbols prefix) – 8,000 icons google material ui icons (ic prefix) – 10,000 icons fluent design icons (fluent prefix) – 12,000 icons font awesome 6 (fa6 prefix) – 1,500 icons to use an icon, reference it with its prefix and name for example ic\ outline person 3 displays an outlined “person” icon from the material ui set fonts the default font used in activate is roboto you can use custom fonts by following these steps supported formats ttf, woff, and woff2 activate’s typography expects the following weights 300 , 400 , 500 , and 700 ensure these are available for any new font you use 1\ define and load the font in css custom fonts can be loaded via custom css, either from an external source or locally a external fonts to import a google font, use the @import statement @import "https //fonts googleapis com/css2?family=exo+2\&display=swap"; by default, this may be blocked by the content security policy (csp) if so, update the following file to allow stylesheets from google //resources/configuration/web/contentsecuritypolicy add this line under style src style src 'self' 'unsafe inline' https //fonts googleapis com; b local fonts copy your font files into \[program files]\activate\instances\\\[instancename]\wwwroot\style then define them in custom less @font face { font family 'exo 2'; font style normal; font display swap; font weight 400; src url('exo2 woff2'); } 2\ update the theme to use the new font navigate to //resources/configuration/web/theme update the material ui theme json to include your font family always define fallback fonts for broader browser support example "light" { "typography" { "fontfamily" "'exo 2','roboto','segoe ui',arial" }, "palette" { "mode" "light", "icon" { "main" "#3d77b1" }, "title" { "main" "#000" }, "primary" { "main" "#16499a" }, "secondary" { "main" "#cc6600" } } }, "dark" { "typography" { "fontfamily" "'exo 2','roboto','segoe ui',arial" }, "palette" { "mode" "dark", "icon" { "main" "white" }, "title" { "main" "#16499a" }, "primary" { "main" "#16499a" }, "secondary" { "main" "#cc6600" } } }