From 8ea8a20cc9fc003a99cd3a427bc2d4fcdb15e7f2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 22 Nov 2021 08:32:53 -0500
Subject: [PATCH] add dark mode to codepen
---
docs/assets/plugins/code-block/code-block.js | 10 +++++++++-
docs/resources/changelog.md | 4 ++++
2 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
index b5ff337a..b5f3ab53 100644
--- a/docs/assets/plugins/code-block/code-block.js
+++ b/docs/assets/plugins/code-block/code-block.js
@@ -293,6 +293,9 @@
const htmlExample = codeBlock.querySelector('.code-block__source--html > pre > code')?.textContent;
const reactExample = codeBlock.querySelector('.code-block__source--react > pre > code')?.textContent;
const isReact = flavor === 'react' && typeof reactExample === 'string';
+ const theme = localStorage.getItem('theme');
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
const editors = isReact ? '0010' : '1000';
let htmlTemplate = '';
let jsTemplate = '';
@@ -331,10 +334,14 @@
// CSS templates
cssTemplate =
- `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/light.css';\n` +
+ `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/${
+ isDark ? 'dark' : 'light'
+ }.css';\n` +
'\n' +
'body {\n' +
' font: 16px sans-serif;\n' +
+ ' background-color: var(--sl-color-neutral-0);\n' +
+ ' color: var(--sl-color-neutral-900);\n' +
' padding: 1rem;\n' +
'}';
@@ -345,6 +352,7 @@
tags: ['shoelace', 'web components'],
editors,
head: `<meta name="viewport" content="width=device-width">`,
+ html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
css_external: ``,
js_external: ``,
js_module: true,
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index fc925fcf..669116fc 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
+## Next
+
+- CodePen examples will now open in light or dark depending on your current preference
+
## 2.0.0-beta.61
This release improves the dark theme by shifting luminance in both directions, slightly condensing the spectrum. This results in richer colors in dark mode. It also reduces theme stylesheet sizes by eliminating superfluous gray palette variations.