Setup and configuration

Themalize is built with Sass and designed to be easy to customize using two key documents that can both be edited directly when compiling or using overrides in a custom setup.

Central control (anchor)

The configuration.scss document controls what's included with Themalize and is setup to allow importing over 70 different optional elements individually using simple true and false statements. The properties.scss document contains the default property values for the styles, colors and optional extensions all customizable using Sass variables.

configuration.scss

// ------------------------------------------------------------
// Configuration
// ------------------------------------------------------------
$enable-forms-buttons:    true;
$enable-tables:           true;

// Color variable palettes
$enable-primary-colors:   false;
$enable-theme-colors:     false;

// Manual theme switch
$enable-manual-themes:    false;

// Theme switch button
$enable-theme-switch:     false;
$enable-switch-celestial: false;
$enable-switch-radio:     false;

// Components
$enable-accordions:       false;
$enable-cards:            false;
$enable-dialogs:          false;
$enable-popovers:         false;

// Utilities
$enable-backgrounds:      false;
$enable-badges:           false;
$enable-borders:          false;
$enable-buttons:          false; // Requires $enable-forms-buttons: true
$enable-gradients:        false;
$enable-images:           false;
$enable-shadows:          false;
$enable-text:             false;

// Layout
$enable-grid-auto:        false;
$enable-grid-columns:     false;
$enable-containers:       false;

// Spacing
$enable-gaps:             false;
$enable-margins:          false;
$enable-padding:          false;

// Spacing breakpoints
$enable-margins-bp:       false;
$enable-padding-bp:       false;

// Display
$enable-block:            false;
$enable-flex:             false;
$enable-alignment:        false;
$enable-sizing:           false;
$enable-order:            false;
$enable-position:         false;
$enable-overflow:         false;

// Display breakpoints
$enable-block-bp:         false;
$enable-flex-bp:          false;
$enable-alignment-bp:     false;
$enable-sizing-bp:        false;
$enable-order-bp:         false;
$enable-position-bp:      false;
$enable-overflow-bp:      false;

// Breakpoints
$enable-breakpoint-xl:    false; // 1601px
$enable-breakpoint-lg:    false; // 1281px
$enable-breakpoint-md:    false; // 1025px
$enable-breakpoint-sm:    false; // 769px
$enable-breakpoint-xs:    false; // 481px

// Icon utilities
$enable-icon-mixins:      false;
$enable-icon-styles:      false;

// Icons SVG
$enable-logo-svg:             false;
$enable-house-svg:            false;
$enable-email-svg:            false;
$enable-plus-svg:             false;
$enable-minus-svg:            false;
$enable-bars-svg:             false;
$enable-caret-down-svg:       false;
$enable-caret-up-svg:         false;
$enable-caret-right-svg:      false;
$enable-caret-left-svg:       false;
$enable-close-svg:            false;
$enable-close-box-svg:        false;
$enable-close-box-fill-svg:   false;
$enable-box-svg:              false;
$enable-tick-box-svg:         false;
$enable-ext-link-svg:         false;
$enable-pg-link-svg:          false;
$enable-search-svg:           false;
$enable-download-svg:         false;
$enable-user-svg:             false;
$enable-question-svg:         false;
$enable-sun-svg:              false;
$enable-moon-svg:             false;
$enable-radio-on-svg:         false;
$enable-radio-off-svg:        false;

properties.scss

// ---------------------------------------------------------- 
// Properties
// ----------------------------------------------------------

// Theme and brand base colors
$theme:               slategray !default;
$theme-brand:         cadetblue !default;

