dark/light mode

serikshaikamalov · serikshaikamalov · commit 2f7525ff0977 · 2024-07-01T16:39:04.000+05:00
diff --git a/components/wysiwyg-editor.js b/components/wysiwyg-editor.js
@@ -1,7 +1,7 @@
 import { html, css, LitElement } from "https://cdn.jsdelivr.net/npm/lit@2/+esm";
 
 class WYSIWYGEditor extends LitElement {
-  static styles = css`
+  static styles = css`    
     .editor {
       border: 1px solid #ccc;
       padding: 10px;
@@ -22,6 +22,10 @@ class WYSIWYGEditor extends LitElement {
       width: 1rem;
       height: 1rem;
     }
+
+    svg{
+      fill: var(--text-color, --md-sys-color-on-background)
+    }
   `;
 
   static get properties() {
diff --git a/examples/wysiwyg-editor/index.html b/examples/wysiwyg-editor/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>WYSIWYG Editor</title>
   <script type="module" src="./main.js"></script>
+  <link rel="stylesheet" href="./style.css">
 </head>
 <body>
   <wysiwyg-editor-example></wysiwyg-editor-example>
diff --git a/examples/wysiwyg-editor/style.css b/examples/wysiwyg-editor/style.css
@@ -0,0 +1,8 @@
+@import url(theme.light.css) (prefers-color-scheme: light);
+@import url(theme.dark.css) (prefers-color-scheme: dark);
+
+
+:root {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
diff --git a/examples/wysiwyg-editor/theme.css b/examples/wysiwyg-editor/theme.css
@@ -0,0 +1,2 @@
+@import url(theme.dark.css);
+@import url(theme.light.css);
diff --git a/examples/wysiwyg-editor/theme.dark.css b/examples/wysiwyg-editor/theme.dark.css
@@ -0,0 +1,4 @@
+:root {
+    --background-color: rgb(16 20 24);
+    --text-color: rgb(224 226 232);
+}
diff --git a/examples/wysiwyg-editor/theme.light.css b/examples/wysiwyg-editor/theme.light.css
@@ -0,0 +1,4 @@
+:root {
+    --background-color: rgb(248 249 255);
+    --text-color: rgb(25 28 32);
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import url(theme.dark.css);`
	`2`	`+@import url(theme.light.css);`