feat: Add dark variant for ios, flat and material themes. (#144)

* Added dark theme for ios, flat and material.

* Added @variant for dark theme.

README.md

@@ -43,11 +43,17 @@ Check the [demo] for interactive examples.
 - `'skewed'`
 - `'material'`
 
+
+![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.
+
 > Example of changing the theme
 
 ```hbs
 <XToggle
   @theme='ios'
+  @variant='dark'
   @value={{this.toggled}}
   @onToggle={{fn (mut this.toggled)}}
 />
@@ -86,7 +92,8 @@ 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', 'flip', 'skewed', 'default'.
+- `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.
   Defaults to 'default' if not specified.
 - `size` - One of 'small', 'medium', 'large'.
   Defaults to 'medium' if not specified.

addon/components/x-toggle-switch/template.hbs

@@ -25,6 +25,7 @@
       role='checkbox'
       class="x-toggle-btn
         {{this.themeClass}}
+        {{this.variant}}
         {{@size}}
         {{if @disabled ' x-toggle-disabled'}}
       "

addon/components/x-toggle/template.hbs

@@ -19,6 +19,7 @@
           onLabel=this.onLabel
           size=this.size
           theme=this.theme
+          variant=this.variant
           toggled=this.toggled
           value=this.value
           sendToggle=this.sendToggle
@@ -64,6 +65,7 @@
       onLabel=this.onLabel
       size=this.size
       theme=this.theme
+      variant=this.variant
       toggled=this.toggled
       value=this.value
       sendToggle=this.sendToggle

app/components/x-toggle.js

@@ -6,6 +6,7 @@ const config = ENV['ember-toggle'] || {};
 export default XToggle.extend({
   /* eslint-disable ember/avoid-leaking-state-in-ember-objects */
   theme: config.defaultTheme || 'default',
+  variant: config.defaultVariant || '',
   defaultOffLabel: config.defaultOffLabel || 'Off::off',
   defaultOnLabel: config.defaultOnLabel || 'On::on',
   showLabels: config.defaultShowLabels || false,

index.js

@@ -27,11 +27,14 @@ module.exports = {
     var allThemes = [
       'light',
       'ios',
+      'ios dark',
       'default',
       'flat',
+      'flat dark',
       'skewed',
       'flip',
       'material',
+      'material dark',
     ];
     var included = config.includedThemes;
     var excluded = config.excludedThemes;

tests/dummy/app/styles/app.css

@@ -48,3 +48,8 @@ table.condensed td {
   margin: 0;
   padding: 0;
 }
+
+table.dark {
+  background-color: #212121;
+  color: #eee;
+}

tests/dummy/app/templates/application.hbs

@@ -4,17 +4,14 @@
 {{! template-lint-disable block-indentation attribute-indentation}}
 <table>
   <tbody>
-
     <tr>
       <td><XToggle @name={{1}} @theme="default" @value={{v1}} @onToggle={{fn (mut v1)}} /></td>
       <td>default</td>
       <td><XToggle @name={{2}} @theme="light" @value={{v2}} @onToggle={{fn (mut v2)}} /></td>
       <td>light</td>
     </tr>
     <tr>
-      <td>
-        <XToggle @name={{3}} @theme="ios" @value={{v3}} @onToggle={{fn (mut v3)}} />
-      </td>
+      <td><XToggle @name={{3}} @theme="ios" @value={{v3}} @onToggle={{fn (mut v3)}} /></td>
       <td>ios</td>
       <td><XToggle @name={{4}} @theme="flat" @value={{v4}} @onToggle={{fn (mut v4)}} /></td>
       <td>flat</td>
@@ -32,6 +29,21 @@
   </tbody>
 </table>
 
+<table class="dark">
+  <tbody>
+    <tr>
+      <td><XToggle @name={{3}} @theme="ios" @variant="dark" @value={{v3}} @onToggle={{fn (mut v3)}} /></td>
+      <td>ios dark</td>
+      <td><XToggle @name={{4}} @theme="flat" @variant="dark" @value={{v4}} @onToggle={{fn (mut v4)}} /></td>
+      <td>flat dark</td>
+    </tr>
+    <tr>
+      <td><XToggle @name={{7}} @theme="material" @variant="dark" @value={{v8}} @onToggle={{fn (mut v8)}} /></td>
+      <td>material dark</td>
+    </tr>
+  </tbody>
+</table>
+
 <h2>Sizes</h2>
 
 <table>

vendor/ember-toggle/themes/flat.css

@@ -15,7 +15,7 @@
   border-radius: 1em;
 }
 
-.x-toggle:checked + .label .x-toggle-flat.x-toggle-btn {
+.x-toggle:checked + label .x-toggle-flat.x-toggle-btn {
   border: 4px solid #7fc6a6;
 }
 
@@ -40,3 +40,18 @@
   height: 2.1em;
   padding: 4px;
 }
+
+/* Dark mode styling */
+
+.x-toggle-flat.dark.x-toggle-btn {
+  background: #2121218f;
+  border: 3px solid #a3a3a3;
+}
+
+.x-toggle-flat.dark.x-toggle-btn::after {
+  background: #e2e2e2;
+}
+
+.x-toggle:checked + label .x-toggle-flat.dark.x-toggle-btn {
+  border: 3px solid #7fc6a6;
+}

vendor/ember-toggle/themes/ios.css

@@ -24,7 +24,7 @@
 }
 
 .x-toggle:checked + label > .x-toggle-ios.x-toggle-btn {
-  background: #86d993;
+  background: #54d159;
 }
 
 .x-toggle:checked + label > .x-toggle-ios.x-toggle-btn:active {
@@ -51,3 +51,13 @@
   height: 2.1em;
   padding: 4px;
 }
+
+/* Dark mode styling */
+.x-toggle-ios.dark.x-toggle-btn {
+  background: #2121218f;
+  border: 1px solid #646464;
+}
+
+.x-toggle:checked + label > .x-toggle-ios.dark.x-toggle-btn {
+  background: #86d993;
+}

vendor/ember-toggle/themes/material.css

@@ -83,3 +83,19 @@
 .x-toggle-material.large::before {
   margin: 0.4em 0;
 }
+
+/* Dark mode styling */
+
+/* Background */
+.x-toggle-material.dark.x-toggle-btn::before {
+  background-color: #727272;
+}
+
+/* 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;
+}