// Light color-scheme
$text-light:          color-mix(in srgb, var(--theme) 10%, black) !default;  
$link-light:          #1c3db5 !default;
$link-hover-light:    color-mix(in srgb, var(--link) 60%, white) !default;
$link-visited-light:  color-mix(in srgb, var(--link) 70%, white) !default;
$brand-light:         color-mix(in srgb, var(--theme-brand) 90%, black) !default; 
$body-bg-light:       color-mix(in srgb, var(--theme) 8%, white) !default;
$surf-1-light:        color-mix(in srgb, var(--theme) 21%, white) !default;
$surf-2-light:        color-mix(in srgb, var(--theme) 29%, white) !default;
$surf-3-light:        color-mix(in srgb, var(--theme) 43%, white) !default;
$surf-4-light:        color-mix(in srgb, var(--theme) 60%, white) !default;

// Dark color-scheme
$text-dark:           color-mix(in srgb, var(--theme) 10%, white) !default;
$link-dark:           #9fbfdf !default;
$link-hover-dark:     color-mix(in srgb, var(--link) 75%, white) !default;
$link-visited-dark:   color-mix(in srgb, var(--link) 65%, white) !default;
$body-bg-dark:        color-mix(in srgb, var(--theme) 25%, black) !default;
$brand-dark:          color-mix(in srgb, var(--theme-brand) 90%, white) !default; 
$surf-1-dark:         color-mix(in srgb, var(--theme) 33%, black) !default;
$surf-2-dark:         color-mix(in srgb, var(--theme) 40%, black) !default;
$surf-3-dark:         color-mix(in srgb, var(--theme) 50%, black) !default;
$surf-4-dark:         color-mix(in srgb, var(--theme) 65%, black) !default;

// Typography
$font-family:         system-ui, -apple-system, Arial, Helvetica, sans-serif !default;
$font-size:           clamp(100%, 40% + 0.666vw, 140%) !default;
$body:                1rem !default;
$fs-xl:               1.25rem !default;
$fs-lg:               1.1rem !default;
$fs-sm:               0.906rem !default;
$fs-xs:               0.813rem !default;
$fs-xxs:              0.75rem !default;
$h1:                  2rem !default;
$h2:                  1.725rem !default;
$h3:                  1.5rem !default;
$h4:                  1.35rem !default;
$h5:                  1.2rem !default;
$h6:                  1.063rem !default;
$lh-body:             1.5 !default;
$lh-header:           1.2 !default;

// Buttons and forms
$lh-btn-forms:        1.4 !default;
$btn-py:              0.313rem !default;
$btn-px:              0.75rem !default;
$btn-bg:              var(--surf-1) !default;
$btn-hover:           var(--surf-2) !default;
$btn-bd-width:        1px !default;
$btn-bd-color:        var(--surf-2) !default;
$btn-radius:          0.125em !default;
$form-py:             0.313rem !default;
$form-px:             0.75rem !default;
$form-bg:             var(--body-bg) !default;
$form-bd-width:       1px !default;
$form-bd-color:       var(--surf-3) !default;
$form-radius:         0.125em !default;
$input-focus:         0 0 0 0.12rem !default;
$input-focus-color:   var(--surf-4) !default;

// Tables
$table-thead-txt:     var(--text) !default;
$table-thead-bg:      var(--surf-1) !default;
$table-hover:         color-mix(in srgb, var(--table-thead-bg) 55%, var(--body-bg)) !default;
$table-stripes:       color-mix(in srgb, var(--table-thead-bg) 35%, var(--body-bg)) !default;
$table-bd-color:      var(--surf-2) !default;
$table-bd-width:      0.0125rem !default;
$table-py:            0.313rem !default;
$table-px:            0.75rem !default;
$table-mb:            1rem !default;

