mirror_css/spcss
1
0
Fork 0
mirror of https://github.com/susam/spcss.git synced 2025-09-03 02:42:40 +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]. 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 SVG]: https://img.shields.io/badge/view-demo-brightgreen.svg
[Demo URL]: https://susam.github.io/spcss/ [Demo URL]: https://susam.github.io/spcss/
@@ -102,6 +106,7 @@ Features
Here is a summary of the style changes provided by SPCSS: 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 - 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 too long. Shorter lines make it easier for our eyes to gauge the
beginning and end of the lines. beginning and end of the lines.

2
package.json
View File

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

36
sp.css
View File

@@ -1,5 +1,4 @@
body { body {
color: #333;
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 0 auto; margin: 0 auto;
@@ -18,6 +17,7 @@ a:hover, a:active {
color: #03f; color: #03f;
text-decoration: underline; text-decoration: underline;
} }
body,
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, 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 { h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
color: #333; color: #333;
@@ -64,3 +64,37 @@ blockquote :first-child {
blockquote :last-child { blockquote :last-child {
margin-bottom: 0; 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;
}
}