Customization

👤 Front-end developers or website administrators using CZON to build websites, who wish to customize site styles to match brand or personal preferences.

This article details methods for customizing styles in CZON projects by creating a style.css file in the .czony directory and writing CSS code to override default styles or add personalized appearances. The document explains that CZON detects and copies this file to the output directory during build, adding a style link to each HTML page to ensure custom styles load after built-in styles for effective overrides. It provides a list of available CSS variables, such as background colors, text colors, and link colors, and showcases multiple practical examples, like customizing brand colors, adjusting content area width, customizing code block styles, and hiding specific elements. Finally, it emphasizes precautions, such as the filename must be style.css, rebuilding is required after modifications, using CSS variable overrides is recommended, and !important may be needed when CZON uses Tailwind CSS.

✨ CZON supports customizing site styles via the .czony/style.css file

✨ Custom styles can override default styles or add personalized appearances

✨ During build, CZON detects and copies style.css to the output directory

✨ A style link is added to each HTML page, with custom styles loading after built-in styles

✨ Provides a list of available CSS variables, including light and dark modes

197 words · ~1 min read

CZON
Custom Styles
CSS
Front-end Development
Website Building
Style Override
CSS Variables
Tailwind CSS

Custom Styling

CZON supports customizing site styles through the .czon/style.css file, allowing you to override default styles or add a personalized appearance.

How to Use

Create a style.css file in the .czon directory of your project:

your-project/
├── .czon/
│   ├── meta.json
│   └── style.css    <-- Create this file
├── README.md
└── docs/

Write your custom CSS in style.css:

/* Example: Change link color */
:root {
  --link-color: #0066cc;
}

/* Example: Modify background in dark mode */
html.dark {
  --bg-primary: #0d1117;
}

Re-run czon build, and the custom styles will automatically apply to all pages.

How It Works

During build, CZON checks if .czon/style.css exists.
If it exists, it is copied to the output directory .czon/dist/style.css.
In each generated HTML page, a stylesheet link is added within the <head>:
```
<link rel="stylesheet" href="style.css" />
```
Custom styles are loaded after the built-in styles, allowing them to override defaults.

Available CSS Variables

CZON uses CSS variables to define theme colors. You can quickly adjust the color scheme by overriding these variables:

:root {
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;

  /* Text colors */
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;

  /* Link and accent colors */
  --link-color: #007bff;
  --link-hover-color: #0056b3;

  /* Border colors */
  --border-color: #dee2e6;
}

/* Dark mode variables */
html.dark {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #404040;

  --text-primary: #e5e5e5;
  --text-secondary: #a0a0a0;
  --text-muted: #6c6c6c;

  --link-color: #58a6ff;
  --link-hover-color: #79b8ff;

  --border-color: #404040;
}

Examples

Custom Brand Colors

:root {
  --link-color: #e91e63;
  --link-hover-color: #c2185b;
}

html.dark {
  --link-color: #f48fb1;
  --link-hover-color: #f8bbd9;
}

Adjust Content Area Width

.content {
  max-width: 60rem;
}

Custom Code Block Styling

pre code {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}

Hide Specific Elements

/* Hide the right sidebar table of contents */
.sidebar-right {
  display: none;
}

Notes

The custom stylesheet filename must be style.css and placed in the .czon/ directory.
After modifying styles, you need to re-run czon build for changes to take effect.
It is recommended to customize styles by overriding CSS variables, as this ensures compatibility with both light and dark modes.
CZON uses Tailwind CSS. If you need to override styles generated by Tailwind, you may need to use !important.

CZON

CZON Custom Style Guide

Table of Contents