// Primary colors
$blue:            #264d73 !default;
$blue-light:      color-mix(in srgb, var(--blue) 93%, white) !default;
$blue-lighter:    color-mix(in srgb, var(--blue) 85%, white) !default;
$blue-dark:       color-mix(in srgb, var(--blue) 90%, black) !default;
$blue-darker:     color-mix(in srgb, var(--blue) 80%, black) !default;
$red:             #9a1d1d !default;
$red-light:       color-mix(in srgb, var(--red) 93%, white) !default;
$red-lighter:     color-mix(in srgb, var(--red) 85%, white) !default;
$red-dark:        color-mix(in srgb, var(--red) 90%, black) !default;
$red-darker:      color-mix(in srgb, var(--red) 80%, black) !default;
$green:           #2b6020 !default;
$green-light:     color-mix(in srgb, var(--green) 93%, white) !default;
$green-lighter:   color-mix(in srgb, var(--green) 85%, white) !default;
$green-dark:      color-mix(in srgb, var(--green) 90%, black) !default;
$green-darker:    color-mix(in srgb, var(--green) 80%, black) !default;
$orange:          #ffc14d !default;
$orange-light:    color-mix(in srgb, var(--orange) 85%, white) !default;
$orange-lighter:  color-mix(in srgb, var(--orange) 75%, white) !default;
$orange-dark:     color-mix(in srgb, var(--orange) 90%, black) !default;
$orange-darker:   color-mix(in srgb, var(--orange) 80%, black) !default;
$cyan:            #00e6e6 !default;
$cyan-light:      color-mix(in srgb, var(--cyan) 75%, white) !default;
$cyan-lighter:    color-mix(in srgb, var(--cyan) 60%, white) !default;
$cyan-dark:       color-mix(in srgb, var(--cyan) 90%, black) !default;
$cyan-darker:     color-mix(in srgb, var(--cyan) 80%, black) !default;

// Accordions
$summary-txt:         var(--text) !default;
$summary-bg:          var(--surf-1) !default;
$summary-ico:         var(--summary-txt) !default;
$details-py:          0.5rem !default;
$details-px:          0.75rem !default;
$details-bd-color:    var(--surf-3) !default;
$details-bd-width:    1px !default;
$details-radius:      0.125em !default;

// Cards
$card-px:             1rem !default;
$card-pt:             0.75rem !default;
$card-pb:             1rem !default;
$card-bd-color:       var(--surf-2);
$card-bd-width:       1px !default;
$card-radius:         0.125em !default;
$card-bg:             var(--body-bg) !default;
$card-hover:          color-mix(in srgb, var(--surf-1) 50%, var(--body-bg)) !default;
$card-focus:          0.188rem solid var(--surf-3) !default;
$card-title-txt:      var(--text) !default;
$card-title-bg:       var(--surf-2) !default;  
$card-title-py:       0.5rem !default;
$card-title-h-py:     0.75rem !default; 

// Dialogs
$dialog-txt:          var(--text) !default;
$dialog-bg:           var(--body-bg) !default;
$dialog-header-txt:   var(--text) !default;
$dialog-header-bg:    var(--surf-2) !default;
$dialog-body-bg:      var(--body-bg) !default;
$dialog-body-py:      0.75rem !default;
$dialog-body-px:      1rem !default;
$dialog-bd-color:     var(--surf-3) !default;
$dialog-bd-width:     1px !default;
$dialog-radius:       0.125em !default; 
$dialog-top:          1rem !default;
$dialog-width:        calc((100% - 6px) - 2em) !default;
$dialog-max-width:    30rem !default;

// Popovers
$pop-txt:             var(--text) !default;
$pop-bg:              var(--body-bg) !default;
$pop-bd-color:        var(--surf-3) !default;
$pop-bd-width:        1px !default;
$pop-radius:          0.125rem !default;
$pop-my:              1rem !default;
$pop-mx:              auto !default;
$pop-py:              0.75rem !default;
$pop-px:              1rem !default;
$pop-width:           calc((100% - 6px) - 2em) !default;
$pop-max-width:       fit-content !default;

// Badges
$badge-txt:           var(--text) !default;
$badge-fs:            0.65em !default;
$badge-fw:            600 !default;
$badge-py:            0.375em !default;
$badge-px:            0.65em !default;
$badge-radius:        0.25em !default;
$badge-bg:            var(--surf-2);

// Shadows
$shadow:        0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !default;
$shadow-sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.125) !default;
$shadow-lg:     0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !default;

