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