Skip to content

Add support for style tags for theme styles #94

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

Merged
tomayac merged 2 commits into from
May 7, 2025
Merged

Add support for style tags for theme styles #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac854ee
Add support for style tags for theme styles
fastpok Feb 28, 2025
b050f00
Add demo for internal stylesheets and update README
fastpok May 5, 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
33 changes: 32 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Or, alternatively, use a `<script type="module">` tag (served from unpkg's CDN):

## Usage

There are two ways how you can use `<dark-mode-toggle>`:
There are three ways how you can use `<dark-mode-toggle>`:

### ① Using different stylesheets per color scheme that are conditionally loaded

Expand Down Expand Up @@ -168,6 +168,37 @@ toggle.addEventListener('colorschemechange', () => {
});
```

### ③ Using internal stylesheets for each color scheme

This approach allows you to define styles directly within your HTML using
`<style>` tags, scoped to specific color schemes.

⚠️ **Warning**
Internal stylesheets do not benefit from the loading optimizations provided by
`<link>` elements, which may increase the page's initial load time.

```html
<head>
<style media="(prefers-color-scheme: light)">
body {
background-color: #ffffff;
color: #000000;
}
</style>
<style media="(prefers-color-scheme: dark)">
body {
background-color: #000000;
color: #ffffff;
}
</style>
<script
type="module"
src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"
></script>
</head>
<!-- ... -->
```

## Demo

See the custom element in action in the
Expand Down
4 changes: 4 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,10 @@ <h1>Hi there!</h1>
>example without flashing</a
>).
</p>
<p>
You can also check out the
<a href="internal-stylesheets.html">demo with internal stylesheets</a>.
</p>
</main>
<aside>
<dark-mode-toggle id="dark-mode-toggle-1"></dark-mode-toggle>
Expand Down
37 changes: 37 additions & 0 deletions demo/internal-stylesheets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!doctype html>
<html>
<head>
<style media="(prefers-color-scheme: light)">
:root {
--background-color: #fff;
--text-color: #000;
}
</style>
<style media="(prefers-color-scheme: dark)">
:root {
--background-color: #000;
--text-color: #fff;
}
</style>
<style>
body {
background-color: var(--background-color);
color: var(--text-color);
}
</style>
<script type="module" src="../src/dark-mode-toggle.mjs"></script>
</head>
<body>
<h1>Demo with internal stylesheets</h1>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis. Ne vim laudem accusam
consectetuer, eu utinam integre abhorreant sea. Quo eius veri ei, nibh
invenire democritum vel in, utamur vulputate id est. Possit ceteros vis
an.
</p>
<div>
Switch theme:
<dark-mode-toggle permanent></dark-mode-toggle>
</div>
</body>
</html>
7 changes: 5 additions & 2 deletions src/dark-mode-toggle.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const SYSTEM = 'system';
const MQ_DARK = `(${PREFERS_COLOR_SCHEME}:${DARK})`;
const MQ_LIGHT = `(${PREFERS_COLOR_SCHEME}:${LIGHT})`;
const LINK_REL_STYLESHEET = 'link[rel=stylesheet]';
const STYLE = 'style';
const REMEMBER = 'remember';
const LEGEND = 'legend';
const TOGGLE = 'toggle';
Expand Down Expand Up @@ -126,10 +127,12 @@ export class DarkModeToggle extends HTMLElement {
// We need to support `media="(prefers-color-scheme: dark)"` (with space)
// and `media="(prefers-color-scheme:dark)"` (without space)
this._darkCSS = doc.querySelectorAll(
`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"],
${STYLE}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
);
this._lightCSS = doc.querySelectorAll(
`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"],
${STYLE}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
);

// Get DOM references.
Expand Down
Loading