// Gradients
$gradient-light:    linear-gradient(180deg, var(--surf-1-light), var(--surf-2-light), var(--surf-3-light)) !default;
$gradient-dark:     linear-gradient(0deg, var(--surf-1-dark), var(--surf-2-dark), var(--surf-3-dark)) !default;
$gradient-blue:     linear-gradient(0deg, var(--blue), var(--blue-light), var(--blue-lighter)) !default;
$gradient-red:      linear-gradient(0deg, var(--red), var(--red-light), var(--red-lighter)) !default;
$gradient-green:    linear-gradient(0deg, var(--green), var(--green-light), var(--green-lighter)) !default;
$gradient-orange:   linear-gradient(0deg, var(--orange-darker), var(--orange-dark), var(--orange)) !default;
$gradient-cyan:     linear-gradient(0deg, var(--cyan-darker), var(--cyan-dark), var(--cyan)) !default;

// Spacing
$auto: auto;
$s0: 0;
$s1: .25rem !default;
$s2: .5rem !default;
$s3: 1rem !default;
$s4: 1.5rem !default;
$s5: 2rem !default;

// Breakpoints
$breakpoint-xl:    1601px !default;
$breakpoint-lg:    1281px !default;
$breakpoint-md:    1025px !default;
$breakpoint-sm:    769px !default;
$breakpoint-xs:    481px !default;

// Grid auto columns
$g-1:   minmax(0, 1fr);
$g-2:   repeat(2, minmax(0, 1fr));
$g-3:   repeat(3, minmax(0, 1fr));
$g-4:   repeat(4, minmax(0, 1fr));
$g-5:   repeat(5, minmax(0, 1fr));
$g-6:   repeat(6, minmax(0, 1fr));
$g-7:   repeat(7, minmax(0, 1fr));
$g-8:   repeat(8, minmax(0, 1fr));
$g-9:   repeat(9, minmax(0, 1fr));
$g-10:  repeat(10, minmax(0, 1fr));
$g-11:  repeat(11, minmax(0, 1fr));
$g-12:  repeat(12, minmax(0, 1fr));

// Layout grid spans
$span-0:   initial;
$span-1:   auto / span 1;
$span-2:   auto / span 2;
$span-3:   auto / span 3;
$span-4:   auto / span 4;
$span-5:   auto / span 5;
$span-6:   auto / span 6;
$span-7:   auto / span 7;
$span-8:   auto / span 8;
$span-9:   auto / span 9;
$span-10:  auto / span 10;
$span-11:  auto / span 11;
$span-12:  auto / span 12;

// Grid start position
$start-0:   0;
$start-1:   1;
$start-2:   2;
$start-3:   3;
$start-4:   4;
$start-5:   5;
$start-6:   6;
$start-7:   7;
$start-8:   8;
$start-9:   9;
$start-10:  10;
$start-11:  11;
$start-12:  12;

// Alignment
$flex-start:      flex-start;
$flex-end:        flex-end;
$start:           start;
$end:             end;
$center:          center;
$space-around:    space-around;
$space-between:   space-between;
$space-evenly:    space-evenly;

// Resets
$initial:   initial;
$unset:     unset;
$revert:    revert;

// Position
$relative:  relative;
$absolute:  absolute;
$fixed:     fixed;
$sticky:    sticky;

// Inset
$top:     inset-block-start;
$bottom:  inset-block-end;
$left:    inset-inline-start;
$right:   inset-inline-end;

// Z-index
$z-n:   -1;
$z-0:   0;
$z-1:   1;
$z-2:   2;
$z-3:   3;
$z-4:   4;

// Overflow
$overflow-auto:     auto;
$overflow-scroll:   scroll;
$scroll-stable:     stable;

