In Mint UI theming is achieved using CSS variables.
To set the global theme you need to embed everything in a Ui.Theme.Root
component.
The component:
font-family
, font-size
, background-color
, and color
of the root element.component Main { connect Ui exposing { mobile } fun render : Html { <Ui.Theme.Root fontConfiguration={Ui.DEFAULT_FONT_CONFIGURATION} tokens={Ui.DEFAULT_TOKENS}> /* Content goes here. */ </Ui.Theme.Root> }}
You can find below all of the token and their value using the default theme.
Normal variables (light and dark value the same):
Name | Value |
---|---|
--selection-color | var(--primary-color) |
--selection-text | var(--primary-text) |
--scroll-shadow-from | #00000000 |
--scroll-shadow-to | #00000030 |
--primary-focus-ring | #FFFFFF95 |
--primary-hover | #1D7AC1 |
--primary-color | #0591FC |
--primary-text | #FFF |
--warning-focus-ring | #FFFFFF95 |
--warning-hover | #DB8E0A |
--warning-color | #F59E0B |
--warning-text | #FFF |
--success-focus-ring | #FFFFFF95 |
--success-hover | #0C885F |
--success-color | #10B981 |
--success-text | #FFF |
--danger-focus-ring | #FFFFFF95 |
--danger-hover | #BD2525 |
--danger-color | #EF4444 |
--danger-text | #FFF |
Light variables:
Name | Value |
---|---|
--light-background-border | #D0D0D0 |
--light-background-color | #F0F0F0 |
--light-background-text | #444444 |
--light-content-faded-border | #DDD |
--light-content-faded-color | #EEE |
--light-content-faded-text | #555 |
--light-content-border | #DDD |
--light-content-color | #FFF |
--light-content-text | #555 |
--light-shadow-color | #00000010 |
--light-scrollbar-track | #FFF |
--light-scrollbar-thumb | #DDD |
--light-navitem-border | #EDEDED |
--light-checker-color-1 | #F0F0F0 |
--light-checker-color-2 | #F6F6F6 |
--light-input-border | #DDD |
--light-input-color | #F3F3F3 |
--light-input-text | #555 |
--light-input-focus-border | #c2e3fd |
--light-input-focus-color | #D8EEFF |
--light-input-focus-text | #306F9F |
--light-input-invalid-border | #F4B0AB |
--light-input-invalid-color | #FDD3D0 |
--light-input-invalid-text | #6A332F |
--light-title-border | #EEE |
--light-title-color | #333 |
--light-primary-light-color | #E9F5FF |
--light-primary-light-text | #284459 |
--light-warning-light-color | #FFEDCE |
--light-warning-light-text | #4a4740 |
--light-secondary-focus-ring | #FFFFFF95 |
--light-secondary-light-color | #DDD |
--light-secondary-light-text | #444 |
--light-secondary-hover | #545454 |
--light-secondary-color | #444 |
--light-secondary-text | #FFF |
--light-success-light-color | #C5FFEC |
--light-success-light-text | #37574d |
--light-danger-light-color | #FBE5E5 |
--light-danger-light-text | #463636 |
--light-faded-light-color | #00000015 |
--light-faded-light-text | #555 |
--light-faded-focus-ring | #00000095 |
--light-faded-hover | #00000025 |
--light-faded-color | #00000015 |
--light-faded-text | #555 |
Dark variables:
Name | Value |
---|---|
--dark-background-border | #D0D0D0 |
--dark-background-color | #F0F0F0 |
--dark-background-text | #444444 |
--dark-content-faded-border | #DDD |
--dark-content-faded-color | #EEE |
--dark-content-faded-text | #555 |
--dark-content-border | #DDD |
--dark-content-color | #FFF |
--dark-content-text | #555 |
--dark-shadow-color | #00000010 |
--dark-scrollbar-track | #FFF |
--dark-scrollbar-thumb | #DDD |
--dark-navitem-border | #EDEDED |
--dark-checker-color-1 | #F0F0F0 |
--dark-checker-color-2 | #F6F6F6 |
--dark-input-border | #DDD |
--dark-input-color | #F3F3F3 |
--dark-input-text | #555 |
--dark-input-focus-border | #c2e3fd |
--dark-input-focus-color | #D8EEFF |
--dark-input-focus-text | #306F9F |
--dark-input-invalid-border | #F4B0AB |
--dark-input-invalid-color | #FDD3D0 |
--dark-input-invalid-text | #6A332F |
--dark-title-border | #EEE |
--dark-title-color | #333 |
--dark-primary-light-color | #E9F5FF |
--dark-primary-light-text | #284459 |
--dark-warning-light-color | #FFEDCE |
--dark-warning-light-text | #4a4740 |
--dark-secondary-focus-ring | #FFFFFF95 |
--dark-secondary-light-color | #DDD |
--dark-secondary-light-text | #444 |
--dark-secondary-hover | #545454 |
--dark-secondary-color | #444 |
--dark-secondary-text | #FFF |
--dark-success-light-color | #C5FFEC |
--dark-success-light-text | #37574d |
--dark-danger-light-color | #FBE5E5 |
--dark-danger-light-text | #463636 |
--dark-faded-light-color | #00000015 |
--dark-faded-light-text | #555 |
--dark-faded-focus-ring | #00000095 |
--dark-faded-hover | #00000025 |
--dark-faded-color | #00000015 |
--dark-faded-text | #555 |
Mint UI is a design system and component library for building websites, web and desktop applications.