Theming

In Mint UI theming is achieved using CSS variables.

Setting the global theme

To set the global theme you need to embed everything in a Ui.Theme.Root component.

The component:

  • Sets of the values for the design tokens.
  • Sets the style of scrollbars globally.
  • Sets font-family, font-size, background-color, and color of the root element.
  • Sets the style of text selections
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>
}
}
Overriding a specific tokens
You can use the standard CSS variable to override a token.
<div style="--primary-color: orangered;--primary-hover: red;">
<Ui.Container>
<Ui.Button label="I'm orangered!" type="primary"/>
<Ui.Checkbox checked={true}/>
</Ui.Container>
</div>
Tokens

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

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.