// SVG icon paths
$logo:              url("data:image/svg+xml,<svg viewBox='0 0 192 192' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m36 0c-36 0-36 36-36 36v120c0 36 36 36 36 36h120c36 0 36-36 36-36v-120c0-36-36-36-36-36zm12 42h96v24h-36v84h-24v-84h-36z'/></svg>") !default;

// Theme switch button
$sun:               url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.47 0v2.26h1.15v-2.26zm-4.9 2.19-0.812 0.8 1.62 1.6 0.812-0.8zm10.8 0-1.62 1.6 0.812 0.8 1.62-1.6zm-5.29 1.25s-4.59 0-4.59 4.52c0 4.52 4.59 4.52 4.59 4.52s4.59 0 4.59-4.52c0-4.52-4.59-4.52-4.59-4.52zm5.67 3.92v1.13h2.3v-1.13zm-13.7 0.0243v1.13h2.3v-1.13zm3.01 4-1.62 1.6 0.812 0.8 1.62-1.6zm9.99 0-0.812 0.8 1.62 1.6 0.812-0.8zm-5.54 2.36v2.26h1.15v-2.26z'/></svg>") !default;
$moon:              url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m5.27 1c-0.533 0.0926-0.946 0.529-1.39 0.815-1.17 0.88-1.95 2.19-2.46 3.54-0.777 2.03-0.429 4.41 0.861 6.16 1.41 1.98 3.67 3.56 6.18 3.49 1.98-0.0388 3.86-0.991 5.28-2.33 0.48-0.565 0.971-1.16 1.27-1.84 0.089-0.435-0.481-0.742-0.809-0.456-1.61 0.937-3.67 1.22-5.37 0.365-1.52-0.764-2.79-2.04-3.55-3.55-0.871-1.73-0.56-3.83 0.411-5.45 0.187-0.304-0.0437-0.726-0.4-0.734z'/></svg>") !default;
$radio-off:         url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.5 8a5.5 5.5 0 0 1-5.5 5.5 5.5 5.5 0 0 1-5.5-5.5 5.5 5.5 0 0 1 5.5-5.5 5.5 5.5 0 0 1 5.5 5.5z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>") !default;
$radio-on:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.5 8a5.5 5.5 0 0 1-5.5 5.5 5.5 5.5 0 0 1-5.5-5.5 5.5 5.5 0 0 1 5.5-5.5 5.5 5.5 0 0 1 5.5 5.5z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/><path d='m4.5 8s0-3.5 3.5-3.5 3.5 3.5 3.5 3.5 0 3.5-3.5 3.5-3.5-3.5-3.5-3.5z' fill='currentColor'/></svg>") !default;

