From e843a6ff0dc94ed8582bca76824b8a20b1f1f853 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 17 Mar 2022 00:33:18 +0800
Subject: [PATCH] website: update example.
---
demo.html | 64 +++++++++++++++++++++++++++----------------------------
1 file changed, 31 insertions(+), 33 deletions(-)
diff --git a/demo.html b/demo.html
index 46c9feb..181ac29 100644
--- a/demo.html
+++ b/demo.html
@@ -139,39 +139,6 @@
Hi there!
});
\`\`\`
-## Properties
-
-Properties can be set directly on the custom element at creation time, or dynamically via JavaScript.
-
-\`\`\`typescript
-export type ColorScheme = 'light' | 'dark';
-export class DarkMode extends HTMLElement {
- mode?: ColorScheme;
- /**
- * Defaults to not remember the last choice.
- * If present remembers the last selected mode (\`dark\` or \`light\`),
- * which allows the user to permanently override their usual preferred color scheme.
- */
- permanent?: boolean;
- /**
- * Any string value that represents the label for the "dark" mode.
- */
- dark?: string;
- /**
- * Any string value that represents the label for the "light" mode.
- */
- light?: string;
- style?: React.CSSProperties;
-}
-\`\`\`
-
-## Events
-
-- \`colorschemechange\`: Fired when the color scheme gets changed.
-- \`permanentcolorscheme\`: Fired when the color scheme should be permanently remembered or not.
-
-## Complete Example
-
Interacting with the custom element:
\`\`\`js
@@ -215,6 +182,37 @@ Hi there!
});
\`\`\`
+## Properties
+
+Properties can be set directly on the custom element at creation time, or dynamically via JavaScript.
+
+\`\`\`typescript
+export type ColorScheme = 'light' | 'dark';
+export class DarkMode extends HTMLElement {
+ mode?: ColorScheme;
+ /**
+ * Defaults to not remember the last choice.
+ * If present remembers the last selected mode (\`dark\` or \`light\`),
+ * which allows the user to permanently override their usual preferred color scheme.
+ */
+ permanent?: boolean;
+ /**
+ * Any string value that represents the label for the "dark" mode.
+ */
+ dark?: string;
+ /**
+ * Any string value that represents the label for the "light" mode.
+ */
+ light?: string;
+ style?: React.CSSProperties;
+}
+\`\`\`
+
+## Events
+
+- \`colorschemechange\`: Fired when the color scheme gets changed.
+- \`permanentcolorscheme\`: Fired when the color scheme should be permanently remembered or not.
+
## Alternatives
- [dark-mode-toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle) A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site