Skip to content

Setup dark mode based on work in rdf-primer and elsewhere. #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion spec/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -52,14 +53,51 @@
</script>

<style>
body { color-scheme: light; }
Copy link

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.

Copy link

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-scheme is 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?

Copy link

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.

Copy link

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-scheme here should only affect SVGs).

body.darkmode { color-scheme: dark; }
Comment on lines +56 to +57
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
body { color-scheme: light; }
body.darkmode { color-scheme: dark; }

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;
}
Copy link

@Tpt Tpt Mar 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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).)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also commented on speced/respec#4871 (comment) Sadly, fixing properly does not sound trivial.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tpt Important comment! (I agree it's not trivial, alas; but I think you're on to something there!)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,
Expand All @@ -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; }

table { word-break: normal; overflow-wrap: anywhere; }
table.ex, .ex th, .ex td { border: none; padding: 0; }
table.ex { font-size: 1.4vw; }
.separated tbody tr td:first-child, .separated tbody tr th:first-child {max-width: 220px; overflow-wrap: anywhere;}

}
.ex th { text-align: center; }
Expand All @@ -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>

Expand Down
Loading