A modern CSS reset plus a few minimal styles – with dark mode theme.
restart.css version 1.2
Filesize: 4 KB (unminified)
Demo: https://simonpadbury.github.io/restart-css/ Changelog: https://github.com/SimonPadbury/restart-css/blob/main/CHANGELOG.md
The purpose of this tiny stylesheet is to provide a starting point for any web project — a reset/normalize plus a little more styling for text, tables, forms and buttons. The styled HTML looks essentially the same on Chrome (and Chromium browsers, including Edge), Firefox, and Safari.
Out of the box, restart.css (4 KB) gives you:
- Built-in automatic light/dark theme that follows the user’s operating system preference setting, using
html { color-scheme: light dark; }(the demo toggle overrides this). :rootvariables for:- Three “web safe” font stacks (serif, sans, and mono);
- Basic typography settings (font size, line height, heading sizes);
- Colors for line details, form inputs, buttons, and code blocks. Now using the new CSS function
light-dark()following ideas borrowed from Sara Joy’s Come to the light-dark() Side. Read more about this function on MDN.
- A tiny reset based on Josh W Comeau’s custom CSS reset and Andy Bell’s (more) modern CSS reset”.
- Accessability features:
- a
:focus-visibleoutline ring (for links, forms, and details<summary>) based on modern browser defaults, plus an outline-offset to improve readability; - a
.visually-hiddenclass.
- a
- Minimal classless HTML styling for text, tables, and forms.
- “Responsive” control of image media (img, picture, canvas, video, svg) with
max-width: 100%. - The only CSS classes included are
.visually-hidden, and.button(for when you want to style some links to look like buttons).
There is a simple dark theme built in. This includes:
- Not setting most colors, so that you get the (user agent) browser defaults. These will change with the user’s operating system preference for light or dark mode.
- Where necessary, styling a few elements with user agent controlled system color names (that are used by all the major browsers).
- Setting a few base for line details (
<hr>tag, table borders, form input borders), form inputs, an buttons using the new CSS functionlight-dark().
That’s it. There are no @media (prefers-color-scheme: ...) {} in the stylesheet.
You don’t need to do anything with reset.css. All you need to do is include the following meta tag in your HTML <head>:
<meta name="color-scheme" content="dark light">In this example, and in the demo index.html, "dark" is specified before "light" because my (the designer’s) preference for the webpage is that it have a dark theme. But it could have been the other way around.
With that meta tag in place, your browser then sets the system colors in the browser according to what’s in the built in default stylesheet (user-agent.css). These are slightly different for different browsers, and they closely align with the operating system of the user’s device. In dark mode, text is generally white and the webpage (actually, canvas) background is a very dark gray, or black.
What you build on top of restart.css is, of course, up to you.
Not included in restart.css: an alternative way of enabling the user preference to choose the light or dark mode is to add color-scheme: dark light; to the document root, as follows:
:root {
color-scheme: dark light;
}The demo index.html is has a simple JavaScript in its <head>. This JS is not necessary for restart.css, but is included for demonstration purposes. I copied it from Sara Joy’s Come to the light-dark() Side.