From 3a83f885622bf90df6b4bfcdbf5c96e44d382ca7 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Sun, 13 Feb 2022 14:42:07 -0800 Subject: [PATCH 1/6] work-in-progress support for `prefers-color-scheme` Swap some of the foreground and background colors --- datafiles/static/hackage.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css index 8d5f1dc41..8e617c147 100644 --- a/datafiles/static/hackage.css +++ b/datafiles/static/hackage.css @@ -9,9 +9,26 @@ html { height: 100%; } +@media (prefers-color-scheme: dark) { + body { + background: #333; + color: #fefefe; + } + pre { + background-color: black; + } +} +@media (prefers-color-scheme: light) { + body { + background: #fefefe; + color: #333; + } + pre { + background-color: white; + } +} + body { - background: #fefefe; - color: #333; text-align: left; min-height: 100vh; position: relative; @@ -197,7 +214,6 @@ ul.links li a, ul.links li form { pre { padding: 0.5rem 1rem; margin: 1em 0; - background-color: #f7f7f7; overflow: auto; } From 67bcbc95337518ee64dcb54c82e28397c20b1344 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Tue, 15 Feb 2022 19:22:13 -0800 Subject: [PATCH 2/6] 2x brightness for captions and links in dark color scheme --- datafiles/static/hackage.css | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css index 8e617c147..264757fa4 100644 --- a/datafiles/static/hackage.css +++ b/datafiles/static/hackage.css @@ -76,8 +76,22 @@ dd { } a { text-decoration: none; } -a[href]:link { color: #9E358F; } -a[href]:visited {color: #6F5F9C; } + +@media (prefers-color-scheme: dark) { + a[href]:link { + color: #9E358F; + filter: brightness(2.0); + } + a[href]:visited { + color: #6F5F9C; + filter: brightness(2.0); + } +} +@media (prefers-color-scheme: light) { + a[href]:link { color: #9E358F; } + a[href]:visited {color: #6F5F9C; } +} + a[href]:hover { text-decoration:underline; } /* @end */ @@ -159,9 +173,19 @@ pre, code, kbd, samp, .src { /* @group Common */ +@media (prefers-color-scheme: dark) { + .caption, h1, h2, h3, h4, h5, h6 { + color: #5E5184; + filter: brightness(2.0); + } +} +@media (prefers-color-scheme: light) { + .caption, h1, h2, h3, h4, h5, h6 { + color: #5E5184; + } +} .caption, h1, h2, h3, h4, h5, h6 { font-weight: bold; - color: #5E5184; margin: 1.33em 0 0.7em 0; line-height: 1.05em; } From 280b50516e2308b2ca876dd79cee19a619d29cd8 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Sat, 26 Feb 2022 17:46:53 -0800 Subject: [PATCH 3/6] table dark color scheme --- datafiles/static/hackage.css | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css index 264757fa4..ef29c39ae 100644 --- a/datafiles/static/hackage.css +++ b/datafiles/static/hackage.css @@ -1026,15 +1026,30 @@ table.fancy th { background: #f0f0f0; } -table.fancy td, table.properties td, -table.fancy th, table.properties th { - padding: 0.15em 0.45em; +@media (prefers-color-scheme: dark) { + table.fancy td, table.properties td, + table.fancy th, table.properties th { + padding: 0.15em 0.45em; + background: #333; + } + table.dataTable.compact.fancy tbody th, + table.dataTable.compact.fancy tbody td { + padding: 6px 10px; + line-height: normal; + background: #333; + } } -table.dataTable.compact.fancy tbody th, -table.dataTable.compact.fancy tbody td { +@media (prefers-color-scheme: light) { + table.fancy td, table.properties td, + table.fancy th, table.properties th { + padding: 0.15em 0.45em; + } + table.dataTable.compact.fancy tbody th, + table.dataTable.compact.fancy tbody td { padding: 6px 10px; line-height: normal; + } } ul.searchresults li { From f5a17d204ec612f2249487f0aa0c726ffe9efea4 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Wed, 25 May 2022 20:45:16 -0700 Subject: [PATCH 4/6] prefers-color-scheme for links, footer, and table-of-contents --- datafiles/static/hackage.css | 53 ++++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css index ef29c39ae..dcca3a561 100644 --- a/datafiles/static/hackage.css +++ b/datafiles/static/hackage.css @@ -14,18 +14,12 @@ html { background: #333; color: #fefefe; } - pre { - background-color: black; - } } @media (prefers-color-scheme: light) { body { background: #fefefe; color: #333; } - pre { - background-color: white; - } } body { @@ -78,14 +72,8 @@ dd { a { text-decoration: none; } @media (prefers-color-scheme: dark) { - a[href]:link { - color: #9E358F; - filter: brightness(2.0); - } - a[href]:visited { - color: #6F5F9C; - filter: brightness(2.0); - } + a[href]:link { color: #EB82DC; } /* 30% brighter */ + a[href]:visited { color: #D5C5FF; } /* 40% brighter */ } @media (prefers-color-scheme: light) { a[href]:link { color: #9E358F; } @@ -235,6 +223,17 @@ ul.links li a, ul.links li form { cursor: pointer; } +@media (prefers-color-scheme: dark) { + pre { + background-color: #474747; /* 20% brighter than background */ + } +} +@media (prefers-color-scheme: light) { + pre { + background-color: #f7f7f7; + } +} + pre { padding: 0.5rem 1rem; margin: 1em 0; @@ -442,7 +441,6 @@ table.properties td, table.properties th { } div #properties { - background: #fefefe; width: 40%; margin-bottom: 2em; } @@ -623,11 +621,21 @@ div#style-menu-holder { display: block; } +@media (prefers-color-scheme: dark) { + #footer { + background: #222; + color: #ededed; + } +} +@media (prefers-color-scheme: light) { + #footer { + background: #ededed; + color: #222; + } +} #footer { - background: #ededed; border-top: 1px solid #aaa; padding: 0.5em 0; - color: #222; text-align: center; width: 100%; height: 3em; @@ -665,8 +673,17 @@ ul.links li form button { /* @group Front Matter */ +@media (prefers-color-scheme: dark) { + #table-of-contents { + background: #222; + } +} +@media (prefers-color-scheme: light) { + #table-of-contents { + background: #f7f7f7; + } +} #table-of-contents { - background: #f7f7f7; padding: 1em; margin: 0; margin-top: 1em; From 2afa60a741a89ff2323cadc531fe96e1539fdf35 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Wed, 25 May 2022 21:01:38 -0700 Subject: [PATCH 5/6] simplify dataTable css --- datafiles/static/hackage.css | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css index dcca3a561..4193934a7 100644 --- a/datafiles/static/hackage.css +++ b/datafiles/static/hackage.css @@ -21,7 +21,6 @@ html { color: #333; } } - body { text-align: left; min-height: 100vh; @@ -233,7 +232,6 @@ ul.links li a, ul.links li form { background-color: #f7f7f7; } } - pre { padding: 0.5rem 1rem; margin: 1em 0; @@ -1046,27 +1044,22 @@ table.fancy th { @media (prefers-color-scheme: dark) { table.fancy td, table.properties td, table.fancy th, table.properties th { - padding: 0.15em 0.45em; background: #333; } table.dataTable.compact.fancy tbody th, table.dataTable.compact.fancy tbody td { - padding: 6px 10px; - line-height: normal; background: #333; } } -@media (prefers-color-scheme: light) { - table.fancy td, table.properties td, - table.fancy th, table.properties th { - padding: 0.15em 0.45em; - } - table.dataTable.compact.fancy tbody th, - table.dataTable.compact.fancy tbody td { - padding: 6px 10px; - line-height: normal; - } +table.fancy td, table.properties td, +table.fancy th, table.properties th { + padding: 0.15em 0.45em; +} +table.dataTable.compact.fancy tbody th, +table.dataTable.compact.fancy tbody td { + padding: 6px 10px; + line-height: normal; } ul.searchresults li { From ec28b4e26e99e08c6e4af9b9635331aea60e7943 Mon Sep 17 00:00:00 2001 From: Peter Becich Date: Wed, 25 May 2022 23:08:15 -0700 Subject: [PATCH 6/6] paginator css for `prefers-color-scheme` --- datafiles/templates/Html/browse.html.st | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/datafiles/templates/Html/browse.html.st b/datafiles/templates/Html/browse.html.st index a7b85a496..c2dd47053 100644 --- a/datafiles/templates/Html/browse.html.st +++ b/datafiles/templates/Html/browse.html.st @@ -54,6 +54,16 @@ .paginator { margin-left: auto; } + @media (prefers-color-scheme: dark) { + .paginator a { + color: #474747; + } + } + @media (prefers-color-scheme: light) { + .paginator a { + color: #333 !important; + } + } .paginator a { box-sizing: border-box; display: inline-block; @@ -62,14 +72,23 @@ margin-left: 2px; text-align: center; text-decoration: none !important; - color: #333 !important; border: 1px solid transparent; border-radius: 2px; } + @media (prefers-color-scheme: dark) { + .paginator .current, .paginator .current:hover { + color: #474747; + background: linear-gradient(to bottom, #585858 0%, #111 100%); + } + } + @media (prefers-color-scheme: light) { + .paginator .current, .paginator .current:hover { + color: #333 !important; + background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%); + } + } .paginator .current, .paginator .current:hover { - color: #333 !important; border: 1px solid #979797; - background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%); } .paginator a:hover { color: white !important;