// Generic
$house:             url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>") !default;
$email:             url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 2 7 8 7-8h-14zm14 0.959-4.47 5.33 4.47 5.67v-11zm-14 0.041v11l4.47-5.67-4.47-5.33zm5 6-5 6h14l-5-6-2 2-2-2z'/></svg>") !default;
$plus:              url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7 2v5h-5v2h5v5h2v-5h5v-2h-5v-5h-2z'/></svg>") !default;
$minus:             url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 9v-2h12v2z'/></svg>") !default;
$bars:              url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 2v2h12v-2h-12zm0 5v2h12v-2h-12zm0 5v2h12v-2h-12z'/></svg>") !default;
$caret-down:        url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 10-4-4h8z'/></svg>") !default;
$caret-up:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 6 4 4-8 7e-7z'/></svg>") !default;
$caret-left:        url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m6 8 4-4v8z'/></svg>") !default;
$caret-right:       url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 8-4 4-9e-7 -8z'/></svg>");
$ext-link:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m9 1-1 1h5l-6.51 6.51 0.998 0.998 6.51-6.51 0.00195 5 1-1-0.00195-4.99v-0.998zm-8 2 0.00781 12h12v-8h-1v7h-9.99l-0.00781-10h7v-1z'/></svg>") !default;
$pg-link:           url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 2v12h10v-3h-1v2h-8v-10h8v2h1v-3h-10zm11 2 1.88 3.29-7.88 0.041v1.37h7.88l-1.88 3.3h1.67c0.877-1.58 1.56-2.66 2.33-4l-2.45-4h-1.55z'/></svg>") !default;
$close:             url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13 3-10 10zm-10 0 10 10z' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>") !default;
$box:               url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1.51 0.0131c-0.911-0.0389-1.61 0.85-1.5 1.73 0.0031 4.3-0.0062 8.6 0.0047 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$close-box:         url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m4.82 5.53s-0.354-0.354 0-0.707 0.707 0 0.707 0l2.47 2.47 2.47-2.47s0.354-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.354 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.354 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47zm-3.31-5.51c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$close-box-fill:    url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm3.08 4.67c0.249-0.0497 0.447 0.15 0.447 0.15l2.47 2.47 2.47-2.47s0.353-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.353 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.353 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47-2.47-2.47s-0.354-0.353 0-0.707c0.0884-0.0884 0.177-0.134 0.26-0.15z'/></svg>") !default;
$tick-box:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.4 4.6c-0.322-0.0685-0.509 0.216-0.652 0.449l-4.01 5.57c-0.875-0.787-1.74-1.58-2.62-2.36-0.362-0.326-0.976 0.154-0.76 0.583 0.177 0.295 0.485 0.482 0.725 0.726 0.818 0.734 1.63 1.48 2.45 2.21 0.264 0.206 0.64 0.0522 0.769-0.232 1.63-2.39 2.85-3.86 4.48-6.26 0.143-0.282-0.0874-0.618-0.374-0.682zm-9.93-4.59c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$search:            url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.3 10.1a5.69 5.69 0 1 0-1.22 1.22h-8.75e-4q0.0385 0.0525 0.0858 0.101l3.37 3.37a0.875 0.875 0 0 0 1.24-1.24l-3.37-3.37a0.875 0.875 0 0 0-0.101-0.0875zm0.226-3.36a4.81 4.81 0 1 1-9.62 0 4.81 4.81 0 0 1 9.62 00'/></svg>") !default;
$download:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2c-0.344-0.0114-0.551 0.342-0.5 0.652 2e-3 2.21 5.6e-4 4.43 4e-3 6.64-1.06-1.06-2.13-2.13-3.2-3.19-0.0933-0.0741-0.213-0.113-0.332-0.107-0.443-0.0017-0.647 0.624-0.295 0.889 1.31 1.31 2.61 2.62 3.93 3.92 0.0104 0.0124 0.0216 0.0219 0.0332 0.0332 0.017 0.0168 0.0338 0.0339 0.0508 0.0508 0.133 0.112 0.29 0.124 0.438 0.0801 0.0874-0.02 0.167-0.0577 0.23-0.129 0.0433-0.036 0.088-0.0728 0.121-0.117 1.3-1.31 2.61-2.61 3.91-3.92 0.29-0.33-0.0448-0.898-0.475-0.801-0.313 0.0818-0.484 0.388-0.721 0.588l-2.7 2.7c-9.7e-4 -2.28 4e-3 -4.57-4e-3 -6.85-0.0246-0.245-0.25-0.446-0.496-0.441zm-6 8a0.5 0.5 0 0 0-0.5 0.5v3a0.5 0.5 0 0 0 0.5 0.5h12a0.5 0.5 0 0 0 0.5-0.5v-3a0.5 0.5 0 0 0-0.5-0.5 0.5 0.5 0 0 0-0.5 0.5v2.5h-11v-2.5a0.5 0.5 0 0 0-0.5-0.5z'/></svg>") !default;
$user:              url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.99 3s3 0 3 3-3 3-3 3-3 0-3-3 3-3 3-3zm0.0126-3c-2.4-0.0524-4.91 0.92-6.34 2.91-1.12 1.56-1.7 3.51-1.66 5.42 0.179 2.59 1.39 5.27 3.72 6.6 2.15 1.23 4.83 1.34 7.17 0.623 2.26-0.699 3.99-2.64 4.65-4.87 0.477-1.45 0.625-3.03 0.23-4.52-0.478-2.28-1.91-4.44-4.09-5.41-1.15-0.534-2.42-0.749-3.68-0.748zm0 1c2.02-0.0441 4.19 0.661 5.42 2.34 1.05 1.41 1.61 3.2 1.57 4.96-0.0993 1.29-0.491 2.62-1.18 3.75-0.425-0.879-1.75-2.05-5.82-2.05-4.1 0-5.41 1.19-5.82 2.07-0.268-0.43-0.491-0.887-0.654-1.36-0.506-1.38-0.706-2.91-0.314-4.35 0.443-2.08 1.77-4.11 3.84-4.86 0.937-0.362 1.95-0.494 2.95-0.494z'/></svg>") !default;
$question:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0.00201c-2.64-0.0763-5.41 1.16-6.73 3.52-1.29 2.15-1.64 4.86-0.791 7.23 0.67 2.12 2.26 4 4.4 4.72 2.23 0.8 4.78 0.696 6.94-0.278 2.18-1.05 3.6-3.28 4.02-5.62 0.483-2.35-0.164-4.88-1.6-6.79-1.44-1.94-3.88-2.82-6.23-2.78zm0 0.999c2.18-0.065 4.54 0.811 5.71 2.75 1.24 1.91 1.65 4.37 0.912 6.54-0.57 1.95-2 3.75-4.01 4.32-1.9 0.596-4.02 0.51-5.86-0.229-1.99-0.887-3.22-2.93-3.6-5.01-0.424-2.05 0.15-4.26 1.37-5.95 1.02-1.44 2.73-2.23 4.45-2.38 0.343-0.0353 0.688-0.051 1.03-0.0511zm-2.69 5.18c0.053-1.45 1.6-2.37 2.94-2.24 1.22-0.0093 2.53 0.941 2.43 2.25-0.0616 1.18-1.28 1.71-1.93 2.54-0.113 0.679-0.679 1.79-1.43 0.96-0.346-0.832 0.191-1.72 0.842-2.23 0.469-0.438 1.24-0.918 1-1.67-0.311-0.943-1.86-0.97-2.23-0.0498-0.0253 0.867-1.22 1.66-1.61 0.566zm2.62 5.89c-1.4 0.0355-0.715-2.25 0.447-1.48 0.652 0.405 0.34 1.52-0.447 1.48z'/></svg>") !default;

