feat: add theme-auto-switch-disabled attribute.

jaywcjlove · Mar 4, 2024 · 7400b9c · 7400b9c
1 parent 5f493bc
commit 7400b9c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -103,6 +103,14 @@ Set the theme, do not automatically switch with the system:
 </markdown-style>
 ```
 
+Disable internal theme switching functionality
+
+```html
+<markdown-style theme-auto-switch-disabled theme="dark">
+  <h1>Markdown Style</h1>
+</markdown-style>
+```
+
 ## Contributors
 
 As always, thanks to our amazing contributors!

diff --git a/demo.html b/demo.html
@@ -14,14 +14,16 @@
       max-width: 890px;
       margin: 0 auto;
       padding: 0 15px;
+      padding-bottom: 230px;
+      padding-top: 120px;
     }
   </style>
 </head>
 <body>
   <dark-mode light="Light" dark="Dark" style="position: fixed; left: 10px; top: 8px;"></dark-mode>
   <github-corners target="__blank" href="https://github.com/jaywcjlove/markdown-style"></github-corners>
   <h1>Markdown Style Example</h1>
-  <markdown-style style="max-width: 520px; border: 1px solid #506d9b3b; padding: 10px;">
+  <markdown-style theme-auto-switch-disabled="true" style="max-width: 520px; border: 1px solid #506d9b3b; padding: 10px;">
 ```jsx
 import React from 'react';
 import 'markdown-style';

diff --git a/src/index.ts b/src/index.ts
@@ -985,6 +985,7 @@ type Theme = 'light' | 'dark';
 
 class MarkdownStyle extends HTMLElement {
   private shadow: ShadowRoot;
+  private defaultTheme: Theme;
   get theme() {
     const value = this.getAttribute('theme');
     return value === null ? '' : value;
@@ -1009,6 +1010,10 @@ class MarkdownStyle extends HTMLElement {
     }
   }
   connectedCallback() {
+    const disableThemeAutoSwitch = this.getAttribute('theme-auto-switch-disabled');
+    if (disableThemeAutoSwitch == "" || disableThemeAutoSwitch && disableThemeAutoSwitch.toLowerCase() === 'true') {
+      return
+    }
     if (!this.theme) {
       const { colorMode } = document.documentElement.dataset as Record<string, Theme>;
       this.theme = colorMode;