From 7bc1dca363a334c85fe11ddfaad24a3b37cfb850 Mon Sep 17 00:00:00 2001
From: Zachary Wander <zachary.wander@gmail.com>
Date: Sun, 29 Oct 2023 20:52:26 -0400
Subject: [PATCH] Add predefined system-accent-colors color scheme file and
 update README to include usage instructions

---
 README.md                              | 22 +++----------------
 chrome/custom-base.css                 |  5 +++++
 chrome/custom-chrome_example.css       |  7 +-----
 chrome/custom-content_example.css      | 10 +--------
 color-schemes/system-accent-colors.css | 30 ++++++++++++++++++++++++++
 5 files changed, 40 insertions(+), 34 deletions(-)
 create mode 100644 chrome/custom-base.css
 create mode 100644 color-schemes/system-accent-colors.css

diff --git a/README.md b/README.md
index b7d157b..6a89b77 100644
--- a/README.md
+++ b/README.md
@@ -115,12 +115,10 @@ Follow this steps:
 - `custom-chrome_example.css` to `custom-chrome.css`
 - `custom-content_example.css` to `custom-content.css` _(this is for the "New Tab" page)_
 
-2. Open the appropriate css file in a text editor
+2. Open `custom-base.css` in a text editor
 3. Find the desired variable
 4. Add your values, for example, set the accent color to red:
 
-_custom-chrome.css_
-
 ```css
 :root,
 html,
@@ -130,26 +128,12 @@ body {
 }
 ```
 
-or also for the "New Tab" page:
-
-_custom-content.css_
-
-```css
-/* only for about:* pages */
-@-moz-document regexp("about:(?!blank|devtools).*") {
-  :root,
-  html,
-  body {
-    /* add your css below */
-    --mf-accent-color: #ea4335 !important;
-  }
-}
-```
-
 5. Save the file and restart Firefox to apply changes
 
 Using these custom css files can separate your changes from the source project and you can easily backup your files and don't worry about overwriting your changes if you want to update or reinstall the main files.
 
+You can also find pre-made color schemes in the `color-schemes` folder in this repo.
+
 #### Available variables
 
 <table>
diff --git a/chrome/custom-base.css b/chrome/custom-base.css
new file mode 100644
index 0000000..4496ea2
--- /dev/null
+++ b/chrome/custom-base.css
@@ -0,0 +1,5 @@
+:root,
+html,
+body {
+    /* add your css below */
+}
\ No newline at end of file
diff --git a/chrome/custom-chrome_example.css b/chrome/custom-chrome_example.css
index 7b2d29f..88ed1ed 100644
--- a/chrome/custom-chrome_example.css
+++ b/chrome/custom-chrome_example.css
@@ -1,6 +1 @@
-:root,
-html,
-body {
-  /* add your css below */
-
-}
\ No newline at end of file
+@import url("custom-base.css");
\ No newline at end of file
diff --git a/chrome/custom-content_example.css b/chrome/custom-content_example.css
index a782dfa..88ed1ed 100644
--- a/chrome/custom-content_example.css
+++ b/chrome/custom-content_example.css
@@ -1,9 +1 @@
-/* only for about:* pages */
-@-moz-document regexp("about:(?!blank|devtools).*") {
-  :root,
-  html,
-  body {
-    /* add your css below */
-
-  }
-}
\ No newline at end of file
+@import url("custom-base.css");
\ No newline at end of file
diff --git a/color-schemes/system-accent-colors.css b/color-schemes/system-accent-colors.css
new file mode 100644
index 0000000..274d4ab
--- /dev/null
+++ b/color-schemes/system-accent-colors.css
@@ -0,0 +1,30 @@
+:root,
+html,
+body {
+    @media (prefers-color-scheme: dark) {
+        --mf-accent-color: color-mix(in srgb, var(--mf-white) 15%, AccentColor) !important;
+        --mf-tab-opacity: 0.9 !important;
+        --mf-background-color-0: color-mix(in srgb, var(--mf-grey-900) 85%, var(--mf-accent-color)) !important;
+        --mf-background-color-50: color-mix(in srgb, var(--mf-grey-900-white-4-percent) 85%, var(--mf-accent-color)) !important;
+        --mf-background-color-100: color-mix(in srgb, var(--mf-grey-900-white-5-percent) 85%, var(--mf-accent-color)) !important;
+        --mf-menu-background-color-hover: color-mix(in srgb, var(--mf-grey-800) 85%, var(--mf-accent-color)) !important;
+        --mf-menu-border-color: color-mix(in srgb, var(--mf-grey-800) 85%, var(--mf-accent-color)) !important;
+        --mf-text-on-accent: var(--mf-white) !important;
+        --mf-secondary-button-text: var(--mf-white) !important;
+        --mf-content-separator-color: color-mix(in srgb, #606164 90%, var(--mf-accent-color)) !important;
+        --mf-selection-background-color: color-mix(in srgb, var(--mf-grey-900) 15%, var(--mf-accent-color)) !important;
+    }
+
+    @media (prefers-color-scheme: light) {
+        --mf-accent-color: color-mix(in srgb, var(--mf-grey-900) 15%, AccentColor);
+        --mf-tab-opacity: 0.9;
+        --mf-background-color-0: color-mix(in srgb, #dee1e6 90%, var(--mf-accent-color));
+        --mf-background-color-50: color-mix(in srgb, var(--mf-grey-100) 90%, var(--mf-accent-color));
+        --mf-background-color-100: color-mix(in srgb, var(--mf-white) 90%, var(--mf-accent-color));
+        --mf-menu-background-color-hover: color-mix(in srgb, var(--mf-background-color-0) 90%, var(--mf-accent-color));
+        --mf-menu-border-color: color-mix(in srgb, var(--mf-background-color-0) 90%, var(--mf-accent-color));
+        --mf-content-separator-color: color-mix(in srgb, #dbdcdd 90%, var(--mf-accent-color));
+        --mf-secondary-button-text: var(--mf-accent-color);
+        --mf-selection-background-color: color-mix(in srgb, #dee1e6 10%, var(--mf-accent-color));
+    }
+}
\ No newline at end of file