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.

Sign up for GitHub

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

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
073b22e
Setup dark mode based on work in rdf-primer and elsewhere.
gkellogg Mar 13, 2025
ae0852b
Remove hljs styling, which may eventually make it into ReSpec.
gkellogg Mar 14, 2025
ad2c29d
Simplify table styling.
gkellogg Mar 14, 2025
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
18 changes: 14 additions & 4 deletions spec/index.html
View file
Open in desktop
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,13 +53,16 @@
</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).


/* 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 thead tr th { border:1px solid; padding: .2em; min-width: 10vw }
.separated tbody tr td { border:1px solid; 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,
Expand All @@ -83,23 +87,29 @@
@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; }

table.cp-definitions { border-collapse:collapse; background-color: #DDDDFF}
body.darkmode table.cp-definitions { background-color: black}

table.cp-definitions,
table.cp-definitions th,
table.cp-definitions td { border:1px solid black; padding:0.2em; }
table.cp-definitions td { border:1px solid; padding:0.2em; }
table.cp-definitions td:nth-child(2) { text-align: center; }
</style>
</head>
Expand Down
Loading