Mable themes should stick to a strict layout guideline, and should follow other guidelines to make debugging easier.
Themes are placed in the themes/
directory. They have both a file and a folder, themename.css
and themename/
. Themes may also have an optional themename-classes.txt
to explain what special functionality the theme may have.
Here's a layout of a sample theme:
. ├── themename │ ├── somepattern.svg │ ├── fontname │ │ ├── fontname-700italic.woff │ │ ├── fontname-700.woff │ │ ├── fontname-italic.woff │ │ └── fontname-regular.woff │ └── fontname.css ├── themename-classes.txt └── themename.css
You should always follow these rules:
themename.css
to avoid making it less usable.
I highly recommend looking through my own theme to understand more about the layout. If you have experience in CSS this will make sense very quickly.
Most of Mable themeing is just switching up variables. You can and should change other selectors, but Mable has been designed so that just a few variables determine what a site looks like.
This section doesn't tell you what to do, just what you might want to do. This section also does not includes variables that you should not change.
--theme-color
This should be a vibrant accent color that is used sparringly. What color is used for classes like .section-theme
.
Default: #32a365
--black-color
What color is used for classes like .section-black
.
Default: #000000
--dark-color
This should be very dark but not black. What color is used for classes like .section-dark
.
Default: #202020
--middle-color-1
through --middle-color-8
This should form be a gradient between --dark-color
and --light-color
. This is used for things such as auto-dark mode.
--light-color
This should be very light but not white. What color is used for classes like .section-light
.
Default: #f5f5f5
--white-color
What color is used for classes like .section-white
.
Default: #ffffff
--match-with-theme-color
Mable will use this value to assign a foreground or background color to things like .section-theme
.
Default: var(--light-color)
--match-with-theme-color-dark
Mable will use this value to assign a foreground or background color to things like .section-theme
but when in dark mode.
Default: var(--match-with-theme-color)
--match-with-light
Mable will use this value to assign a foreground or background color to things like .section-light
.
Default: var(--dark-color)
--match-with-dark
Mable will use this value to assign a foreground or background color to things like .section-dark
.
Default: var(--light-color)
--title-font
The font used for titles.
Default: "Noto Sans Mono", sans-serif
--title-weight
The font weight of titles.
Default: 700
--title-size
The size of the biggest title.
Default: 56
--body-font
The font used for everything by default.
Default: "Montserrat", "Noto Sans", sans-serif
--body-weight
The font weight of everything.
Default: 400
--body-size
The text size of everything.
Default: 20
--bold-weight
The font weight of bold text, such as <b>
.
Default: 700
--reading-font
The font used for the .reading
class.
Default: "Noto Serif", serif
--reading-weight
The font weight used for the .reading
class.
Default: 400
--reading-size
The font size used for the .reading
class.
Default: var(--body-size)
--monospace-font
The monospace font.
Default: "Noto Sans Mono", monospace
--monospace-weight
The monospace font weight.
Default: 400
--ui-font
The font used for buttons, headers, table headers, and more.
Default: var(--body-font)
--ui-weight
The text weight when the ui font is used.
Default: var(--bold-weight)
--text-align
Default text align. Useful for RTL webpages.
Default: left
--border-width-raw
The default border width. Used in buttons, tables, etc.
Default: 2px
--border-radius-raw
Default border radius. Used for things like rounded buttons.
Default: 6px
--spacing-size-multiple
THow many times spacing is from --body-size
. Used for spacing between .row
s and more.
Default: 56
A theme is just a CSS file, but shouldn't change any functionality of the page, just how it looks. For certain things you may have to manually specify a selector instead of a variable. Here are some that may interest you:
button, a.button, input[type=submit]
code, .code,
code, .code, .code-font, pre
header ul > li
header ul > li > ul
.grid *
.grid.portfolio *