Default CSS variables list
This page contains a list of all Mantine CSS variables that are generated from default theme.
CSS variables not depending on color scheme
--mantine-scale | 1 | |
--mantine-cursor-type | default | |
--mantine-color-scheme | light dark | |
--mantine-webkit-font-smoothing | antialiased | |
--mantine-moz-font-smoothing | grayscale | |
--mantine-color-white | #fff | |
--mantine-color-black | #000 | |
--mantine-line-height | 1.55 | |
--mantine-font-family | "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji | |
--mantine-font-family-monospace | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | |
--mantine-font-family-headings | "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji | |
--mantine-heading-font-weight | 700 | |
--mantine-heading-text-wrap | wrap | |
--mantine-radius-default | 0.375rem | |
--mantine-primary-color-filled | var(--mantine-color-ocean-filled) | |
--mantine-primary-color-filled-hover | var(--mantine-color-ocean-filled-hover) | |
--mantine-primary-color-filled-active | var(--mantine-color-ocean-filled-active) | |
--mantine-primary-color-light | var(--mantine-color-ocean-light) | |
--mantine-primary-color-light-hover | var(--mantine-color-ocean-light-hover) | |
--mantine-primary-color-light-color | var(--mantine-color-ocean-light-color) | |
--mantine-primary-color-light-active | var(--mantine-color-ocean-light-active) | |
--mantine-primary-color-outline | var(--mantine-color-ocean-outline) | |
--mantine-primary-color-outline-hover | var(--mantine-color-ocean-outline-hover) | |
--mantine-primary-color-outline-active | var(--mantine-color-ocean-outline-active) | |
--mantine-breakpoint-xs | 36em | |
--mantine-breakpoint-sm | 48em | |
--mantine-breakpoint-md | 62em | |
--mantine-breakpoint-lg | 75em | |
--mantine-breakpoint-xl | 88em | |
--mantine-spacing-xxs | 0.125rem | |
--mantine-spacing-xs | 0.25rem | |
--mantine-spacing-sm | 0.375rem | |
--mantine-spacing-md | 0.5rem | |
--mantine-spacing-lg | 0.625rem | |
--mantine-spacing-xl | 0.75rem | |
--mantine-spacing-2xl | 1rem | |
--mantine-spacing-3xl | 1.5rem | |
--mantine-spacing-4xl | 2rem | |
--mantine-spacing-5xl | 2.5rem | |
--mantine-spacing-6xl | 3rem | |
--mantine-font-size-xxs | 0.625rem | |
--mantine-font-size-xs | 0.75rem | |
--mantine-font-size-sm | 0.875rem | |
--mantine-font-size-md | 1rem | |
--mantine-font-size-lg | 1.125rem | |
--mantine-font-size-xl | 1.25rem | |
--mantine-font-size-2xl | 1.5rem | |
--mantine-font-size-3xl | 1.75rem | |
--mantine-font-size-4xl | 2rem | |
--mantine-font-size-5xl | 2.25rem | |
--mantine-font-size-6xl | 2.5rem | |
--mantine-font-size-7xl | 2.75rem | |
--mantine-line-height-xs | 1.4 | |
--mantine-line-height-sm | 1.45 | |
--mantine-line-height-md | 1.55 | |
--mantine-line-height-lg | 1.6 | |
--mantine-line-height-xl | 1.65 | |
--mantine-shadow-xs | 0 0.0625rem 0.25rem 0.0625rem rgba(18, 21, 28, 0.08) | |
--mantine-shadow-sm | 0 0.125rem 0.5rem 0.125rem rgba(18, 21, 28, 0.08) | |
--mantine-shadow-md | 0 0.25rem 0.625rem 0.25rem rgba(18, 21, 28, 0.08) | |
--mantine-shadow-lg | 0 0.375rem 0.75rem 0.25rem rgba(18, 21, 28, 0.08) | |
--mantine-shadow-xl | 0 0.5rem 1rem 0.375rem rgba(18, 21, 28, 0.08) | |
--mantine-radius-xxs | 0.125rem | |
--mantine-radius-xs | 0.25rem | |
--mantine-radius-sm | 0.375rem | |
--mantine-radius-md | 0.5rem | |
--mantine-radius-lg | 0.625rem | |
--mantine-radius-xl | 0.75rem | |
--mantine-radius-2xl | 1rem | |
--mantine-radius-3xl | 1.5rem | |
--mantine-radius-4xl | 2rem | |
--mantine-radius-5xl | 2.5rem | |
--mantine-radius-full | 999px | |
--mantine-primary-color-0 | var(--mantine-color-ocean-0) | |
--mantine-primary-color-1 | var(--mantine-color-ocean-1) | |
--mantine-primary-color-2 | var(--mantine-color-ocean-2) | |
--mantine-primary-color-3 | var(--mantine-color-ocean-3) | |
--mantine-primary-color-4 | var(--mantine-color-ocean-4) | |
--mantine-primary-color-5 | var(--mantine-color-ocean-5) | |
--mantine-primary-color-6 | var(--mantine-color-ocean-6) | |
--mantine-primary-color-7 | var(--mantine-color-ocean-7) | |
--mantine-primary-color-8 | var(--mantine-color-ocean-8) | |
--mantine-primary-color-9 | var(--mantine-color-ocean-9) | |
--mantine-primary-color-10 | var(--mantine-color-ocean-10) | |
--mantine-primary-color-11 | var(--mantine-color-ocean-11) | |
--mantine-primary-color-12 | var(--mantine-color-ocean-12) | |
--mantine-primary-color-13 | var(--mantine-color-ocean-13) | |
--mantine-color-smokey-0 | #F9FAFB | |
--mantine-color-smokey-1 | #F3F4F7 | |
--mantine-color-smokey-2 | #EDEFF3 | |
--mantine-color-smokey-3 | #E4E7EC | |
--mantine-color-smokey-4 | #DEE1E8 | |
--mantine-color-smokey-5 | #CDD2DC | |
--mantine-color-smokey-6 | #BCC3D0 | |
--mantine-color-smokey-7 | #9BA6B9 | |
--mantine-color-smokey-8 | #7988A1 | |
--mantine-color-smokey-9 | #586A8A | |
--mantine-color-smokey-10 | #46556E | |
--mantine-color-smokey-11 | #354053 | |
--mantine-color-smokey-12 | #232A37 | |
--mantine-color-smokey-13 | #12151C | |
--mantine-color-midnight-0 | #F1F5FC | |
--mantine-color-midnight-1 | #F1F5FC | |
--mantine-color-midnight-2 | #F1F5FC | |
--mantine-color-midnight-3 | #F1F5FC | |
--mantine-color-midnight-4 | #E2EBF9 | |
--mantine-color-midnight-5 | #D4E1F7 | |
--mantine-color-midnight-6 | #C6D7F4 | |
--mantine-color-midnight-7 | #A9C2EE | |
--mantine-color-midnight-8 | #8DAEE9 | |
--mantine-color-midnight-9 | #709AE3 | |
--mantine-color-midnight-10 | #5B7FBD | |
--mantine-color-midnight-11 | #466497 | |
--mantine-color-midnight-12 | #314870 | |
--mantine-color-midnight-13 | #1C2D4A | |
--mantine-color-ocean-0 | #F6F9FD | |
--mantine-color-ocean-1 | #EEF3FC | |
--mantine-color-ocean-2 | #E7EEFA | |
--mantine-color-ocean-3 | #DDE7F8 | |
--mantine-color-ocean-4 | #CFDDF6 | |
--mantine-color-ocean-5 | #B8CCF1 | |
--mantine-color-ocean-6 | #A0BBED | |
--mantine-color-ocean-7 | #709AE3 | |
--mantine-color-ocean-8 | #4178DA | |
--mantine-color-ocean-9 | #1156D1 | |
--mantine-color-ocean-10 | #0E45A7 | |
--mantine-color-ocean-11 | #0A347D | |
--mantine-color-ocean-12 | #072254 | |
--mantine-color-ocean-13 | #03112A | |
--mantine-color-bluesky-0 | #F6FAFD | |
--mantine-color-bluesky-1 | #EEF4FC | |
--mantine-color-bluesky-2 | #E7F0FA | |
--mantine-color-bluesky-3 | #DDEAF8 | |
--mantine-color-bluesky-4 | #CFE2F6 | |
--mantine-color-bluesky-5 | #B7D3F1 | |
--mantine-color-bluesky-6 | #9FC4ED | |
--mantine-color-bluesky-7 | #6FA7E4 | |
--mantine-color-bluesky-8 | #3F89DB | |
--mantine-color-bluesky-9 | #116CD0 | |
--mantine-color-bluesky-10 | #0E56A6 | |
--mantine-color-bluesky-11 | #0A417D | |
--mantine-color-bluesky-12 | #072B53 | |
--mantine-color-bluesky-13 | #03162A | |
--mantine-color-emerald-0 | #F6FDF9 | |
--mantine-color-emerald-1 | #EEFCF4 | |
--mantine-color-emerald-2 | #E7FAEF | |
--mantine-color-emerald-3 | #DDF8E8 | |
--mantine-color-emerald-4 | #CFF6DF | |
--mantine-color-emerald-5 | #B8F1D0 | |
--mantine-color-emerald-6 | #A0EDC0 | |
--mantine-color-emerald-7 | #70E3A0 | |
--mantine-color-emerald-8 | #41DA81 | |
--mantine-color-emerald-9 | #11D161 | |
--mantine-color-emerald-10 | #0EA74E | |
--mantine-color-emerald-11 | #0A7D3A | |
--mantine-color-emerald-12 | #075427 | |
--mantine-color-emerald-13 | #032A13 | |
--mantine-color-peppermint-0 | #F6FDFC | |
--mantine-color-peppermint-1 | #EEFCF9 | |
--mantine-color-peppermint-2 | #E7FAF7 | |
--mantine-color-peppermint-3 | #DDF8F3 | |
--mantine-color-peppermint-4 | #CFF6EF | |
--mantine-color-peppermint-5 | #B8F1E7 | |
--mantine-color-peppermint-6 | #A0EDDF | |
--mantine-color-peppermint-7 | #70E3CE | |
--mantine-color-peppermint-8 | #41DABE | |
--mantine-color-peppermint-9 | #11D1AE | |
--mantine-color-peppermint-10 | #0EA78B | |
--mantine-color-peppermint-11 | #0A7D68 | |
--mantine-color-peppermint-12 | #075446 | |
--mantine-color-peppermint-13 | #032A23 | |
--mantine-color-sunflower-0 | #FEFCF6 | |
--mantine-color-sunflower-1 | #FEFBF1 | |
--mantine-color-sunflower-2 | #FDF9EA | |
--mantine-color-sunflower-3 | #FCF6DE | |
--mantine-color-sunflower-4 | #FCF3D4 | |
--mantine-color-sunflower-5 | #FAEDBF | |
--mantine-color-sunflower-6 | #F9E7AA | |
--mantine-color-sunflower-7 | #F5DC7F | |
--mantine-color-sunflower-8 | #F2D055 | |
--mantine-color-sunflower-9 | #EFC42A | |
--mantine-color-sunflower-10 | #BF9D22 | |
--mantine-color-sunflower-11 | #8F7619 | |
--mantine-color-sunflower-12 | #604E11 | |
--mantine-color-sunflower-13 | #302708 | |
--mantine-color-sunrise-0 | #FEFBF6 | |
--mantine-color-sunrise-1 | #FEF9F1 | |
--mantine-color-sunrise-2 | #FDF5EA | |
--mantine-color-sunrise-3 | #FCF0DE | |
--mantine-color-sunrise-4 | #FCECD4 | |
--mantine-color-sunrise-5 | #FAE3BF | |
--mantine-color-sunrise-6 | #F8D9AA | |
--mantine-color-sunrise-7 | #F5C67F | |
--mantine-color-sunrise-8 | #F1B355 | |
--mantine-color-sunrise-9 | #EEA02A | |
--mantine-color-sunrise-10 | #BE8022 | |
--mantine-color-sunrise-11 | #8F6019 | |
--mantine-color-sunrise-12 | #5F4011 | |
--mantine-color-sunrise-13 | #302008 | |
--mantine-color-sunset-0 | #FEF8F6 | |
--mantine-color-sunset-1 | #FEF5F1 | |
--mantine-color-sunset-2 | #FDF0EA | |
--mantine-color-sunset-3 | #FCE8DE | |
--mantine-color-sunset-4 | #FCE2D4 | |
--mantine-color-sunset-5 | #FAD3BF | |
--mantine-color-sunset-6 | #F9C4AA | |
--mantine-color-sunset-7 | #F5A77F | |
--mantine-color-sunset-8 | #F28955 | |
--mantine-color-sunset-9 | #EF6C2A | |
--mantine-color-sunset-10 | #BF5622 | |
--mantine-color-sunset-11 | #8F4119 | |
--mantine-color-sunset-12 | #602B11 | |
--mantine-color-sunset-13 | #301608 | |
--mantine-color-cherry-0 | #FDF6F6 | |
--mantine-color-cherry-1 | #FCEEEE | |
--mantine-color-cherry-2 | #FAE7E7 | |
--mantine-color-cherry-3 | #F8DDDD | |
--mantine-color-cherry-4 | #F6CFCF | |
--mantine-color-cherry-5 | #F1B7B7 | |
--mantine-color-cherry-6 | #ED9F9F | |
--mantine-color-cherry-7 | #E46F6F | |
--mantine-color-cherry-8 | #DB3F3F | |
--mantine-color-cherry-9 | #D01111 | |
--mantine-color-cherry-10 | #A60E0E | |
--mantine-color-cherry-11 | #7D0A0A | |
--mantine-color-cherry-12 | #530707 | |
--mantine-color-cherry-13 | #2A0303 | |
--mantine-color-raspberry-0 | #FDF6FA | |
--mantine-color-raspberry-1 | #FCEEF5 | |
--mantine-color-raspberry-2 | #FAE7F1 | |
--mantine-color-raspberry-3 | #F8DDEB | |
--mantine-color-raspberry-4 | #F6CFE3 | |
--mantine-color-raspberry-5 | #F1B7D4 | |
--mantine-color-raspberry-6 | #ED9FC6 | |
--mantine-color-raspberry-7 | #E46FAA | |
--mantine-color-raspberry-8 | #DB3F8D | |
--mantine-color-raspberry-9 | #D01171 | |
--mantine-color-raspberry-10 | #A60E5A | |
--mantine-color-raspberry-11 | #7D0A44 | |
--mantine-color-raspberry-12 | #53072D | |
--mantine-color-raspberry-13 | #2A0317 | |
--mantine-color-bubblegum-0 | #FDF6FD | |
--mantine-color-bubblegum-1 | #FCEEFB | |
--mantine-color-bubblegum-2 | #FAE7FA | |
--mantine-color-bubblegum-3 | #F8DDF7 | |
--mantine-color-bubblegum-4 | #F6CFF4 | |
--mantine-color-bubblegum-5 | #F1B8EF | |
--mantine-color-bubblegum-6 | #ED9FDF | |
--mantine-color-bubblegum-7 | #E46FDF | |
--mantine-color-bubblegum-8 | #DB3FD4 | |
--mantine-color-bubblegum-9 | #D011C8 | |
--mantine-color-bubblegum-10 | #A60EA0 | |
--mantine-color-bubblegum-11 | #7D0A78 | |
--mantine-color-bubblegum-12 | #530750 | |
--mantine-color-bubblegum-13 | #2A0328 | |
--mantine-color-lavender-0 | #FAF6FD | |
--mantine-color-lavender-1 | #F5EEFC | |
--mantine-color-lavender-2 | #F1E7FA | |
--mantine-color-lavender-3 | #EBDDF8 | |
--mantine-color-lavender-4 | #E3CFF6 | |
--mantine-color-lavender-5 | #D5B8F1 | |
--mantine-color-lavender-6 | #C7A0EC | |
--mantine-color-lavender-7 | #AC6FE4 | |
--mantine-color-lavender-8 | #903FDB | |
--mantine-color-lavender-9 | #7411D0 | |
--mantine-color-lavender-10 | #5D0EA6 | |
--mantine-color-lavender-11 | #460A7D | |
--mantine-color-lavender-12 | #2E0753 | |
--mantine-color-lavender-13 | #17032A | |
--mantine-h1-font-size | 2rem | |
--mantine-h1-line-height | 1.5 | |
--mantine-h1-font-weight | 700 | |
--mantine-h2-font-size | 1.75rem | |
--mantine-h2-line-height | 1.5 | |
--mantine-h2-font-weight | 600 | |
--mantine-h3-font-size | 1.5rem | |
--mantine-h3-line-height | 1.5 | |
--mantine-h3-font-weight | 700 | |
--mantine-h4-font-size | 1.5rem | |
--mantine-h4-line-height | 1.5 | |
--mantine-h4-font-weight | 600 | |
--mantine-h5-font-size | 1rem | |
--mantine-h5-line-height | 1.5 | |
--mantine-h5-font-weight | 700 | |
--mantine-h6-font-size | 1rem | |
--mantine-h6-line-height | 1.5 | |
--mantine-h6-font-weight | 600 |
Light color scheme only variables
--mantine-primary-color-contrast | var(--mantine-color-white) | |
--mantine-color-bright | var(--mantine-color-black) | |
--mantine-color-text | var(--mantine-color-smokey-13) | |
--mantine-color-body | #fff | |
--mantine-color-error | var(--mantine-color-cherry-10) | |
--mantine-color-placeholder | var(--mantine-color-smokey-5) | |
--mantine-color-anchor | var(--mantine-color-ocean-9) | |
--mantine-color-default | var(--mantine-color-white) | |
--mantine-color-default-hover | var(--mantine-color-smokey-0) | |
--mantine-color-default-color | var(--mantine-color-black) | |
--mantine-color-default-border | var(--mantine-color-smokey-4) | |
--mantine-color-dimmed | var(--mantine-color-smokey-6) | |
--mantine-color-disabled | var(--mantine-color-smokey-2) | |
--mantine-color-disabled-color | var(--mantine-color-smokey-5) | |
--mantine-color-disabled-border | var(--mantine-color-smokey-3) | |
--mantine-color-smokey-text | var(--mantine-color-smokey-filled) | |
--mantine-color-smokey-filled | var(--mantine-color-smokey-9) | |
--mantine-color-smokey-filled-hover | var(--mantine-color-smokey-5) | |
--mantine-color-smokey-filled-active | var(--mantine-color-smokey-10) | |
--mantine-color-smokey-light | var(--mantine-color-smokey-3) | |
--mantine-color-smokey-light-hover | var(--mantine-color-smokey-2) | |
--mantine-color-smokey-light-color | var(--mantine-color-smokey-9) | |
--mantine-color-smokey-light-active | var(--mantine-color-smokey-5) | |
--mantine-color-smokey-outline | var(--mantine-color-smokey-9) | |
--mantine-color-smokey-outline-hover | var(--mantine-color-smokey-2) | |
--mantine-color-smokey-outline-active | var(--mantine-color-smokey-5) | |
--mantine-color-midnight-text | var(--mantine-color-midnight-filled) | |
--mantine-color-midnight-filled | var(--mantine-color-midnight-9) | |
--mantine-color-midnight-filled-hover | var(--mantine-color-midnight-5) | |
--mantine-color-midnight-filled-active | var(--mantine-color-midnight-10) | |
--mantine-color-midnight-light | var(--mantine-color-midnight-3) | |
--mantine-color-midnight-light-hover | var(--mantine-color-midnight-2) | |
--mantine-color-midnight-light-color | var(--mantine-color-midnight-9) | |
--mantine-color-midnight-light-active | var(--mantine-color-midnight-5) | |
--mantine-color-midnight-outline | var(--mantine-color-midnight-9) | |
--mantine-color-midnight-outline-hover | var(--mantine-color-midnight-2) | |
--mantine-color-midnight-outline-active | var(--mantine-color-midnight-5) | |
--mantine-color-ocean-text | var(--mantine-color-ocean-filled) | |
--mantine-color-ocean-filled | var(--mantine-color-ocean-9) | |
--mantine-color-ocean-filled-hover | var(--mantine-color-ocean-5) | |
--mantine-color-ocean-filled-active | var(--mantine-color-ocean-10) | |
--mantine-color-ocean-light | var(--mantine-color-ocean-3) | |
--mantine-color-ocean-light-hover | var(--mantine-color-ocean-2) | |
--mantine-color-ocean-light-color | var(--mantine-color-ocean-9) | |
--mantine-color-ocean-light-active | var(--mantine-color-ocean-5) | |
--mantine-color-ocean-outline | var(--mantine-color-ocean-9) | |
--mantine-color-ocean-outline-hover | var(--mantine-color-ocean-2) | |
--mantine-color-ocean-outline-active | var(--mantine-color-ocean-5) | |
--mantine-color-bluesky-text | var(--mantine-color-bluesky-filled) | |
--mantine-color-bluesky-filled | var(--mantine-color-bluesky-9) | |
--mantine-color-bluesky-filled-hover | var(--mantine-color-bluesky-5) | |
--mantine-color-bluesky-filled-active | var(--mantine-color-bluesky-10) | |
--mantine-color-bluesky-light | var(--mantine-color-bluesky-3) | |
--mantine-color-bluesky-light-hover | var(--mantine-color-bluesky-2) | |
--mantine-color-bluesky-light-color | var(--mantine-color-bluesky-9) | |
--mantine-color-bluesky-light-active | var(--mantine-color-bluesky-5) | |
--mantine-color-bluesky-outline | var(--mantine-color-bluesky-9) | |
--mantine-color-bluesky-outline-hover | var(--mantine-color-bluesky-2) | |
--mantine-color-bluesky-outline-active | var(--mantine-color-bluesky-5) | |
--mantine-color-emerald-text | var(--mantine-color-emerald-filled) | |
--mantine-color-emerald-filled | var(--mantine-color-emerald-9) | |
--mantine-color-emerald-filled-hover | var(--mantine-color-emerald-5) | |
--mantine-color-emerald-filled-active | var(--mantine-color-emerald-10) | |
--mantine-color-emerald-light | var(--mantine-color-emerald-3) | |
--mantine-color-emerald-light-hover | var(--mantine-color-emerald-2) | |
--mantine-color-emerald-light-color | var(--mantine-color-emerald-9) | |
--mantine-color-emerald-light-active | var(--mantine-color-emerald-5) | |
--mantine-color-emerald-outline | var(--mantine-color-emerald-9) | |
--mantine-color-emerald-outline-hover | var(--mantine-color-emerald-2) | |
--mantine-color-emerald-outline-active | var(--mantine-color-emerald-5) | |
--mantine-color-peppermint-text | var(--mantine-color-peppermint-filled) | |
--mantine-color-peppermint-filled | var(--mantine-color-peppermint-9) | |
--mantine-color-peppermint-filled-hover | var(--mantine-color-peppermint-5) | |
--mantine-color-peppermint-filled-active | var(--mantine-color-peppermint-10) | |
--mantine-color-peppermint-light | var(--mantine-color-peppermint-3) | |
--mantine-color-peppermint-light-hover | var(--mantine-color-peppermint-2) | |
--mantine-color-peppermint-light-color | var(--mantine-color-peppermint-9) | |
--mantine-color-peppermint-light-active | var(--mantine-color-peppermint-5) | |
--mantine-color-peppermint-outline | var(--mantine-color-peppermint-9) | |
--mantine-color-peppermint-outline-hover | var(--mantine-color-peppermint-2) | |
--mantine-color-peppermint-outline-active | var(--mantine-color-peppermint-5) | |
--mantine-color-sunflower-text | var(--mantine-color-sunflower-filled) | |
--mantine-color-sunflower-filled | var(--mantine-color-sunflower-9) | |
--mantine-color-sunflower-filled-hover | var(--mantine-color-sunflower-5) | |
--mantine-color-sunflower-filled-active | var(--mantine-color-sunflower-10) | |
--mantine-color-sunflower-light | var(--mantine-color-sunflower-3) | |
--mantine-color-sunflower-light-hover | var(--mantine-color-sunflower-2) | |
--mantine-color-sunflower-light-color | var(--mantine-color-sunflower-9) | |
--mantine-color-sunflower-light-active | var(--mantine-color-sunflower-5) | |
--mantine-color-sunflower-outline | var(--mantine-color-sunflower-9) | |
--mantine-color-sunflower-outline-hover | var(--mantine-color-sunflower-2) | |
--mantine-color-sunflower-outline-active | var(--mantine-color-sunflower-5) | |
--mantine-color-sunrise-text | var(--mantine-color-sunrise-filled) | |
--mantine-color-sunrise-filled | var(--mantine-color-sunrise-9) | |
--mantine-color-sunrise-filled-hover | var(--mantine-color-sunrise-5) | |
--mantine-color-sunrise-filled-active | var(--mantine-color-sunrise-10) | |
--mantine-color-sunrise-light | var(--mantine-color-sunrise-3) | |
--mantine-color-sunrise-light-hover | var(--mantine-color-sunrise-2) | |
--mantine-color-sunrise-light-color | var(--mantine-color-sunrise-9) | |
--mantine-color-sunrise-light-active | var(--mantine-color-sunrise-5) | |
--mantine-color-sunrise-outline | var(--mantine-color-sunrise-9) | |
--mantine-color-sunrise-outline-hover | var(--mantine-color-sunrise-2) | |
--mantine-color-sunrise-outline-active | var(--mantine-color-sunrise-5) | |
--mantine-color-sunset-text | var(--mantine-color-sunset-filled) | |
--mantine-color-sunset-filled | var(--mantine-color-sunset-9) | |
--mantine-color-sunset-filled-hover | var(--mantine-color-sunset-5) | |
--mantine-color-sunset-filled-active | var(--mantine-color-sunset-10) | |
--mantine-color-sunset-light | var(--mantine-color-sunset-3) | |
--mantine-color-sunset-light-hover | var(--mantine-color-sunset-2) | |
--mantine-color-sunset-light-color | var(--mantine-color-sunset-9) | |
--mantine-color-sunset-light-active | var(--mantine-color-sunset-5) | |
--mantine-color-sunset-outline | var(--mantine-color-sunset-9) | |
--mantine-color-sunset-outline-hover | var(--mantine-color-sunset-2) | |
--mantine-color-sunset-outline-active | var(--mantine-color-sunset-5) | |
--mantine-color-cherry-text | var(--mantine-color-cherry-filled) | |
--mantine-color-cherry-filled | var(--mantine-color-cherry-9) | |
--mantine-color-cherry-filled-hover | var(--mantine-color-cherry-5) | |
--mantine-color-cherry-filled-active | var(--mantine-color-cherry-10) | |
--mantine-color-cherry-light | var(--mantine-color-cherry-3) | |
--mantine-color-cherry-light-hover | var(--mantine-color-cherry-2) | |
--mantine-color-cherry-light-color | var(--mantine-color-cherry-9) | |
--mantine-color-cherry-light-active | var(--mantine-color-cherry-5) | |
--mantine-color-cherry-outline | var(--mantine-color-cherry-9) | |
--mantine-color-cherry-outline-hover | var(--mantine-color-cherry-2) | |
--mantine-color-cherry-outline-active | var(--mantine-color-cherry-5) | |
--mantine-color-raspberry-text | var(--mantine-color-raspberry-filled) | |
--mantine-color-raspberry-filled | var(--mantine-color-raspberry-9) | |
--mantine-color-raspberry-filled-hover | var(--mantine-color-raspberry-5) | |
--mantine-color-raspberry-filled-active | var(--mantine-color-raspberry-10) | |
--mantine-color-raspberry-light | var(--mantine-color-raspberry-3) | |
--mantine-color-raspberry-light-hover | var(--mantine-color-raspberry-2) | |
--mantine-color-raspberry-light-color | var(--mantine-color-raspberry-9) | |
--mantine-color-raspberry-light-active | var(--mantine-color-raspberry-5) | |
--mantine-color-raspberry-outline | var(--mantine-color-raspberry-9) | |
--mantine-color-raspberry-outline-hover | var(--mantine-color-raspberry-2) | |
--mantine-color-raspberry-outline-active | var(--mantine-color-raspberry-5) | |
--mantine-color-bubblegum-text | var(--mantine-color-bubblegum-filled) | |
--mantine-color-bubblegum-filled | var(--mantine-color-bubblegum-9) | |
--mantine-color-bubblegum-filled-hover | var(--mantine-color-bubblegum-5) | |
--mantine-color-bubblegum-filled-active | var(--mantine-color-bubblegum-10) | |
--mantine-color-bubblegum-light | var(--mantine-color-bubblegum-3) | |
--mantine-color-bubblegum-light-hover | var(--mantine-color-bubblegum-2) | |
--mantine-color-bubblegum-light-color | var(--mantine-color-bubblegum-9) | |
--mantine-color-bubblegum-light-active | var(--mantine-color-bubblegum-5) | |
--mantine-color-bubblegum-outline | var(--mantine-color-bubblegum-9) | |
--mantine-color-bubblegum-outline-hover | var(--mantine-color-bubblegum-2) | |
--mantine-color-bubblegum-outline-active | var(--mantine-color-bubblegum-5) | |
--mantine-color-lavender-text | var(--mantine-color-lavender-filled) | |
--mantine-color-lavender-filled | var(--mantine-color-lavender-9) | |
--mantine-color-lavender-filled-hover | var(--mantine-color-lavender-5) | |
--mantine-color-lavender-filled-active | var(--mantine-color-lavender-10) | |
--mantine-color-lavender-light | var(--mantine-color-lavender-3) | |
--mantine-color-lavender-light-hover | var(--mantine-color-lavender-2) | |
--mantine-color-lavender-light-color | var(--mantine-color-lavender-9) | |
--mantine-color-lavender-light-active | var(--mantine-color-lavender-5) | |
--mantine-color-lavender-outline | var(--mantine-color-lavender-9) | |
--mantine-color-lavender-outline-hover | var(--mantine-color-lavender-2) | |
--mantine-color-lavender-outline-active | var(--mantine-color-lavender-5) |
Dark color scheme only variables
--mantine-primary-color-contrast | var(--mantine-color-white) | |
--mantine-color-bright | var(--mantine-color-white) | |
--mantine-color-text | var(--mantine-color-smokey-5) | |
--mantine-color-body | var(--mantine-color-smokey-12) | |
--mantine-color-error | var(--mantine-color-cherry-12) | |
--mantine-color-placeholder | var(--mantine-color-smokey-8) | |
--mantine-color-anchor | var(--mantine-color-ocean-4) | |
--mantine-color-default | var(--mantine-color-smokey-11) | |
--mantine-color-default-hover | var(--mantine-color-smokey-10) | |
--mantine-color-default-color | var(--mantine-color-white) | |
--mantine-color-default-border | var(--mantine-color-smokey-9) | |
--mantine-color-dimmed | var(--mantine-color-smokey-7) | |
--mantine-color-disabled | var(--mantine-color-smokey-11) | |
--mantine-color-disabled-color | var(--mantine-color-smokey-8) | |
--mantine-color-disabled-border | var(--mantine-color-smokey-11) | |
--mantine-color-smokey-text | var(--mantine-color-smokey-4) | |
--mantine-color-smokey-filled | var(--mantine-color-smokey-11) | |
--mantine-color-smokey-filled-hover | var(--mantine-color-smokey-12) | |
--mantine-color-smokey-filled-active | var(--mantine-color-smokey-11) | |
--mantine-color-smokey-light | rgba(88, 106, 138, 0.15) | |
--mantine-color-smokey-light-hover | rgba(88, 106, 138, 0.2) | |
--mantine-color-smokey-light-active | var(--mantine-color-smokey-7) | |
--mantine-color-smokey-light-color | var(--mantine-color-smokey-6) | |
--mantine-color-smokey-outline | var(--mantine-color-smokey-7) | |
--mantine-color-smokey-outline-hover | rgba(155, 166, 185, 0.05) | |
--mantine-color-smokey-outline-active | var(--mantine-color-smokey-13) | |
--mantine-color-midnight-text | var(--mantine-color-midnight-4) | |
--mantine-color-midnight-filled | var(--mantine-color-midnight-11) | |
--mantine-color-midnight-filled-hover | var(--mantine-color-midnight-12) | |
--mantine-color-midnight-filled-active | var(--mantine-color-midnight-11) | |
--mantine-color-midnight-light | rgba(112, 154, 227, 0.15) | |
--mantine-color-midnight-light-hover | rgba(112, 154, 227, 0.2) | |
--mantine-color-midnight-light-active | var(--mantine-color-midnight-7) | |
--mantine-color-midnight-light-color | var(--mantine-color-midnight-6) | |
--mantine-color-midnight-outline | var(--mantine-color-midnight-7) | |
--mantine-color-midnight-outline-hover | rgba(169, 194, 238, 0.05) | |
--mantine-color-midnight-outline-active | var(--mantine-color-midnight-13) | |
--mantine-color-ocean-text | var(--mantine-color-ocean-4) | |
--mantine-color-ocean-filled | var(--mantine-color-ocean-11) | |
--mantine-color-ocean-filled-hover | var(--mantine-color-ocean-12) | |
--mantine-color-ocean-filled-active | var(--mantine-color-ocean-11) | |
--mantine-color-ocean-light | rgba(17, 86, 209, 0.15) | |
--mantine-color-ocean-light-hover | rgba(17, 86, 209, 0.2) | |
--mantine-color-ocean-light-active | var(--mantine-color-ocean-7) | |
--mantine-color-ocean-light-color | var(--mantine-color-ocean-6) | |
--mantine-color-ocean-outline | var(--mantine-color-ocean-7) | |
--mantine-color-ocean-outline-hover | rgba(112, 154, 227, 0.05) | |
--mantine-color-ocean-outline-active | var(--mantine-color-ocean-13) | |
--mantine-color-bluesky-text | var(--mantine-color-bluesky-4) | |
--mantine-color-bluesky-filled | var(--mantine-color-bluesky-11) | |
--mantine-color-bluesky-filled-hover | var(--mantine-color-bluesky-12) | |
--mantine-color-bluesky-filled-active | var(--mantine-color-bluesky-11) | |
--mantine-color-bluesky-light | rgba(17, 108, 208, 0.15) | |
--mantine-color-bluesky-light-hover | rgba(17, 108, 208, 0.2) | |
--mantine-color-bluesky-light-active | var(--mantine-color-bluesky-7) | |
--mantine-color-bluesky-light-color | var(--mantine-color-bluesky-6) | |
--mantine-color-bluesky-outline | var(--mantine-color-bluesky-7) | |
--mantine-color-bluesky-outline-hover | rgba(111, 167, 228, 0.05) | |
--mantine-color-bluesky-outline-active | var(--mantine-color-bluesky-13) | |
--mantine-color-emerald-text | var(--mantine-color-emerald-4) | |
--mantine-color-emerald-filled | var(--mantine-color-emerald-11) | |
--mantine-color-emerald-filled-hover | var(--mantine-color-emerald-12) | |
--mantine-color-emerald-filled-active | var(--mantine-color-emerald-11) | |
--mantine-color-emerald-light | rgba(17, 209, 97, 0.15) | |
--mantine-color-emerald-light-hover | rgba(17, 209, 97, 0.2) | |
--mantine-color-emerald-light-active | var(--mantine-color-emerald-7) | |
--mantine-color-emerald-light-color | var(--mantine-color-emerald-6) | |
--mantine-color-emerald-outline | var(--mantine-color-emerald-7) | |
--mantine-color-emerald-outline-hover | rgba(112, 227, 160, 0.05) | |
--mantine-color-emerald-outline-active | var(--mantine-color-emerald-13) | |
--mantine-color-peppermint-text | var(--mantine-color-peppermint-4) | |
--mantine-color-peppermint-filled | var(--mantine-color-peppermint-11) | |
--mantine-color-peppermint-filled-hover | var(--mantine-color-peppermint-12) | |
--mantine-color-peppermint-filled-active | var(--mantine-color-peppermint-11) | |
--mantine-color-peppermint-light | rgba(17, 209, 174, 0.15) | |
--mantine-color-peppermint-light-hover | rgba(17, 209, 174, 0.2) | |
--mantine-color-peppermint-light-active | var(--mantine-color-peppermint-7) | |
--mantine-color-peppermint-light-color | var(--mantine-color-peppermint-6) | |
--mantine-color-peppermint-outline | var(--mantine-color-peppermint-7) | |
--mantine-color-peppermint-outline-hover | rgba(112, 227, 206, 0.05) | |
--mantine-color-peppermint-outline-active | var(--mantine-color-peppermint-13) | |
--mantine-color-sunflower-text | var(--mantine-color-sunflower-4) | |
--mantine-color-sunflower-filled | var(--mantine-color-sunflower-11) | |
--mantine-color-sunflower-filled-hover | var(--mantine-color-sunflower-12) | |
--mantine-color-sunflower-filled-active | var(--mantine-color-sunflower-11) | |
--mantine-color-sunflower-light | rgba(239, 196, 42, 0.15) | |
--mantine-color-sunflower-light-hover | rgba(239, 196, 42, 0.2) | |
--mantine-color-sunflower-light-active | var(--mantine-color-sunflower-7) | |
--mantine-color-sunflower-light-color | var(--mantine-color-sunflower-6) | |
--mantine-color-sunflower-outline | var(--mantine-color-sunflower-7) | |
--mantine-color-sunflower-outline-hover | rgba(245, 220, 127, 0.05) | |
--mantine-color-sunflower-outline-active | var(--mantine-color-sunflower-13) | |
--mantine-color-sunrise-text | var(--mantine-color-sunrise-4) | |
--mantine-color-sunrise-filled | var(--mantine-color-sunrise-11) | |
--mantine-color-sunrise-filled-hover | var(--mantine-color-sunrise-12) | |
--mantine-color-sunrise-filled-active | var(--mantine-color-sunrise-11) | |
--mantine-color-sunrise-light | rgba(238, 160, 42, 0.15) | |
--mantine-color-sunrise-light-hover | rgba(238, 160, 42, 0.2) | |
--mantine-color-sunrise-light-active | var(--mantine-color-sunrise-7) | |
--mantine-color-sunrise-light-color | var(--mantine-color-sunrise-6) | |
--mantine-color-sunrise-outline | var(--mantine-color-sunrise-7) | |
--mantine-color-sunrise-outline-hover | rgba(245, 198, 127, 0.05) | |
--mantine-color-sunrise-outline-active | var(--mantine-color-sunrise-13) | |
--mantine-color-sunset-text | var(--mantine-color-sunset-4) | |
--mantine-color-sunset-filled | var(--mantine-color-sunset-11) | |
--mantine-color-sunset-filled-hover | var(--mantine-color-sunset-12) | |
--mantine-color-sunset-filled-active | var(--mantine-color-sunset-11) | |
--mantine-color-sunset-light | rgba(239, 108, 42, 0.15) | |
--mantine-color-sunset-light-hover | rgba(239, 108, 42, 0.2) | |
--mantine-color-sunset-light-active | var(--mantine-color-sunset-7) | |
--mantine-color-sunset-light-color | var(--mantine-color-sunset-6) | |
--mantine-color-sunset-outline | var(--mantine-color-sunset-7) | |
--mantine-color-sunset-outline-hover | rgba(245, 167, 127, 0.05) | |
--mantine-color-sunset-outline-active | var(--mantine-color-sunset-13) | |
--mantine-color-cherry-text | var(--mantine-color-cherry-4) | |
--mantine-color-cherry-filled | var(--mantine-color-cherry-11) | |
--mantine-color-cherry-filled-hover | var(--mantine-color-cherry-12) | |
--mantine-color-cherry-filled-active | var(--mantine-color-cherry-11) | |
--mantine-color-cherry-light | rgba(208, 17, 17, 0.15) | |
--mantine-color-cherry-light-hover | rgba(208, 17, 17, 0.2) | |
--mantine-color-cherry-light-active | var(--mantine-color-cherry-7) | |
--mantine-color-cherry-light-color | var(--mantine-color-cherry-6) | |
--mantine-color-cherry-outline | var(--mantine-color-cherry-7) | |
--mantine-color-cherry-outline-hover | rgba(228, 111, 111, 0.05) | |
--mantine-color-cherry-outline-active | var(--mantine-color-cherry-13) | |
--mantine-color-raspberry-text | var(--mantine-color-raspberry-4) | |
--mantine-color-raspberry-filled | var(--mantine-color-raspberry-11) | |
--mantine-color-raspberry-filled-hover | var(--mantine-color-raspberry-12) | |
--mantine-color-raspberry-filled-active | var(--mantine-color-raspberry-11) | |
--mantine-color-raspberry-light | rgba(208, 17, 113, 0.15) | |
--mantine-color-raspberry-light-hover | rgba(208, 17, 113, 0.2) | |
--mantine-color-raspberry-light-active | var(--mantine-color-raspberry-7) | |
--mantine-color-raspberry-light-color | var(--mantine-color-raspberry-6) | |
--mantine-color-raspberry-outline | var(--mantine-color-raspberry-7) | |
--mantine-color-raspberry-outline-hover | rgba(228, 111, 170, 0.05) | |
--mantine-color-raspberry-outline-active | var(--mantine-color-raspberry-13) | |
--mantine-color-bubblegum-text | var(--mantine-color-bubblegum-4) | |
--mantine-color-bubblegum-filled | var(--mantine-color-bubblegum-11) | |
--mantine-color-bubblegum-filled-hover | var(--mantine-color-bubblegum-12) | |
--mantine-color-bubblegum-filled-active | var(--mantine-color-bubblegum-11) | |
--mantine-color-bubblegum-light | rgba(208, 17, 200, 0.15) | |
--mantine-color-bubblegum-light-hover | rgba(208, 17, 200, 0.2) | |
--mantine-color-bubblegum-light-active | var(--mantine-color-bubblegum-7) | |
--mantine-color-bubblegum-light-color | var(--mantine-color-bubblegum-6) | |
--mantine-color-bubblegum-outline | var(--mantine-color-bubblegum-7) | |
--mantine-color-bubblegum-outline-hover | rgba(228, 111, 223, 0.05) | |
--mantine-color-bubblegum-outline-active | var(--mantine-color-bubblegum-13) | |
--mantine-color-lavender-text | var(--mantine-color-lavender-4) | |
--mantine-color-lavender-filled | var(--mantine-color-lavender-11) | |
--mantine-color-lavender-filled-hover | var(--mantine-color-lavender-12) | |
--mantine-color-lavender-filled-active | var(--mantine-color-lavender-11) | |
--mantine-color-lavender-light | rgba(116, 17, 208, 0.15) | |
--mantine-color-lavender-light-hover | rgba(116, 17, 208, 0.2) | |
--mantine-color-lavender-light-active | var(--mantine-color-lavender-7) | |
--mantine-color-lavender-light-color | var(--mantine-color-lavender-6) | |
--mantine-color-lavender-outline | var(--mantine-color-lavender-7) | |
--mantine-color-lavender-outline-hover | rgba(172, 111, 228, 0.05) | |
--mantine-color-lavender-outline-active | var(--mantine-color-lavender-13) |