Add predefined system-accent-colors color scheme file and update READ…

…ME to include usage instructions

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>

chrome/custom-base.css

@@ -0,0 +1,5 @@
+:root,
+html,
+body {
+    /* add your css below */
+}

chrome/custom-chrome_example.css

@@ -1,6 +1 @@
-:root,
-html,
-body {
-  /* add your css below */
-
-}
+@import url("custom-base.css");

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 */
-
-  }
-}
+@import url("custom-base.css");

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));
+    }
+}