Setup dark mode based on work in rdf-primer and elsewhere. #88
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -3,6 +3,7 @@ | |||||
| <head> | ||||||
| <title>RDF 1.2 Turtle</title> | ||||||
| <meta charset="utf-8"/> | ||||||
| <meta name="color-scheme" content="light dark" /> | ||||||
| <script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script> | ||||||
| <script src="./common/local-biblio.js" class="remove"></script> | ||||||
| <script src="./common/fixup.js" class="remove"></script> | ||||||
|
|
@@ -52,14 +53,51 @@ | |||||
| </script> | ||||||
|
|
||||||
| <style> | ||||||
| body { color-scheme: light; } | ||||||
| body.darkmode { color-scheme: dark; } | ||||||
|
Comment on lines
+56
to
+57
There was a problem hiding this comment.
Suggested change
These should only affect linked SVGs (which this spec does not currently use). Since general support for that will be handled by respec if speced/respec#4925 is merged, removing these lines should happen anyway when that lands, to avoid hard-to-spot regressions (since the upstream fix is not JS-dependent). |
||||||
|
|
||||||
| /* Copy of hljs light/dark values, since hljs uses media | ||||||
| * prefers-color-scheme rule which isn't controlled by color-scheme. */ | ||||||
| body .hljs { | ||||||
| --base: rgba(0, 0, 0, .03); /* Altered from hljs default of #fafafa; more like bikeshed/pygments */ | ||||||
| --mono-1: #383a42; | ||||||
| --mono-2: #686b77; | ||||||
| --mono-3: #717277; | ||||||
| --hue-1: #0b76c5; | ||||||
| --hue-2: #336ae3; | ||||||
| --hue-3: #a626a4; | ||||||
| --hue-4: #42803c; | ||||||
| --hue-5: #ca4706; | ||||||
| --hue-5-2: #c91243; | ||||||
| --hue-6: #986801; | ||||||
| --hue-6-2: #9a6a01; | ||||||
| } | ||||||
| body.darkmode .hljs { | ||||||
| --base: #282c34; | ||||||
| --base: rgba(255, 255, 255, .05); /* Altered from hljs default of #282c34; more like bikeshed/pygments */ | ||||||
| --mono-1: #abb2bf; | ||||||
| --mono-2: #818896; | ||||||
| --mono-3: #5c6370; | ||||||
| --hue-1: #56b6c2; | ||||||
| --hue-2: #61aeee; | ||||||
| --hue-3: #c678dd; | ||||||
| --hue-4: #98c379; | ||||||
| --hue-5: #e06c75; | ||||||
| --hue-5-2: #be5046; | ||||||
| --hue-6: #d19a66; | ||||||
| --hue-6-2: #e6c07b; | ||||||
| } | ||||||
|
There was a problem hiding this comment. This might lead to bugs in the future if respec/hljs is updated. I don't think we pin ReSpec version. I am going to open a ticket in ReSpec about it. There was a problem hiding this comment. @Tpt That would be great! I failed to act on w3c/rdf-primer#24 and haven't moved this CSS to rdf-common yet. But fixing it in ReSpec would be much better for all! (I probably should have gone that route from the beginning.) (I might follow with what I've come up with re. highlighting, since ReSpec seems to handle that in a somewhat deprecated manner (CommonJS vs. ESM).) There was a problem hiding this comment. I removed the hljs styling. Until it is applied to ReSpec, example blocks will continue to have a white background in dark mode, but better not tie that style into the HTML on a one-off basis. There was a problem hiding this comment. I commented on speced/respec#4871 (comment) to mention the tentative solution for the Primer. Unless someone picks it up there, I might have some time for a PR on ReSpec, which as @Tpt says would be for the best (and the only robust solution). There was a problem hiding this comment. I also commented on speced/respec#4871 (comment) Sadly, fixing properly does not sound trivial. There was a problem hiding this comment. @Tpt Important comment! (I agree it's not trivial, alas; but I think you're on to something there!) There was a problem hiding this comment. Aiming to solve this via speced/respec#4925. |
||||||
|
|
||||||
| /* Style Turtle script blocks to be visable */ | ||||||
| pre.example script { | ||||||
| display:block; | ||||||
| } | ||||||
| /* | ||||||
| .separated { border-collapse:collapse; } | ||||||
| .separated thead tr th { border:1px solid black; padding: .2em; min-width: 10vw } | ||||||
| .separated tbody tr td { border:1px solid black; text-align: center; min-width: 10vw } | ||||||
| .separated tbody tr td.r { text-align: right; padding: .5em; } | ||||||
| */ | ||||||
| .grammar td { font-family: monospace; vertical-align: top; } | ||||||
| .grammar-opt, | ||||||
| .grammar-alt, | ||||||
|
|
@@ -83,14 +121,19 @@ | |||||
| @media (max-width: 767px) { | ||||||
| table { word-break: break-all; } | ||||||
| .separated thead tr th { border:1px solid black; padding: .2em; min-width: 10vw } | ||||||
| .separated tbody tr td:first-child, | ||||||
| .separated tbody tr th:first-child {max-width: 220px; overflow-wrap: anywhere;} | ||||||
| .separated thead tr th:nth-child(2) { word-break: break-all; } | ||||||
| .separated tbody tr td:nth-child(2) {padding: 3px 2px;} | ||||||
| .separated tbody tr td:nth-child(3) {padding: 3px 2px;} | ||||||
| .separated tbody tr td { border:1px solid black; text-align: center; min-width: 10vw } | ||||||
|
|
||||||
| body.darkmode .separated thead tr th { border:1px solid white; } | ||||||
| body.darkmode .separated tbody tr td { border:1px solid white; } | ||||||
gkellogg marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
|
||||||
| table { word-break: normal; overflow-wrap: anywhere; } | ||||||
| table.ex, .ex th, .ex td { border: none; padding: 0; } | ||||||
| table.ex { font-size: 1.4vw; } | ||||||
|
|
||||||
| } | ||||||
| .ex th { text-align: center; } | ||||||
|
|
@@ -101,6 +144,11 @@ | |||||
| table.cp-definitions th, | ||||||
| table.cp-definitions td { border:1px solid black; padding:0.2em; } | ||||||
| table.cp-definitions td:nth-child(2) { text-align: center; } | ||||||
|
|
||||||
| body.darkmode table.cp-definitions { background-color: black} | ||||||
| body.darkmode table.cp-definitions, | ||||||
| body.darkmode table.cp-definitions th, | ||||||
| body.darkmode table.cp-definitions td { border:1px solid white; } | ||||||
| </style> | ||||||
| </head> | ||||||
|
|
||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This prevents darkmode to work when JS is not enabled but not sure if it's a big deal.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That should be handled in speced/respec#4925 (to avoid the JS dependency both for hljs and SVGs). If that PR lands, the two places where
color-schemeis used this PR is obsolete (since they depend on JS)). Do we want to hold off on merging dark mode on RDF specs until we get a signal on if respec will accept the fix?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Imho we should merge now. JS only dark mode is better than no dark mode.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed; with the added suggestion to remove those two lines to avoid required further changes (the use of
color-schemehere should only affect SVGs).