Custom setup (anchor)

The themalize.scss document compiles the style sheet as follows:

@import "configuration";
@import "properties";
@import "styles/maps";
@import "styles/variables";
@import "styles/styles";
@import "styles/extensions";

In a custom setup overrides for the configuration and properties are simply loaded between the documents.

@import "configuration";
<-- configuration overrides -->
<-- properties overrides -->
@import "properties";
@import "styles/maps";
@import "styles/variables";
@import "styles/styles";
@import "styles/extensions";
<-- custom styles -->

By importing everything by default and controlling what's included in the configuration Themalize can be compiled in a custom setup without having to create different style @import rules for compiling.

Customizing the source files (anchor)

Each of the docs pages on the site share the Sass source files to demonstrate how the styles are written and can be further customized if required. For the most part the styles are regular CSS that can be edited directly, but some aspects lean on Sass functionality so require an understanding of compiling with Sass and the patience to navigate an undocumented setup.

Compiled CSS (anchor)

If editing compiled CSS is preferred the download assets also include two alternative versions of Themalize that can be customized using the styles and variables as documented on the website.

themalize.css: A basic version with typography, buttons, forms and tables styles with @media query color-scheme variables.
themalize-x.css: An extended version includes all optional utilities and components enabled as demonstrated on this website.

The download assets includes both CSS documents plus the JavaScripts required for the theme switch, accordions and dialog components, with all CSS and JS files provided as both uncompressed and minified documents.