From f0bc3fe5734b372553e5c7e5d27ea263b994a36e Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 29 Feb 2024 13:46:23 +0800
Subject: [PATCH] doc: add adapted styles readme

---
 src/styles/adaptedStyles/README.md | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/styles/adaptedStyles/README.md

diff --git a/src/styles/adaptedStyles/README.md b/src/styles/adaptedStyles/README.md
new file mode 100644
index 00000000..5ae357e0
--- /dev/null
+++ b/src/styles/adaptedStyles/README.md
@@ -0,0 +1,56 @@
+# Adapted Styles
+
+Here, place the CSS for dark mode or change the theme color.
+
+In `index.ts`, we will write some regex rules to match the style used on specific page.
+
+## Style File Writing Style
+
+``` scss
+.bewly-design.pageName {
+  // Implement specific modifications to the page, like tweaking the layout, and place those styles here
+  .right-side-bar .catalog {
+    line-height: 3em;
+  }
+
+  ...
+
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in :not()
+  :not(fdjslfds) {
+    a, b, c {
+      color: var(--bew-theme-color);
+    }
+
+    d, e, f {
+      // PLEASE NOTE THAT USING `!important` SHOULD BE A LAST RESORT
+      color: var(--bew-theme-color) !important;
+    }
+
+    g, h, i {
+      background-color: var(--bew-theme-color);
+    }
+
+    j, k, l {
+      background-color: var(--bew-theme-color) !important;
+    }
+
+    ...
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    aa, bb, cc {
+      color: var(--bew-text-1);
+    }
+
+    dd, ee, ff {
+      color: var(--bew-text-1) !important;
+    }
+
+    ...
+  }
+  // #endregion
+}
+```