CSSkel uses CSS variables to enable easy theming, allowing you to change colors, fonts, and other styles without modifying the core CSS. It supports a default light theme and an optional dark theme, triggered by the user's system preferences or manually.
The default theme uses a light background, dark text, and a blue accent color. Key variables include:
| Variable | Description | Default Value |
|---|---|---|
--theme-hue |
Hue for text colors | 0 |
--theme-light |
Lightness for text colors | 0% |
--accent-hue |
Hue for accent colors | 194 (blue) |
--text-color-richer |
Richer text color | hsl(0, 0%, 5%) |
--text-color-normal |
Normal text color | hsl(0, 0%, 18%) |
--text-color-softer |
Softer text color | hsl(0, 0%, 33%) |
--accent-color |
Accent color | hsl(194, 86%, 40%) |
--accent-color-hover |
Accent color on hover | hsl(194, 76%, 29%) |
--background-color |
Background color | white |
To create a custom theme, redefine the CSS variables after including csskel.css. For example, to create a green-themed layout:
<style>
:root {
--accent-hue: 120; /* Green */
--accent-color: hsl(var(--accent-hue), 86%, 40%);
--accent-color-hover: hsl(var(--accent-hue), 76%, 29%);
}
</style>CSSkel supports a dark theme, which can be enabled automatically based on the user's system preferences (using @media (prefers-color-scheme: dark)) or manually by adding the enable-dark-mode class to the html element.
The dark theme uses a dark background, light text, and adjusted accent colors. Key variables include:
| Variable | Description | Dark Theme Value |
|---|---|---|
--text-color-richer |
Richer text color | hsl(0, 0%, 95%) |
--text-color-normal |
Normal text color | hsl(0, 0%, 80%) |
--text-color-softer |
Softer text color | hsl(0, 0%, 67%) |
--accent-color |
Accent color | hsl(194, 76%, 49%) |
--accent-color-hover |
Accent color on hover | hsl(194, 86%, 57%) |
--background-color |
Background color | hsl(0, 0%, 12%) |
Here is an example of enabling dark mode and seeing the theme in action:
<html class="enable-dark-mode">
<head>
<link rel="stylesheet" href="//csskel.com/2.1.0/csskel.css">
</head>
<body>
<p>This text will use the dark theme.</p>
<a href="#">This is a link in dark mode.</a>
</body>
</html>