feat: Added auto variant (#145)

* Added dark theme for ios, flat and material. * Added @variant for dark theme. * Added ' auto' as a @variant.
knownasilya · Oct 15, 2020 · ac8ad6a · ac8ad6a
1 parent 70e49f4
commit ac8ad6a
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ Check the [demo] for interactive examples.
 
 ![Dark Themes](vendor/ember-toggle/example-images/themes-dark.png)
 
-Use it along with the `@variant='dark'` option to get a dark themed version, works only with 'ios', 'flat' and 'material' theme.
+Use it along with the `@variant='auto'` or `@variant='dark'` option to get a dark themed version, works only with 'ios', 'flat' and 'material' theme.
 
 > Example of changing the theme
 
@@ -93,7 +93,7 @@ If you want your labels to be displayed, then you must set `showLabels` to `true
 - `value` - The state of the switch, can be `true` or `false`. Defaults to `false`.
 - `onToggle` - The action that should change the state of `value`.
 - `theme` - One of 'light', 'ios', 'flat', 'material', 'flip', 'skewed', 'default'.
-- `variant` - Use `dark` for dark themed variants. Works only with 'ios', 'flat' and 'material' theme.
+- `variant` - One of `dark` or `auto`. Use `auto` for system dependent light/dark theme. Works only with `ios`, `flat` and `material` theme.
   Defaults to 'default' if not specified.
 - `size` - One of 'small', 'medium', 'large'.
   Defaults to 'medium' if not specified.

diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -53,3 +53,10 @@ table.dark {
   background-color: #212121;
   color: #eee;
 }
+
+@media (prefers-color-scheme: dark) {
+  table.auto {
+    background-color: #212121;
+    color: #eee;
+  }
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -29,6 +29,7 @@
   </tbody>
 </table>
 
+<h3>Dark</h3>
 <table class="dark">
   <tbody>
     <tr>
@@ -44,6 +45,22 @@
   </tbody>
 </table>
 
+<h3>Auto</h3>
+<table class="auto">
+  <tbody>
+    <tr>
+      <td><XToggle @name={{3}} @theme="ios" @variant="auto" @value={{v3}} @onToggle={{fn (mut v3)}} /></td>
+      <td>ios auto</td>
+      <td><XToggle @name={{4}} @theme="flat" @variant="auto" @value={{v4}} @onToggle={{fn (mut v4)}} /></td>
+      <td>flat auto</td>
+    </tr>
+    <tr>
+      <td><XToggle @name={{7}} @theme="material" @variant="auto" @value={{v8}} @onToggle={{fn (mut v8)}} /></td>
+      <td>material auto</td>
+    </tr>
+  </tbody>
+</table>
+
 <h2>Sizes</h2>
 
 <table>

diff --git a/vendor/ember-toggle/themes/flat.css b/vendor/ember-toggle/themes/flat.css
@@ -1,3 +1,12 @@
+/* Dark theme variables */
+:root{
+  --flat-track-dark: #2121218f;
+  --flat-thumb-dark: #e2e2e2;
+  --flat-border-dark: 3px solid #a3a3a3;
+  --flat-border-checked-dark: 3px solid #7fc6a6;
+}
+
+/* Default theme */
 .x-toggle-flat.x-toggle-btn {
   padding: 2px;
   -webkit-transition: all 0.2s ease;
@@ -44,14 +53,30 @@
 /* Dark mode styling */
 
 .x-toggle-flat.dark.x-toggle-btn {
-  background: #2121218f;
-  border: 3px solid #a3a3a3;
+  background: var(--flat-track-dark);
+  border: var(--flat-border-dark);
 }
 
 .x-toggle-flat.dark.x-toggle-btn::after {
-  background: #e2e2e2;
+  background: var(--flat-thumb-dark);
 }
 
 .x-toggle:checked + label .x-toggle-flat.dark.x-toggle-btn {
-  border: 3px solid #7fc6a6;
+  border: var(--flat-border-checked-dark);
 }
+
+/* Auto mode styling */
+@media (prefers-color-scheme: dark) {
+  .x-toggle-flat.auto.x-toggle-btn {
+    background: var(--flat-track-dark);
+    border: var(--flat-border-dark);
+  }
+
+  .x-toggle-flat.auto.x-toggle-btn::after {
+    background: var(--flat-thumb-dark);
+  }
+
+  .x-toggle:checked + label .x-toggle-flat.auto.x-toggle-btn {
+    border: var(--flat-border-checked-dark);
+  }
+}
diff --git a/vendor/ember-toggle/themes/ios.css b/vendor/ember-toggle/themes/ios.css
@@ -1,3 +1,11 @@
+/* Dark theme variables */
+:root{
+  --ios-track-dark: #2121218f;
+  --ios-border-dark: 1px solid #646464;
+  --ios-thumb-checked-dark: #86d993;
+}
+
+/* Default theme */
 .x-toggle-ios.x-toggle-btn {
   background: #fbfbfb;
   border-radius: 2em;
@@ -54,10 +62,22 @@
 
 /* Dark mode styling */
 .x-toggle-ios.dark.x-toggle-btn {
-  background: #2121218f;
-  border: 1px solid #646464;
+  background: var(--ios-track-dark);
+  border: var( --ios-border-dark);
 }
 
 .x-toggle:checked + label > .x-toggle-ios.dark.x-toggle-btn {
-  background: #86d993;
+  background: var(--ios-thumb-checked-dark);
+}
+
+/* Auto mode styling */
+@media (prefers-color-scheme: dark) {
+  .x-toggle-ios.auto.x-toggle-btn {
+    background: var(--ios-track-dark);
+    border: var( --ios-border-dark);
+  }
+
+  .x-toggle:checked + label > .x-toggle-ios.auto.x-toggle-btn {
+    background: var(--ios-thumb-checked-dark);
+  }
 }
diff --git a/vendor/ember-toggle/themes/material.css b/vendor/ember-toggle/themes/material.css
@@ -1,3 +1,8 @@
+/* Dark theme variables */
+:root{
+  --material-track-dark: #727272;
+}
+
 .x-toggle-material.x-toggle-btn {
   position: relative;
   -webkit-transition: all 0.4s ease;
@@ -88,14 +93,28 @@
 
 /* Background */
 .x-toggle-material.dark.x-toggle-btn::before {
-  background-color: #727272;
+  background-color: var(--material-track-dark);
 }
 
 /* Disabled */
 .x-toggle-material.dark.x-toggle-btn.x-toggle-disabled::before,
 .x-toggle:checked
   + label
   > .x-toggle-material.dark.x-toggle-btn.x-toggle-disabled::before {
-  background-color: #727272;
-  opacity: 0.12;
+  background-color: var(--material-track-dark);
+}
+
+/* Auto mode styling */
+@media (prefers-color-scheme: dark) {
+  .x-toggle-material.auto.x-toggle-btn::before {
+    background-color: var(--material-track-dark);
+  }
+
+  /* Disabled */
+  .x-toggle-material.auto.x-toggle-btn.x-toggle-disabled::before,
+  .x-toggle:checked
+    + label
+    > .x-toggle-material.auto.x-toggle-btn.x-toggle-disabled::before {
+    background-color: var(--material-track-dark);
+  } 
 }