Theme Properties
Note: these properties are likely to change often while we pin down which ones are required for theming.
| Name | Default | Description |
|---|---|---|
| --element-margin | 1.5rem | The margin between elements. |
| --element-padding | 2rem | The padding within elements. |
| --border-radius | 2px | The border radius. |
| --border-color | #d2d2d2 | The border color. |
| --light-border-color | #aaaaaa | The light border color. |
| --icon-size | 1.5rem | The size of icons. |
| --font-size | 1.4rem | The base font size. |
| --font-size-small | 1.1rem | The small font size. |
| --font-size-large | 1.7rem | The large font size. |
| --font-size-title | 1.6rem | The font size for titles (e.g. in TabGroup and Accordion headers). |
| --line-height | 1.4 | The base line height. |
| --body-back-color | #ffffff | The background color of the body. |
| --body-text-color | #222222 | The text color of the body. |
| --light-back-color | #fafafa | A light back color. |
| --middle-back-color | #e5e5e5 | A middle back color. |
| --dark-back-color | #888888 | A dark back color. |
| --link-color | #0265b7 | The color of links. |
| --link-hover-color | #0265b7 | The hover color for links. |
| --button-back-color | #ffffff | The background color of buttons used in components. |
| --button-text-color | rgba(0, 0, 0, 0.7) | The text color of buttons used in components. |
| --button-hover-color | #cccccc | The hover color for buttons used in components. |
| --list-back-color | #ffffff | The background color of drop-down lists. |
| --list-text-color | rgba(0, 0, 0, 0.7) | The text color of drop-down lists. |
| --select-color | #3396ff | The select color of drop-down lists and buttons. |
| --select-text-color | #ffffff | The select text color of drop-down lists and buttons. |
| --focus-color | #8fc5ff | The color of focused inputs. |
| --active-color | #ffa500 | The color of active sections (e.g. in TabGroups and the NavBar). |
| --mark-back-color | #ffff00 | The background color of highlight marks. |
| --mark-text-color | #222222 | The text color of highlight marks. |
| --primary-color | #ff0066 | The primary color, which you can change to your brand color. |
| --primary-text-color | #ffffff | The text color of primary elements. |
| --primary-hover-color | #cc0052 | The hover color for primary elements. |
| --light-primary-color | #fff2f7 | The color of light primary elements. |
| --light-primary-text-color | #c70050 | The text color of light primary elements. |
| --light-primary-border-color | #ff0066 | The border color of light primary elements. |
| --info-color | #4d90fe | The info color. |
| --info-text-color | #ffffff | The text color of info elements. |
| --info-hover-color | #0b67fe | The hover color for info elements. |
| --light-info-color | #f6f9ff | The color of light info elements. |
| --light-info-text-color | #0563fe | The text color of light info elements. |
| --light-info-border-color | #4d90fe | The border color of light info elements. |
| --success-color | #00a852 | The success color. |
| --success-text-color | #ffffff | The text color of success elements. |
| --success-hover-color | #008642 | The hover color for success elements. |
| --light-success-color | #eefff6 | The color of light success elements. |
| --light-success-text-color | #008340 | The text color of light success elements. |
| --light-success-border-color | #00a852 | The border color of light success elements. |
| --warning-color | #f3c42e | The warning color. |
| --warning-text-color | rgba(0, 0, 0, 0.7) | The text color of warning elements. |
| --warning-hover-color | #dba90d | The hover color for warning elements. |
| --light-warning-color | #fefcf5 | The color of light warning elements. |
| --light-warning-text-color | #b28a0a | The text color of light warning elements. |
| --light-warning-border-color | #f3c42e | The border color of light warning elements. |
| --danger-color | #ee2e24 | The danger color. |
| --danger-text-color | #ffffff | The text color of danger elements. |
| --danger-hover-color | #cb1910 | The hover color for danger elements. |
| --light-danger-color | #fef5f4 | The color of light danger elements. |
| --light-danger-text-color | #c6180f | The text color of light danger elements. |
| --light-danger-border-color | #ee2e24 | The border color of light danger elements. |
| --confirm-color | #3396ff | The confirm color. |
| --confirm-text-color | #ffffff | The text color of confirm elements. |
| --confirm-hover-color | #0077f5 | The hover color for confirm elements. |
| --cancel-color | #949494 | The cancel color. |
| --cancel-text-color | #ffffff | The text color of cancel elements. |
| --cancel-hover-color | #767676 | The hover color for cancel elements. |
| --disabled-color | #f2f2f2 | The color of disabled elements. |
| --disabled-text-color | #c2c2c2 | The text color of disabled elements. |
| --header-back-color | #fafafa | The background color of the header. |
| --header-text-color | rgba(0, 0, 0, 0.7) | The text color of the header. |
| --header-line-height | 4rem | The line height of the header. |
| --footer-back-color | #fafafa | The background color of the footer. |
| --footer-text-color | rgba(0, 0, 0, 0.7) | The text color of the footer. |
| --footer-line-height | 4rem | The line height of the footer. |
| --nav-bar-item-back-color | transparent | The background color of a nav bar item. |
| --nav-bar-item-text-color | #222222 | The text color of a nav bar item. |
| --nav-bar-item-hover-back-color | rgba(0, 0, 0, 0.1) | The hover color for a nav bar item. |
| --nav-bar-item-hover-text-color | #222222 | The hover text color for a nav bar item. |
| --input-back-color | #ffffff | The background color of inputs. |
| --input-text-color | #000000 | The text color of inputs. |
| --input-height | 3.2rem | The height of inputs. |
| --input-width | 32rem | The width of inputs. |
| --label-text-color | #777777 | The text color of labels. |
| --label-width | 16rem | The width of labels. |
Script Only
If theming via the Svelte Toolkit script, you can set some additional properties:
| Name | Default | Description |
|---|---|---|
| --small-screen | 480px | The width of a small screen as used in media queries. |
| --medium-screen | 760px | The width of a medium screen as used in media queries. |
| --large-screen | 1040px | The width of a large screen as used in media queries. |
| --xlarge-screen | 1320px | The width of an extra-large screen as used in media queries. |