diff --git a/README.md b/README.md index 09b941b..b618bef 100644 --- a/README.md +++ b/README.md @@ -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 `` 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. diff --git a/package.json b/package.json index 41acf6c..2349b03 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spcss", - "version": "0.3.0", + "version": "0.4.0", "description": "Simple and Plain Stylesheet", "files": [ "sp.css", diff --git a/sp.css b/sp.css index 5c6355b..0547af7 100644 --- a/sp.css +++ b/sp.css @@ -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; + } +}