Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

website(docs): set color-scheme on the root element #3721

Merged
merged 2 commits into from
Nov 14, 2022
Merged

website(docs): set color-scheme on the root element #3721

merged 2 commits into from
Nov 14, 2022

Conversation

nstepien
Copy link
Contributor

@nstepien nstepien commented Nov 14, 2022

Summary

color-scheme was previously set on inputs only, while we can set it on the root/html element to affect other elements on the page, including scrollbars.

I've also added the only keyword to prevent user agents from applying color overrides.

I've also changed from the html selector to :root, shouldn't matter much, though I do wonder if browsers optimize it as there can only be one :root per document, while you are allowed to create random html elements and append them just about anywhere.

For reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/:root

Before

image
image

After

image
image

Test Plan

Tested in the live website with Chrome's DevTools.
Double-checked with the deploy preview.

@nstepien nstepien requested a review from a team November 14, 2022 11:24
@netlify
Copy link

netlify bot commented Nov 14, 2022

Deploy Preview for docs-rometools ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 3219eef
🔍 Latest deploy log https://app.netlify.com/sites/docs-rometools/deploys/63723f79ac4fc40008596931
😎 Deploy Preview https://deploy-preview-3721--docs-rometools.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@ematipico ematipico merged commit 501dbe9 into rome:main Nov 14, 2022
jeysal added a commit to jeysal/rometools that referenced this pull request Nov 14, 2022
* upstream/main: (45 commits)
  website(docs): set `color-scheme` on the root element (rome#3721)
  feat(rome_analyze): add a warning for unused suppression comments (rome#3718)
  feat(rome_js_analyze): Implement prefer-numeric-literals lint (rome#3558)
  feat(rome_js_formatter): jestEach template literals rome#3308 (rome#3582)
  doc(website): Add context about Romes philosophy (rome#3714)
  fix(rome_js_formatter): Single-line comment below a JSX prop triggers… (rome#3641)
  test(rome_js_formatter): update prettier tests (rome#3684)
  fix(rome_js_parser): improve await handling in non-async context (rome#3573)
  fix(rome_js_parser): improve yield parsing in non generator function (rome#3622)
  More playground polish
  Fix backgrounds
  Fix height
  Align docs.rome.tools with rome.tools
  Reenable compression
  Add missing width
  website(docs): More playground IDE features (rome#3711)
  fix(rome_js_formatter): new expression attribute (rome#3686)
  docs(website): added checkbox to toggle linter in playground (rome#3699)
  website(docs): More website tweaks (rome#3707)
  website(docs): Add default layout property (rome#3705)
  ...
@sebmck
Copy link
Contributor

sebmck commented Nov 14, 2022

Thank you so much!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants