mirror_css/spcss
1
0
Fork 0
mirror of https://github.com/susam/spcss.git synced 2025-09-02 10:23:21 +02:00
Code Issues Projects Releases Wiki Activity

Add support for dark color theme

Browse Source
This commit is contained in:
Susam Pal
2020-12-06 14:35:52 +05:30
parent 3760b38bf5
commit bf90ecc788
3 changed files with 41 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -11,6 +11,10 @@ SPCSS is a simple and plain stylesheet for simple text-based websites.
Note: A demo page is available [here][Demo URL].
SPCSS supports systems and web browsers with dark color theme too, so
how the page looks depends on the color theme selected on your system or
browser.
[Demo SVG]: https://img.shields.io/badge/view-demo-brightgreen.svg
[Demo URL]: https://susam.github.io/spcss/
@@ -102,6 +106,7 @@ Features
Here is a summary of the style changes provided by SPCSS:
- Support for dark color theme (`prefers-color-scheme: dark`).
- 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.

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "spcss",
"version": "0.3.0",
"version": "0.4.0",
"description": "Simple and Plain Stylesheet",
"files": [
"sp.css",

36
sp.css
View File

@@ -1,5 +1,4 @@
body {
color: #333;
font-family: helvetica, arial, sans-serif;
line-height: 1.5;
margin: 0 auto;
@@ -18,6 +17,7 @@ a:hover, a:active {
color: #03f;
text-decoration: underline;
}
body,
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
color: #333;
@@ -64,3 +64,37 @@ blockquote :first-child {
blockquote :last-child {
margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
body {
background: #222;
}
a:link, a:visited {
color: #9bf;
text-decoration: none;
}
a:hover, a:active {
color: #acf;
text-decoration: underline;
}
body,
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
color: #bbb;
}
h1 a:hover, h1 a:active, h2 a:hover, h2 a:active, h3 a:hover, h3 a:active,
h4 a:hover, h4 a:active, h5 a:hover, h5 a:active, h6 a:hover, h6 a:active {
color: #ccc;
}
pre, code, samp, kbd {
color: #6cf;
}
pre kbd {
color: #9c9;
}
pre, blockquote {
background: #111;
}
blockquote {
border-color: #444;
}
}