From 20713b8b5df9502f2950ff221a12cfe094ad8173 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Mon, 3 Mar 2025 14:23:31 +0100
Subject: [PATCH] Add dark color-scheme for samples

---
 samples/styles.css | 30 ++++++++++++++++++++++++++++++
 service.js         |  1 +
 styles.css         |  2 --
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/samples/styles.css b/samples/styles.css
index a13a524..06c5555 100644
--- a/samples/styles.css
+++ b/samples/styles.css
@@ -1,3 +1,14 @@
+body {
+  color: #000;
+  background-color: #eee;
+}
+
+input, textarea {
+  color: #000;
+  background-color: #f5f5f5;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
 .my-block {
   max-width: 500px;
   margin: 0 auto;
@@ -52,3 +63,22 @@
 .bes-status-icon.bes-status-mistakes {
   background-image: url('images/mistake-svgrepo-com.svg');
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #eee;
+    background-color: #444;
+    font-weight: bolder;
+  }
+
+  input, textarea {
+    color: #eee;
+    background-color: #222;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .my-control {
+    background-color: #222;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+}
diff --git a/service.js b/service.js
index b0d4d02..c4bb8a6 100644
--- a/service.js
+++ b/service.js
@@ -1,4 +1,5 @@
 // TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
+// TODO: Add mutation observer should any style of hostElement/textElement change and repaint markup (e.g. notice font-weight difference when toggling light/dark color-scheme)
 
 /**
  * Collection of all grammar checking services in the document
diff --git a/styles.css b/styles.css
index 3a3a543..0e2e12c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,3 @@
-/* TODO: Dark mode theme */
-
 /* Mistake types styles */
 .bes-spelling-mistake {
   border-bottom: 2px solid #ff7300;