EdgePane Documentation
Reference
EdgePane CSS Variables
EdgePane uses CSS custom properties (variables) for easy theming and customization.
You can override these in your own stylesheet to match your brand colors, typography, and layout
preferences.
All variables are defined at the :root
level.
| Variable | Default Value | Description |
|---|---|---|
| --sidebar-bg | rgba(225,225,225,1) | Default background color of the sidebar. |
| --sidebar-bg-active | rgba(180,180,180,1) | Background color of the active/hovered menu item. |
| --sidebar-color | rgba(70,70,70,1) | Default text/icon color in the sidebar. |
| --sidebar-color-active | rgba(70,70,70,1) | Text/icon color for active/hovered menu items. |
| --sidebar-width-open | 16rem | Width of the sidebar when expanded. |
| --sidebar-width-closed | 4rem | Width of the sidebar when collapsed. |
| --transition-speed | 0.25s | Duration of sidebar open/close animations. |
| --sidebar-font | "Montserrat", sans-serif | Font family used in the sidebar. |
| --icon-size | 0.88rem | Default size of icons inside the sidebar. |
| --header-padding | 0.75rem 1rem | Padding inside the sidebar header. |
| --menu-padding | 0.5rem | Padding applied to menu list items. |
| --link-padding | 0.75rem 1.05rem | Padding applied to individual links. |
Usage Example
EdgePane CSS
:root {
--sidebar-bg: #059669;
--sidebar-color: #ffffff;
--sidebar-font: "Poppins", sans-serif;
}
💡 Simply override any variable in your own stylesheet after including EdgePane CSS.
For example, to change the sidebar background, redefine --sidebar-bg in your custom
CSS.