Easily switch color palettes.
Modular Admin uses
CSS
custom properties to allow for easy customization.
There are several built-in themes that you can use simply by applying
the corresponding class to the <ma-app>
element.
For example, to use the blue theme, add the blue-theme
class.
<ma-app class='blue-theme'> … </ma-app>
Click on a theme to apply it.
Customize gutter and padding.
By default, the gutter and content padding are responsive: they shrink as
the viewport gets smaller. You may customize these by adding custom CSS
properties to the <ma-app>
element.
Try modifying these custom properties:
ma-app { --ma-card-padding: ; --ma-gutter-width: ; }
This theme uses CSS calculations to automatically adjust the layout to match your chosen settings. For example, to create a 20px gutter, each card on this page actually needs 10px of margin, because the margin of two cards next to each other will add up to 20px total.
Tweak the theme to your heart's content.
In addition to the built-in themes, there are also a number of custom CSS properties that you can use to fine tune your own theme. The code below shows just a handful of these properties.
There are six base colors that you may customize.
ma-app { --ma-primary-color: #85ce36; --ma-secondary-color: #3a4651; --ma-success-color: #4bcf99; --ma-info-color: #76d4f5; --ma-warning-color: #fe974b; --ma-danger-color: #ff4444; }
Each of the six base colors has five variations from light to
dark. For example, --ma-color-primary
also has
--ma-primary-color-light
, --ma-primary-color-lighter
,
--ma-primary-color-dark
, and --ma-primary-color-darker
. The
"light" and "dark" shades are typically 10% lighter/darker than the base. The
"lighter" and "darker" shades are typically 16% lighter/darker than the base.
You'll need to specify all five shades when you customize a color.
In addition to the 30 custom palette properties discussed above, Modular Admin also has the following properties:
--ma-background-color:
the content area background color--ma-divider-color:
the color of horizontal rules--ma-fast-animation:
the speed of fast animations--ma-slow-animation:
the speed of slow animations (currently unused)--ma-code-color:
the color of text in a code span/block--ma-code-background-color:
the background color of a code span/block--ma-code-max-height:
code blocks taller than this will have a scrollbar--ma-text-color:
the default text color--ma-text-color-inverse:
a light text color that is used on dark backgrounds--ma-anchor-color:
the color of anchor text (default: --ma-primary-color-dark
)--ma-anchor-decoration:
the decoration (e.g. "underline") of anchor text--ma-anchor-color-hover:
the color of anchor text under the mouse (default: --ma-primary-color-darker
)--ma-anchor-decoration-hover:
the decoration (e.g. "underline") of anchor text under the mouse--ma-button-text-color:
the color used for button text (default: --ma-text-inverse
)--ma-dropdown-border-color:
the outline color of a dropdown--ma-dropdown-hover-background-color:
the background color of a dropdown item under the mouse--ma-footer-color:
the background color of <ma-footer>
(default: --ma-divider-color
)--ma-footer-height:
the height of <ma-footer>
--ma-footer-padding:
the padding around <ma-footer>
content--ma-side-nav-width:
the width of <ma-side-nav>
--ma-side-nav-text-color:
the text color for side nav items--ma-side-nav-active-text-color:
the text color for active side nav items (default: --ma-text-inverse
)--ma-top-nav-color:
the background color of <ma-top-nav>
(default: --ma-divider-color
)--ma-top-nav-height:
the height of <ma-top-nav>
--ma-top-nav-padding:
the padding around <ma-top-nav>
content--ma-card-padding:
padding around contents of <ma-card>
--ma-content-padding:
padding around <ma-content>
(the top and bottom padding will be modified to include the <ma-top-nav>
and <ma-footer>
as necessary.)