SPCSS supports systems and web browsers with dark themes as well, so the look of the page depends on the color theme specified in your system or browser.
SPCSS is a simple, plain style sheet for plain text websites.
Here is a summary of the style changes provided by SPCSS:
- Support for the dark color theme (
- Maximum width for the
<body>element to prevent the lines from being too long. Shorter lines make it easier for our eyes to gauge the beginning and end of the lines.
- Dark gray (
#333) text color instead of black (
#000) in light mode.
- Increased line height to add more room around the lines.
- More margin above headings to separate them more conspicuously from preceding content.
- Less margin below headings as well as less
line-heightfor margins to associate them more tightly with succeeding content.
- Support for heading anchor links to facilitate sharing direct links to sections of a page.
- Support for special styling of keyboard input (
<kbd>) within code blocks (
- Ensure the width of images does not exceed the maximum width for the
- Simple styling for
<figcaption>elements such as margins aligned with the margins of text paragraphs, centered captions, and reduced font size for captions.
- Light gray background for code blocks and blockquotes.
- Prevent very long lines of code from overflowing outside the gray box for code blocks. Instead, make the code block scrollable when the code overflows the gray box.
- Light borders for table cells.
How to make use of it:
Insert the minified version of the sp.css into the HTML doc.
<link rel="stylesheet" href="sp.css" />
Minimal CSS Framework For Text-based Websites, SPCSS Plugin/Github
Read More – Dark Mode Switcher Theme For Bootstrap 5
See Demo And Download
Official Website(susam): Click Here