Customization - Zenith.CSS Documentation

CSS Variables

Zenith.CSS uses CSS custom properties. Override them in a stylesheet loaded after zenith.css.

/* Override in your custom stylesheet */
:root {
    --z-primary: #0066FF;     /* Change primary color */
    --z-cut: 8px;             /* Adjust chamfer size */
    --z-gutter: 2rem;         /* Adjust grid gutter */
}
            

Variables are organized into three categories: Palette, Accents, and Settings.

Color Palette

Override these variables to change the color scheme.

Base Colors

--z-void

#050608

--z-panel

#0f1115

--z-panel-border

#30363D

Accent Colors

--z-primary

#E2FF00

--z-danger

#FF2A2A

--z-success

#00FF9D

--z-info

#00D1FF

--z-warning

#FFB800

Text Colors

--z-text-main

#F4F4F5

--z-text-muted

#8B949E

/* Example: Blue theme override */
:root {
    --z-primary: #0066FF;     /* Blue instead of yellow */
    --z-success: #00CC66;     /* Green */
    --z-info: #0099FF;        /* Blue */
    --z-warning: #FF9900;     /* Orange */
}
            

Typography

Change fonts by overriding font variables. Load your fonts before zenith.css.

/* Load custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono&display=swap');

/* Override font variables */
:root {
    --z-font-sans: 'Inter', system-ui, sans-serif;
    --z-font-mono: 'JetBrains Mono', monospace;
}
            

Variable	Default	Usage
`--z-font-sans`	Rajdhani	Headings, buttons, UI text
`--z-font-mono`	Share Tech Mono	Code, data, labels

Spacing

Adjust global spacing values.

Variable	Default	Purpose
`--z-cut`	12px	Chamfer size on cards and buttons
`--z-gutter`	1.5rem	Grid gutter width

/* Compact layout */
:root {
    --z-cut: 6px;
    --z-gutter: 1rem;
}

/* Spacious layout */
:root {
    --z-cut: 16px;
    --z-gutter: 2rem;
}
            

Theming

Create theme variants by grouping variable overrides. Use data attributes for theme switching.

/* Light theme override */
[data-theme="light"] {
    --z-void: #FFFFFF;
    --z-panel: #F6F8FA;
    --z-panel-border: #D0D7DE;
    --z-text-main: #24292F;
    --z-text-muted: #57606A;
}

/* HTML usage */
<html data-theme="light">
            

Theme switching can be controlled via JavaScript by setting the data attribute on the html element.

Custom Overrides

Extend components with custom CSS. Target specific elements using the class prefixes.

/* Custom button variant */
.z-btn-custom {
    color: var(--z-info);
    border-color: var(--z-info);
}

.z-btn-custom:hover {
    background: var(--z-info);
    color: black;
}

/* Custom card with different chamfer */
.z-card-rounded {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    border-radius: 8px;
}

/* Custom table density */
.z-table-compact th,
.z-table-compact td {
    padding: 0.5rem;
}
            

Best Practices

Load custom stylesheets after zenith.css
Use CSS variables for color changes, not hardcoded values
Keep the z- prefix convention for custom classes
Test overrides at all breakpoints