From cf18be5aa9d29dd2c79461269f30ccd1fadfc818 Mon Sep 17 00:00:00 2001
From: Istvan Halmen <dioslaska@gmail.com>
Date: Wed, 29 Jan 2020 11:22:48 +0200
Subject: [PATCH] Merge 4.10.2 changes

---
 .babelrc                                      |  23 +-
 package.json                                  |   2 +-
 packages/angular/package.json                 |   2 +-
 packages/angularjs/package.json               |   2 +-
 packages/javascript/package.json              |   2 +-
 packages/jquery/package.json                  |   2 +-
 packages/react/package.json                   |   2 +-
 src/js/classes/progress.js                    |   5 +-
 src/js/classes/scroller.js                    |   3 +-
 src/js/classes/scrollview-base.js             |   3 +-
 src/js/classes/stepper.js                     |  12 +-
 src/js/core/core.js                           |   4 +-
 src/js/core/dom.js                            | 105 +++++----
 src/js/forms.react.jsx                        |   2 +-
 src/js/frameworks/react.jsx                   |   5 +
 src/js/input.angular.ts                       |  13 +-
 src/js/themes/material.js                     |   6 +-
 src/js/util/dom.js                            |  50 ++++-
 src/js/util/platform.js                       |   6 +-
 src/js/util/resize-observer.js                |  58 +++--
 src/scss/core/base.scss                       |  88 ++++++++
 src/scss/core/ios.scss                        | 203 ++++--------------
 src/scss/core/material.ripple.scss            |   6 +-
 src/scss/core/material.scss                   |  92 +++-----
 src/scss/core/mobiscroll.scss                 |  73 +++----
 src/scss/core/windows.scss                    | 109 +++-------
 src/scss/forms/forms.ios.colors.scss          | 156 ++++++++++++--
 src/scss/forms/forms.ios.scss                 |   2 +-
 src/scss/forms/forms.material.colors.scss     | 155 ++++++++++---
 src/scss/forms/forms.material.scss            |   2 +-
 src/scss/forms/forms.mobiscroll.colors.scss   | 137 +++++++++---
 src/scss/forms/forms.mobiscroll.scss          |  78 +++----
 src/scss/forms/forms.scss                     |   5 +
 src/scss/forms/forms.windows.colors.scss      | 136 ++++++++++--
 src/scss/forms/forms.windows.scss             |   2 +-
 src/scss/frame/frame.ios.colors.scss          | 105 +++++++--
 src/scss/frame/frame.ios.scss                 |   2 +-
 src/scss/frame/frame.material.colors.scss     |  56 ++++-
 src/scss/frame/frame.material.scss            |   2 +-
 src/scss/frame/frame.mobiscroll.colors.scss   |  49 ++++-
 src/scss/frame/frame.mobiscroll.scss          |   2 +-
 src/scss/frame/frame.windows.colors.scss      |  59 ++++-
 src/scss/frame/frame.windows.scss             |   2 +-
 src/scss/input/input.ios.colors.scss          |  65 +++++-
 src/scss/input/input.ios.scss                 |   2 +-
 src/scss/input/input.material.colors.scss     |  73 ++++++-
 src/scss/input/input.material.scss            |   2 +-
 src/scss/input/input.mobiscroll.colors.scss   |  61 +++++-
 src/scss/input/input.mobiscroll.scss          |   2 +-
 src/scss/input/input.windows.colors.scss      |  70 +++++-
 src/scss/input/input.windows.scss             |   2 +-
 .../notifications.windows.colors.scss         |  15 +-
 src/scss/page/page.ios.colors.scss            |  42 +++-
 src/scss/page/page.ios.scss                   |   2 +-
 src/scss/page/page.material.colors.scss       |  36 +++-
 src/scss/page/page.material.scss              |   2 +-
 src/scss/page/page.mobiscroll.colors.scss     |  32 ++-
 src/scss/page/page.mobiscroll.scss            |   2 +-
 src/scss/page/page.windows.colors.scss        |  43 +++-
 src/scss/page/page.windows.scss               |   2 +-
 .../progress/progress.mobiscroll.colors.scss  |  20 +-
 src/scss/scroller/scroller.ios.colors.scss    |  72 +++++--
 src/scss/scroller/scroller.ios.scss           |   6 +-
 .../scroller/scroller.material.colors.scss    |  10 +-
 src/scss/scroller/scroller.material.scss      |   2 +-
 .../scroller/scroller.mobiscroll.colors.scss  |  14 +-
 src/scss/scroller/scroller.mobiscroll.scss    |   2 +-
 src/scss/scroller/scroller.scss               |   6 +
 .../scroller/scroller.windows.colors.scss     |  33 ++-
 src/scss/scroller/scroller.windows.scss       |   2 +-
 src/scss/slider/slider.windows.colors.scss    |  23 +-
 71 files changed, 1729 insertions(+), 742 deletions(-)
 create mode 100644 src/scss/core/base.scss

diff --git a/.babelrc b/.babelrc
index 53b7ff6d..d6644cfb 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,14 +1,15 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
+    "presets": [
+        "@babel/preset-react",
+        [
+            "@babel/preset-env",
+            {
+                "loose": true,
+                "modules": false
+            }
+        ]
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
     ]
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 1eeb3504..6ca68690 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mobiscroll",
-  "version": "4.9.0",
+  "version": "4.10.2",
   "description": "Cross platform UI controls for progressive web an hybrid apps",
   "homepage": "https://mobiscroll.com/",
   "license": "Apache-2.0",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 9418c0f0..2d74ba35 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/angular-lite",
-    "version": "4.9.0",
+    "version": "4.10.2",
     "description": "Angular UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
diff --git a/packages/angularjs/package.json b/packages/angularjs/package.json
index 27309e28..e456aba7 100644
--- a/packages/angularjs/package.json
+++ b/packages/angularjs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/angularjs-lite",
-    "version": "4.9.0",
+    "version": "4.10.2",
     "description": "AngularJS UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
diff --git a/packages/javascript/package.json b/packages/javascript/package.json
index 378e5d99..71f5c296 100644
--- a/packages/javascript/package.json
+++ b/packages/javascript/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/javascript-lite",
-    "version": "4.9.0",
+    "version": "4.10.2",
     "description": "Framework agnostic UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
diff --git a/packages/jquery/package.json b/packages/jquery/package.json
index 12a14a82..01b599b5 100644
--- a/packages/jquery/package.json
+++ b/packages/jquery/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/jquery-lite",
-    "version": "4.9.0",
+    "version": "4.10.2",
     "description": "jQuery and jQuery Mobile UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 957fb667..c3f610cd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/react-lite",
-    "version": "4.9.0",
+    "version": "4.10.2",
     "description": "React UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
diff --git a/src/js/classes/progress.js b/src/js/classes/progress.js
index 038202f4..2e74ee11 100644
--- a/src/js/classes/progress.js
+++ b/src/js/classes/progress.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-unused-vars
 import { mobiscroll } from '../core/core'; // mobiscroll needed for trial
-/* eslint-enable no-unused-vars */
 import { $, classes, autoInit } from '../core/core';
 import { ProgressBase } from './progress-base';
 import { addIcon, wrapLabel } from './form-control';
@@ -210,4 +209,4 @@ Progress.prototype = {
 classes.Progress = Progress;
 
 // Init mbsc-progress elements on page load
-autoInit('[mbsc-progress]', Progress);
\ No newline at end of file
+autoInit('[mbsc-progress]', Progress);
diff --git a/src/js/classes/scroller.js b/src/js/classes/scroller.js
index e7360578..d158c99c 100644
--- a/src/js/classes/scroller.js
+++ b/src/js/classes/scroller.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-unused-vars
 import { mobiscroll } from '../core/core'; // mobiscroll needed for trial
-/* eslint-enable no-unused-vars */
 import { $, extend, classes } from '../core/core';
 import { cssPrefix, jsPrefix } from '../util/dom';
 import { isNumeric, objectToArray } from '../util/misc';
diff --git a/src/js/classes/scrollview-base.js b/src/js/classes/scrollview-base.js
index 066f4dd8..9fc5bcf3 100644
--- a/src/js/classes/scrollview-base.js
+++ b/src/js/classes/scrollview-base.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-unused-vars
 import { $, Base, mobiscroll } from '../core/core'; // mobiscroll needed for trial
-/* eslint-enable no-unused-vars */
 import { os, raf, rafc } from '../util/platform';
 import { getCoord } from '../util/tap';
 import { cssPrefix, jsPrefix, getPosition, testTouch } from '../util/dom';
diff --git a/src/js/classes/stepper.js b/src/js/classes/stepper.js
index 38713ad4..ff48d94a 100644
--- a/src/js/classes/stepper.js
+++ b/src/js/classes/stepper.js
@@ -126,14 +126,16 @@ export const Stepper = function (control, settings) {
         }
 
         if (cssClass) {
-            $parent.removeClass(cssClass)
-            $parent.find('.mbsc-segmented').removeClass(cssClass);
+            $parent
+                .removeClass(cssClass)
+                .find('.mbsc-segmented').removeClass(cssClass);
         }
 
         cssClass = 'mbsc-' + s.theme + (theme.baseTheme ? ' mbsc-' + theme.baseTheme : '') + (s.rtl ? ' mbsc-rtl' : ' mbsc-ltr');
 
-        $parent.addClass(cssClass)
-        $parent.find('.mbsc-segmented').addClass(cssClass);
+        $parent
+            .addClass(cssClass)
+            .find('.mbsc-segmented').addClass(cssClass);
 
         $btnMinus = $('.mbsc-stepper-minus', $parent);
         $btnPlus = $('.mbsc-stepper-plus', $parent);
@@ -192,4 +194,4 @@ Stepper.prototype = {
 classes.Stepper = Stepper;
 
 // Init mbsc-stepper elements on page load
-autoInit('[mbsc-stepper]', Stepper);
\ No newline at end of file
+autoInit('[mbsc-stepper]', Stepper);
diff --git a/src/js/core/core.js b/src/js/core/core.js
index c1630985..7488d708 100644
--- a/src/js/core/core.js
+++ b/src/js/core/core.js
@@ -1,5 +1,5 @@
 /*!
- * Mobiscroll v4.9.0
+ * Mobiscroll v4.10.2
  * http://mobiscroll.com
  * 
  *
@@ -104,7 +104,7 @@ extend(util, {
 
 ms = extend(mobiscroll, {
     $: $,
-    version: '4.9.0',
+    version: '4.10.2',
     autoTheme: 'mobiscroll',
     themes: {
         form: {},
diff --git a/src/js/core/dom.js b/src/js/core/dom.js
index 1e3af715..7d7b8205 100644
--- a/src/js/core/dom.js
+++ b/src/js/core/dom.js
@@ -302,44 +302,41 @@ var Dom = (function () {
         },
         //Events
         on: function (eventName, targetSelector, listener, capture) {
-            var events = eventName.split(' '),
+            var boundListener,
+                elm,
+                event,
+                events = eventName.split(' '),
                 i, j;
 
             function handleLiveEvent(e) {
-                var k,
-                    parents,
-                    target = e.target;
-
-                if ($(target).is(targetSelector)) {
-                    listener.call(target, e);
-                } else {
-                    parents = $(target).parents();
-                    for (k = 0; k < parents.length; k++) {
-                        if ($(parents[k]).is(targetSelector)) {
-                            listener.call(parents[k], e);
-                        }
+                var target = e.target;
+                while (target) {
+                    if ($(target).is(targetSelector)) {
+                        listener.call(target, e);
                     }
+                    target = target !== this ? target.parentNode : null;
                 }
             }
 
-            function handleNamespaces(elm, name, listener, capture) {
+            function handleNamespaces(el, name, listener, capture) {
                 var namespace = name.split('.');
 
-                if (!elm.DomNameSpaces) {
-                    elm.DomNameSpaces = [];
+                if (!el.DomNameSpaces) {
+                    el.DomNameSpaces = [];
                 }
 
-                elm.DomNameSpaces.push({
+                el.DomNameSpaces.push({
                     namespace: namespace[1],
                     event: namespace[0],
                     listener: listener,
                     capture: capture
                 });
 
-                elm.addEventListener(namespace[0], listener, capture);
+                el.addEventListener(namespace[0], listener, capture);
             }
 
             for (i = 0; i < this.length; i++) {
+                elm = this[i];
                 if (isFunction(targetSelector) || targetSelector === false) {
                     // Usual events
                     if (isFunction(targetSelector)) {
@@ -347,29 +344,33 @@ var Dom = (function () {
                         listener = targetSelector;
                     }
                     for (j = 0; j < events.length; j++) {
+                        event = events[j];
                         // check for namespaces
-                        if (events[j].indexOf('.') != -1) {
-                            handleNamespaces(this[i], events[j], listener, capture);
+                        if (event.indexOf('.') != -1) {
+                            handleNamespaces(elm, event, listener, capture);
                         } else {
-                            this[i].addEventListener(events[j], listener, capture);
+                            elm.addEventListener(event, listener, capture);
                         }
                     }
                 } else {
                     // Live events
+                    boundListener = handleLiveEvent.bind(elm);
                     for (j = 0; j < events.length; j++) {
-                        if (!this[i].DomLiveListeners) {
-                            this[i].DomLiveListeners = [];
+                        event = events[j];
+
+                        if (!elm.DomLiveListeners) {
+                            elm.DomLiveListeners = [];
                         }
 
-                        this[i].DomLiveListeners.push({
+                        elm.DomLiveListeners.push({
                             listener: listener,
-                            liveListener: handleLiveEvent
+                            liveListener: boundListener
                         });
 
-                        if (events[j].indexOf('.') != -1) {
-                            handleNamespaces(this[i], events[j], handleLiveEvent, capture);
+                        if (event.indexOf('.') != -1) {
+                            handleNamespaces(elm, event, boundListener, capture);
                         } else {
-                            this[i].addEventListener(events[j], handleLiveEvent, capture);
+                            elm.addEventListener(event, boundListener, capture);
                         }
                     }
                 }
@@ -377,31 +378,37 @@ var Dom = (function () {
             return this;
         },
         off: function (eventName, targetSelector, listener, capture) {
-            var events,
+            var elm,
+                event,
+                events,
                 i, j, k,
+                liveListeners,
                 that = this;
 
             function removeEvents(event) {
-                var i, j,
+                var el,
+                    i, j,
                     item,
+                    nameSpaces,
                     parts = event.split('.'),
                     name = parts[0],
                     ns = parts[1];
 
                 for (i = 0; i < that.length; ++i) {
-                    if (that[i].DomNameSpaces) {
-                        for (j = 0; j < that[i].DomNameSpaces.length; ++j) {
-                            item = that[i].DomNameSpaces[j];
-
+                    el = that[i];
+                    nameSpaces = el.DomNameSpaces;
+                    if (nameSpaces) {
+                        for (j = 0; j < nameSpaces.length; ++j) {
+                            item = nameSpaces[j];
                             if (item.namespace == ns && (item.event == name || !name)) {
-                                that[i].removeEventListener(item.event, item.listener, item.capture);
+                                el.removeEventListener(item.event, item.listener, item.capture);
                                 item.removed = true;
                             }
                         }
                         // remove the events from the DomNameSpaces array
-                        for (j = that[i].DomNameSpaces.length - 1; j >= 0; --j) {
-                            if (that[i].DomNameSpaces[j].removed) {
-                                that[i].DomNameSpaces.splice(j, 1);
+                        for (j = nameSpaces.length - 1; j >= 0; --j) {
+                            if (nameSpaces[j].removed) {
+                                nameSpaces.splice(j, 1);
                             }
                         }
                     }
@@ -411,7 +418,10 @@ var Dom = (function () {
             events = eventName.split(' ');
 
             for (i = 0; i < events.length; i++) {
+                event = events[i];
                 for (j = 0; j < this.length; j++) {
+                    elm = this[j];
+                    liveListeners = elm.DomLiveListeners;
                     if (isFunction(targetSelector) || targetSelector === false) {
                         // Usual events
                         if (isFunction(targetSelector)) {
@@ -419,22 +429,22 @@ var Dom = (function () {
                             listener = targetSelector;
                         }
 
-                        if (events[i].indexOf('.') === 0) { // remove namespace events
-                            removeEvents(events[i].substr(1), listener, capture);
+                        if (event.indexOf('.') === 0) { // remove namespace events
+                            removeEvents(event.substr(1), listener, capture);
                         } else {
-                            this[j].removeEventListener(events[i], listener, capture);
+                            elm.removeEventListener(event, listener, capture);
                         }
                     } else {
                         // Live event
-                        if (this[j].DomLiveListeners) {
-                            for (k = 0; k < this[j].DomLiveListeners.length; k++) {
-                                if (this[j].DomLiveListeners[k].listener === listener) {
-                                    this[j].removeEventListener(events[i], this[j].DomLiveListeners[k].liveListener, capture);
+                        if (liveListeners) {
+                            for (k = 0; k < liveListeners.length; k++) {
+                                if (liveListeners[k].listener === listener) {
+                                    elm.removeEventListener(event, liveListeners[k].liveListener, capture);
                                 }
                             }
                         }
-                        if (this[j].DomNameSpaces && this[j].DomNameSpaces.length && events[i]) {
-                            removeEvents(events[i]);
+                        if (elm.DomNameSpaces && elm.DomNameSpaces.length && event) {
+                            removeEvents(event);
                         }
                     }
                 }
@@ -1072,6 +1082,7 @@ $.each = function (obj, callback) {
     } else {
         // Object
         for (prop in obj) {
+            // eslint-disable-next-line no-prototype-builtins
             if (obj.hasOwnProperty(prop) && prop !== 'length') {
                 if (callback.call(obj[prop], prop, obj[prop]) === false) {
                     break;
diff --git a/src/js/forms.react.jsx b/src/js/forms.react.jsx
index abcd78b7..2ce550c5 100644
--- a/src/js/forms.react.jsx
+++ b/src/js/forms.react.jsx
@@ -190,7 +190,7 @@ class MbscLabel extends React.Component {
         return cssClass;
     }
 
-    render = () => {
+    render() {
         /* eslint-disable no-unused-vars */
         // justification: variable 'valid' and 'className' is declared due to object decomposition
         var {
diff --git a/src/js/frameworks/react.jsx b/src/js/frameworks/react.jsx
index a49b5e44..a751c65a 100644
--- a/src/js/frameworks/react.jsx
+++ b/src/js/frameworks/react.jsx
@@ -179,6 +179,8 @@ export const CalbasePropTypes = {
     moreEventsPluralText: stringType,
     moreEventsText: stringType,
     onTabChange: funcType,
+    onCellHoverIn: funcType,
+    onCellHoverOut: funcType,
     onDayChange: funcType,
     onLabelTap: funcType,
     onMonthChange: funcType,
@@ -239,6 +241,7 @@ export function deepCompare(a, b) {
             return false;
         }
 
+        // eslint-disable-next-line no-prototype-builtins
         if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
             return false;
         }
@@ -259,6 +262,7 @@ export function deepCompare(a, b) {
         // Quick checking of one object beeing a subset of another.
         // todo: cache the structure of arguments[0] for performance
         for (p in y) {
+            // eslint-disable-next-line no-prototype-builtins
             if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
                 return false;
             } else if (typeof y[p] !== typeof x[p]) {
@@ -275,6 +279,7 @@ export function deepCompare(a, b) {
         };
         const props = reactElement ? elementProps : x;
         for (p in props) {
+            // eslint-disable-next-line no-prototype-builtins
             if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
                 return false;
             } else if (typeof y[p] !== typeof x[p]) {
diff --git a/src/js/input.angular.ts b/src/js/input.angular.ts
index 2f09c3cb..ccc846fa 100644
--- a/src/js/input.angular.ts
+++ b/src/js/input.angular.ts
@@ -261,9 +261,12 @@ export class MbscInputBase extends MbscFormValueBase {
 
 @Component({
     selector: 'mbsc-input',
-    host: { '[class.mbsc-control-ng]': 'controlNg' },
+    host: {
+        '[class.mbsc-control-ng]': 'controlNg',
+        '[class.mbsc-err]': 'error'
+    },
     template: `
-        <label 
+        <label
             [class.mbsc-err]="error" [class.mbsc-select]="dropdown"
             [class.mbsc-input-box]="inputStyle == 'box'"
             [class.mbsc-input-outline]="inputStyle == 'outline'"
@@ -285,7 +288,7 @@ export class MbscInputBase extends MbscFormValueBase {
                     [attr.max]="max"
                     [attr.minlength]="minlength"
                     [attr.maxlength]="maxlength"
-                    [attr.autocomplete]="autocomplete" 
+                    [attr.autocomplete]="autocomplete"
                     [attr.autocapitalize]="autocapitalize"
                     [attr.autocorrect]="autocorrect"
                     [attr.spellcheck]="spellcheck"
@@ -311,12 +314,12 @@ export class MbscInput extends MbscInputBase {
     min: number;
     @Input()
     max: number;
-    
+
     @Input()
     step: number;
     @Input()
     pattern: string;
-    
+
     @Input()
     accept: string;
     @Input()
diff --git a/src/js/themes/material.js b/src/js/themes/material.js
index 5946e632..09c2e816 100644
--- a/src/js/themes/material.js
+++ b/src/js/themes/material.js
@@ -7,16 +7,18 @@ export default mobiscroll;
 function addRipple($control, ev) {
     var x = getCoord(ev, 'X', true),
         y = getCoord(ev, 'Y', true),
+        control = $control[0],
         rect = $control.offset(),
         left = x - rect.left,
         top = y - rect.top,
-        width = Math.max(left, $control[0].offsetWidth - left),
-        height = Math.max(top, $control[0].offsetHeight - top),
+        width = Math.max(left, control.offsetWidth - left),
+        height = Math.max(top, control.offsetHeight - top),
         size = 2 * Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
 
     removeRipple($ripple);
 
     $ripple = $('<span class="mbsc-ripple"></span>').css({
+        backgroundColor: getComputedStyle(control).color,
         width: size,
         height: size,
         top: y - rect.top - size / 2,
diff --git a/src/js/util/dom.js b/src/js/util/dom.js
index 72025225..d6fa9e12 100644
--- a/src/js/util/dom.js
+++ b/src/js/util/dom.js
@@ -98,6 +98,44 @@ function smoothScroll(el, to, prevAnim, callback) {
     }
 }
 
+function listen(el, event, handler, opt) {
+    if (el) {
+        el.addEventListener(event, handler, opt);
+    }
+}
+
+function unlisten(el, event, handler) {
+    if (el) {
+        el.removeEventListener(event, handler);
+    }
+}
+
+function setFocusInvisible() {
+    win.__mbscFocusVisible = false;
+}
+
+function setFocusVisible() {
+    win.__mbscFocusVisible = true;
+}
+
+function addWindowFocus() {
+    let focusCount = win.__mbscFocusCount || 0;
+    if (focusCount === 0) {
+        listen(win, 'mousedown', setFocusInvisible, true);
+        listen(win, 'keydown', setFocusVisible, true);
+    }
+    win.__mbscFocusCount = ++focusCount;
+}
+
+function removeWindowFocus() {
+    let focusCount = win.__mbscFocusCount || 0;
+    win.__mbscFocusCount = --focusCount;
+    if (win.__mbscFocusCount === 0) {
+        unlisten(win, 'mousedown', setFocusInvisible);
+        unlisten(win, 'keydown', setFocusVisible);
+    }
+}
+
 var animEnd,
     mod,
     cssPrefix,
@@ -106,12 +144,14 @@ var animEnd,
     isWebView,
     isWkWebView,
     jsPrefix,
+    win,
     textColors = {};
 
 if (isBrowser) {
+    win = window;
     mod = document.createElement('modernizr').style;
     cssPrefix = testPrefix();
-    jsPrefix = cssPrefix.replace(/^\-/, '').replace(/\-$/, '').replace('moz', 'Moz');
+    jsPrefix = cssPrefix.replace(/^-/, '').replace(/-$/, '').replace('moz', 'Moz');
     animEnd = mod.animation !== undefined ? 'animationend' : 'webkitAnimationEnd';
     hasTransition = mod.transition !== undefined;
     // UIWebView on iOS still has the ghost click, 
@@ -119,18 +159,22 @@ if (isBrowser) {
     // In addition in iOS 12.2 if we enable tap handling, it brakes the form inputs
     // (keyboard appears, but the cursor is not in the input).
     isWebView = os === 'ios' && !isSafari;
-    isWkWebView = isWebView && window.webkit && window.webkit.messageHandlers;
+    isWkWebView = isWebView && win.webkit && win.webkit.messageHandlers;
     hasGhostClick = mod.touchAction === undefined || (isWebView && !isWkWebView);
 }
 
 export {
+    addWindowFocus,
     animEnd,
     cssPrefix,
     jsPrefix,
+    listen,
     getPosition,
     getTextColor,
     hasGhostClick,
     hasTransition,
+    removeWindowFocus,
     smoothScroll,
-    testTouch
+    testTouch,
+    unlisten
 };
diff --git a/src/js/util/platform.js b/src/js/util/platform.js
index dae0cba2..b35f5338 100644
--- a/src/js/util/platform.js
+++ b/src/js/util/platform.js
@@ -4,7 +4,7 @@ var os,
     minorVersion,
     version = [],
     isBrowser = typeof window !== 'undefined',
-    isDark = isBrowser && matchMedia('(prefers-color-scheme:dark)').matches,
+    isDark = isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches,
     userAgent = isBrowser ? navigator.userAgent : '',
     platform = isBrowser ? navigator.platform : '',
     maxTouchPoints = isBrowser ? navigator.maxTouchPoints : 0,
@@ -19,7 +19,7 @@ var os,
 
 if (/Android/i.test(device)) {
     os = 'android';
-    vers = userAgent.match(/Android\s+([\d\.]+)/i);
+    vers = userAgent.match(/Android\s+([\d.]+)/i);
     if (vers) {
         version = vers[0].replace('Android ', '').split('.');
     }
@@ -29,7 +29,7 @@ if (/Android/i.test(device)) {
     // In this case we check `navigator.platform` and `navigator.maxTouchPoints`.
     // maxTouchPoints is needed to exclude desktop Mac OS X.
     os = 'ios';
-    vers = userAgent.match(/OS\s+([\d\_]+)/i);
+    vers = userAgent.match(/OS\s+([\d_]+)/i);
     if (vers) {
         version = vers[0].replace(/_/g, '.').replace('OS ', '').split('.');
     }
diff --git a/src/js/util/resize-observer.js b/src/js/util/resize-observer.js
index e67c8156..16059118 100644
--- a/src/js/util/resize-observer.js
+++ b/src/js/util/resize-observer.js
@@ -6,6 +6,9 @@ const markup =
     '<div style="' + style + '"><div style="' + innerStyle + '"></div></div>' +
     '<div style="' + style + '"><div style="' + innerStyle + 'width:200%;height:200%;"></div></div>';
 
+let observer;
+let count = 0;
+
 export function resizeObserver(el, callback, zone) {
 
     function reset() {
@@ -47,6 +50,7 @@ export function resizeObserver(el, callback, zone) {
 
     let expand;
     let expandChild;
+    let helper;
     let hiddenRafId;
     let rafId;
     let shrink;
@@ -54,31 +58,51 @@ export function resizeObserver(el, callback, zone) {
     let lastCheck = 0;
     //let isHidden = true;
 
-    const helper = document.createElement('div');
-
-    helper.innerHTML = markup;
-    helper.dir = 'ltr'; // Need this to work in rtl as well;
-    shrink = helper.childNodes[1];
-    expand = helper.childNodes[0];
-    expandChild = expand.childNodes[0];
+    if (window.ResizeObserver) {
+        if (!observer) {
+            observer = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    entry.target.__mbscResize();
+                }
+            });
+        }
+        count++;
+        el.__mbscResize = callback;
+        observer.observe(el);
+    } else {
+        helper = document.createElement('div');
+        helper.innerHTML = markup;
+        helper.dir = 'ltr'; // Need this to work in rtl as well;
+        shrink = helper.childNodes[1];
+        expand = helper.childNodes[0];
+        expandChild = expand.childNodes[0];
 
-    el.appendChild(helper);
+        el.appendChild(helper);
 
-    expand.addEventListener('scroll', onScroll);
-    shrink.addEventListener('scroll', onScroll);
+        expand.addEventListener('scroll', onScroll);
+        shrink.addEventListener('scroll', onScroll);
 
-    if (zone) {
-        zone.runOutsideAngular(function () {
+        if (zone) {
+            zone.runOutsideAngular(function () {
+                raf(checkHidden);
+            });
+        } else {
             raf(checkHidden);
-        });
-    } else {
-        raf(checkHidden);
+        }
     }
 
     return {
         detach: function () {
-            el.removeChild(helper);
-            stopCheck = true;
+            if (observer) {
+                count--;
+                observer.unobserve(el);
+                if (!count) {
+                    observer = null;
+                }
+            } else {
+                el.removeChild(helper);
+                stopCheck = true;
+            }
         }
     };
 }
diff --git a/src/scss/core/base.scss b/src/scss/core/base.scss
new file mode 100644
index 00000000..79ad5277
--- /dev/null
+++ b/src/scss/core/base.scss
@@ -0,0 +1,88 @@
+// Button color variables
+
+$mbsc-button-color-light: null !default;
+$mbsc-button-color-dark: null !default;
+$mbsc-button-text-light: null !default;
+$mbsc-button-text-dark: null !default;
+
+// Forms color variables
+
+$mbsc-form-background-light: null !default;
+$mbsc-form-background-dark: null !default;
+$mbsc-form-text-light: null !default;
+$mbsc-form-text-dark: null !default;
+$mbsc-form-accent-light: null !default;
+$mbsc-form-accent-dark: null !default;
+
+$mbsc-form-group-title-text-light: null !default;
+$mbsc-form-group-title-text-dark: null !default;
+
+// Input color variables
+
+$mbsc-input-background-light: null !default;
+$mbsc-input-background-dark: null !default;
+$mbsc-input-border-light: null !default;
+$mbsc-input-border-dark: null !default;
+$mbsc-input-text-light: null !default;
+$mbsc-input-text-dark: null !default;
+$mbsc-input-accent-light: null !default;
+$mbsc-input-accent-dark: null !default;
+$mbsc-input-error-light: null !default;
+$mbsc-input-error-dark: null !default;
+
+// Navigation color variables
+
+$mbsc-nav-background-light: null !default;
+$mbsc-nav-background-dark: null !default;
+$mbsc-nav-text-light: null !default;
+$mbsc-nav-text-dark: null !default;
+$mbsc-nav-accent-light: null !default;
+$mbsc-nav-accent-dark: null !default;
+
+// Card color variables
+
+$mbsc-card-background-light: null !default;
+$mbsc-card-background-dark: null !default;
+$mbsc-card-text-light: null !default;
+$mbsc-card-text-dark: null !default;
+
+// Page color variables
+
+$mbsc-page-background-light: null !default;
+$mbsc-page-background-dark: null !default;
+$mbsc-page-text-light: null !default;
+$mbsc-page-text-dark: null !default;
+
+// Listview color variables
+
+$mbsc-listview-background-light: null !default;
+$mbsc-listview-background-dark: null !default;
+$mbsc-listview-text-light: null !default;
+$mbsc-listview-text-dark: null !default;
+$mbsc-listview-accent-light: null !default;
+$mbsc-listview-accent-dark: null !default;
+$mbsc-listview-header-background-light: null !default;
+$mbsc-listview-header-background-dark: null !default;
+$mbsc-listview-header-text-light: null !default;
+$mbsc-listview-header-text-dark: null !default;
+
+// Frame color variables
+
+$mbsc-frame-background-light: null !default;
+$mbsc-frame-background-dark: null !default;
+$mbsc-frame-text-light: null !default;
+$mbsc-frame-text-dark: null !default;
+$mbsc-frame-accent-light: null !default;
+$mbsc-frame-accent-dark: null !default;
+$mbsc-frame-overlay-light: null !default;
+$mbsc-frame-overlay-dark: null !default;
+
+@function get-contrast-color($color) {
+  @if (lightness($color) > 65%) {
+    @return #000;
+  }
+
+  @else {
+    @return #fff;
+  }
+}
diff --git a/src/scss/core/ios.scss b/src/scss/core/ios.scss
index 80c6628e..260209fb 100644
--- a/src/scss/core/ios.scss
+++ b/src/scss/core/ios.scss
@@ -1,3 +1,5 @@
+@import './base.scss';
+
 $mbsc-ios-button: #007bff !default;
 $mbsc-ios-accent: #007bff !default;
 $mbsc-ios-background: #f7f7f7 !default;
@@ -18,228 +20,105 @@ $mbsc-ios-info: #5BB7C5 !default;
 $mbsc-ios-light: #fff !default;
 $mbsc-ios-dark: #47494A !default;
 
+$mbsc-ios-colors: ( // Colors map
+  'background': $mbsc-ios-background,
+  'text': $mbsc-ios-text,
+  'accent': $mbsc-ios-accent,
+);
+$mbsc-ios-dark-colors: ( // Colors map
+  'background': $mbsc-ios-dark-background,
+  'text': $mbsc-ios-dark-text,
+  'accent': $mbsc-ios-dark-accent,
+);
+
 @function mbsc-ios-colors($params) {
-  $background: map-get($params, background);
-  $text: map-get($params, text);
-  $accent: map-get($params, accent);
+  $background: map-get($params, 'background');
+  $text: map-get($params, 'text');
+  $accent: map-get($params, 'accent');
 
   $button: '';
 
-  @if (map-get($params, button)) {
-    $button: map-get($params, button);
+  @if (map-get($params, 'button')) {
+    $button: map-get($params, 'button');
   }
 
   @else {
-    $button: map-get($params, accent);
+    $button: map-get($params, 'accent');
   }
 
   $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
   $background-alt: lighten($background-limited, 3%);
   $card-shadow: darken($background, 17%);
-  $item-color: hsl(hue($text), saturation($text), 62%);
   $cont-background: lighten($background, 6%);
 
   $border-color: '';
-  $top-bottom-border: '';
-  $top-bottom-wheel-border: '';
-  $button-active: '';
-  $popup-shadow: '';
-  $popup-arrow-shadow: '';
   $popup-border: '';
-  $item-3d: '';
-  $background-desktop: '';
-  $cal-text: '';
-  $button-contrast: '';
   $label-text: '';
   $button-disabled: '';
-  $form-background: '';
-  $form-selection: '';
-  $form-text: '';
-  $icon-color: '';
-  $title-color: '';
-  $disabled-color: '';
-  $button-background: '';
-  $disabled-background: '';
   $switch-background: '';
-  $track-background: '';
-  $track-border: '';
   $snackbar-button: '';
   $slider-tooltip: '';
   $slider-track-step: '';
-  $item-active: '';
-  $lv_handle: '';
-  $lv-item: '';
-  $lv-icon: '';
   $text-alt: '';
-  $popup-background: '';
-  $cal-text-contrast: '';
   $background-overlay: '';
-  $item-selected: '';
-  $switch-track: '';
   $empty-color: '';
   $btn-cont-background: '';
-  $background-contrast: '';
-  $top-bottom-frame: '';
 
-  // Light background 
+  // Light background
   @if (lightness($background) > 50%) {
     $border-color: darken($background-limited, 17%);
-    $top-bottom-border: darken($background, 41%);
-    $top-bottom-wheel-border: darken($background-limited, 30%);
-    $button-active: darken($background, 5%);
-    $background-desktop: $background-limited;
-    $popup-shadow: rgba(0, 0, 0, .3);
-    $popup-arrow-shadow: rgba(0, 0, 0, .2);
     $popup-border: $border-color;
-    $item-3d: darken($background-limited, 33%);
     $label-text: lighten($text, 67%);
     $button-disabled: darken($background, 13%);
-    $top-bottom-frame: adjust-hue(darken(saturate($background, 12%), 13%), 216%);
-    //$button-active: adjust-hue(darken(saturate($background, 12%), 14%), 218%);
-    $form-background: adjust-hue(darken(saturate($background, 19%), 2%), 240%);
-    $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
-    $icon-color: adjust-hue(lighten(saturate($text, 10%), 55%), 220%);
-    $title-color: adjust-hue(lighten(saturate($text, 2%), 44%), 240%);
-    $disabled-color: darken($background, 20%);
-    $button-background: lighten($background, 10%);
-    $disabled-background: darken($background, 10%);
     $switch-background: darken($background, 7%);
-    $track-background: darken($background, 7%);
-    $track-border: darken($background, 7%);
     $slider-tooltip: darken($background, 26%);
     $slider-track-step: darken($background, 10%);
-    $item-active: darken($background, 12%);
-    $lv_handle: darken($background, 17%);
-    $lv-item: darken($background, 1%);
-    $lv-icon: lighten($text, 47%);
     $text-alt: lighten($text, 53%);
-    $popup-background: $background-alt;
     $background-overlay: rgba(#000, .2);
-    $item-selected: rgba($accent, .1);
-    $switch-track: #4cd764;
     $empty-color: lighten($text, 43%);
     $btn-cont-background: darken($background, 3%);
-    $background-contrast: #000;
     $snackbar-button: hsl(hue($button), saturation($button), max(lightness($button), 80%));
   }
 
-  // Dark background 
+  // Dark background
   @else {
     $border-color: lighten($background, 20%);
-    $top-bottom-border: lighten($background, 21%);
-    $top-bottom-wheel-border: $border-color;
-    $button-active: lighten($background, 12%);
-    $background-desktop: lighten($background-limited, 17%);
-    $popup-shadow: rgba(0, 0, 0, .8);
-    $popup-arrow-shadow: rgba(0, 0, 0, .8);
     $popup-border: lighten($border-color, 13%);
-    $item-3d: lighten($background-limited, 40%);
     $label-text: $text;
     $button-disabled: lighten($background, 13%);
-    $top-bottom-frame: $background-limited;
-    //$button-active: adjust-hue(lighten(desaturate($background, 12%), 14%), 218%);
-    $form-background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240%);
-    $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
-    $icon-color: adjust-hue(lighten(saturate($text, 10%), 55%), 220%);
-    $title-color: adjust-hue(darken(desaturate($text, 2%), 44%), 240%);
-    $disabled-color: lighten($background, 23%);
-    $button-background: lighten($background, 23%);
-    $disabled-background: lighten($background, 13%);
     $switch-background: #fff;
-    $track-background: #fff;
-    $track-border: lighten($background, 17%);
     $slider-tooltip: lighten($background, 70%);
     $slider-track-step: lighten($background, 27%);
-    $item-active: lighten($background, 12%);
-    $lv_handle: lighten($background, 43%);
-    $lv-item: lighten($background, 13%);
-    $lv-icon: $text;
     $text-alt: darken($text, 33%);
-    $popup-background: $background-desktop;
     $background-overlay: rgba(#fff, .1);
-    $item-selected: rgba($accent, .3);
-    $switch-track: $accent;
     $empty-color: $text;
     $btn-cont-background: lighten($background-limited, 8%);
-    $background-contrast: #fff;
     $snackbar-button: $button;
   }
 
-  // Light button 
-  @if (lightness($button) > 50%) {
-    $button-contrast: #000;
-    $cal-text: lighten(saturate($button, 5%), 42%);
-    $form-selection: lighten(saturate($accent, 15%), 3%);
-  }
-
-  // Dark button 
-  @else {
-    $button-contrast: #fff;
-    $cal-text: adjust-hue(lighten(desaturate($button, 42%), 35%), 3%);
-    $form-selection: darken(desaturate($accent, 15%), 3%);
-  }
-
-  // Light button 
-  @if (lightness($cal-text) > 50%) {
-    $cal-text-contrast: #000;
-  }
 
-  // Dark button 
-  @else {
-    $cal-text-contrast: #fff;
-  }
 
-  @return (cont-background: $cont-background,
-    border-color: $border-color,
-    top-bottom-border: $top-bottom-border,
-    top-bottom-wheel-border: $top-bottom-wheel-border,
-    button-active: $button-active,
-    background-alt: $background-alt,
-    background-desktop: $background-desktop,
-    popup-shadow: $popup-shadow,
-    popup-arrow-shadow: $popup-arrow-shadow,
-    card-shadow: $card-shadow,
-    popup-border: $popup-border,
-    background-limited: $background-limited,
-    item-color: $item-color,
-    item-3d: $item-3d,
-    cal-text: $cal-text,
-    button-contrast: $button-contrast,
-    label-text: $label-text,
-    button-disabled: $button-disabled,
-    form-background: $form-background,
-    form-selection: $form-selection,
-    form-text: $form-text,
-    icon-color: $icon-color,
-    title-color: $title-color,
-    disabled-color: $disabled-color,
-    button-background: $button-background,
-    disabled-background: $disabled-background,
-    switch-background: $switch-background,
-    track-background: $track-background,
-    track-border: $track-border,
-    snackbar-button: $snackbar-button,
-    slider-tooltip: $slider-tooltip,
-    slider-track-step: $slider-track-step,
-    item-active: $item-active,
-    lv_handle: $lv_handle,
-    lv-item: $lv-item,
-    lv-icon: $lv-icon,
-    text-alt: $text-alt,
-    popup-background: $popup-background,
-    cal-text-contrast: $cal-text-contrast,
-    background-overlay: $background-overlay,
-    item-selected: $item-selected,
-    empty-color: $empty-color,
-    btn-cont-background: $btn-cont-background,
-    background-contrast: $background-contrast,
-    switch-track: $switch-track,
-    top-bottom-frame: $top-bottom-frame,
-    button: $button,
+  @return ('cont-background': $cont-background,
+    'border-color': $border-color,
+    'background-alt': $background-alt,
+    'card-shadow': $card-shadow,
+    'popup-border': $popup-border,
+    'background-limited': $background-limited,
+    'label-text': $label-text,
+    'button-disabled': $button-disabled,
+    'switch-background': $switch-background,
+    'snackbar-button': $snackbar-button,
+    'slider-tooltip': $slider-tooltip,
+    'slider-track-step': $slider-track-step,
+    'text-alt': $text-alt,
+    'background-overlay': $background-overlay,
+    'empty-color': $empty-color,
+    'btn-cont-background': $btn-cont-background,
+    'button': $button,
     /* static colors */
-    error: #d8332a,
-    white-text: #fff,
-    dark-text: #000);
+    'error': #d8332a,
+    'white-text': #fff,
+    'dark-text': #000);
 }
 
 @mixin mbsc-ios-common($theme, $params) {
diff --git a/src/scss/core/material.ripple.scss b/src/scss/core/material.ripple.scss
index e577abc8..5b9753bc 100644
--- a/src/scss/core/material.ripple.scss
+++ b/src/scss/core/material.ripple.scss
@@ -11,8 +11,8 @@
       pointer-events: none;
       -webkit-transform: scale(0);
       transform: scale(0);
-      -webkit-transition: -webkit-transform .8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity .8s cubic-bezier(0.25, 0.8, 0.25, 1);
-      transition: transform .8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity .8s cubic-bezier(0.25, 0.8, 0.25, 1);
+      -webkit-transition: -webkit-transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s;
+      transition: transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s;
     }
 
     .mbsc-ripple-scaled {
@@ -21,7 +21,7 @@
     }
 
     .mbsc-ripple-visible {
-      opacity: .1;
+      opacity: .15;
     }
   }
 }
diff --git a/src/scss/core/material.scss b/src/scss/core/material.scss
index a80d239c..5b2ca11f 100644
--- a/src/scss/core/material.scss
+++ b/src/scss/core/material.scss
@@ -1,3 +1,5 @@
+@import './base';
+
 $mbsc-material-accent: #009688 !default;
 $mbsc-material-background: #eee !default;
 $mbsc-material-text: #5b5b5b !default;
@@ -16,90 +18,58 @@ $mbsc-material-info: #5BB7C5 !default;
 $mbsc-material-light: #fff !default;
 $mbsc-material-dark: #47494A !default;
 
+$mbsc-material-colors: ( // Colors map
+  'background': $mbsc-material-background,
+  'text': $mbsc-material-text,
+  'accent': $mbsc-material-accent,
+);
+
+$mbsc-material-dark-colors: ( // Colors map
+  'background': $mbsc-material-dark-background,
+  'text': $mbsc-material-dark-text,
+  'accent': $mbsc-material-dark-accent,
+);
+
 @function mbsc-material-colors($params) {
-  $background: map-get($params, background);
-  $text: map-get($params, text);
-  $accent: map-get($params, accent);
+  $background: map-get($params, 'background');
+  $text: map-get($params, 'text');
+  $accent: map-get($params, 'accent');
 
-  $light-background: lighten($background, 4.8%);
-  $form-text: lighten($text, 7%);
-  $input-text: darken($text, 24%);
-  $lv-text: lighten($text, 10%);
   $snackbar-btn: hsl(hue($accent), saturation($accent), max(lightness($accent), 34%));
 
   $border: '';
-  $checkbox: '';
   $gray-background: '';
-  $button-background: '';
-  $button-color: '';
-  $input-color: '';
   $snackbar: '';
   $background-contrast: '';
-  $box-input: '';
-  $ripple: '';
-  $switch: '';
-  $switch-disabled: '';
   $lv-item: '';
-  $button-active: '';
 
-  // Light background 
+  // Light background
   @if (lightness($background) > 50%) {
     $border: lighten($text, 40%);
-    $checkbox: lighten($background, 7%);
     $gray-background: darken($background, 23%);
-    $button-background: darken($background, 9%);
-    $button-color: darken($text, 36%);
-    $input-color: lighten($text, 29%);
-    $box-input: darken($background, 7%);
-    $switch: lighten($background, 5%);
-    $switch-disabled: darken($background, 20%);
     $snackbar: #323232;
     $background-contrast: #000;
-    $lv-item: lighten($background, 4%);
-    $button-active: darken($background, 13%);
   }
-
-  // Dark background 
+  // Dark background
   @else {
     $border: darken($text, 40%);
-    $checkbox: $background;
     $gray-background: lighten($background, 17%);
-    $button-background: lighten($background, 17%);
-    $button-color: lighten($text, 24%);
-    $input-color: darken($text, 19%);
-    $box-input: lighten($background, 7%);
-    $switch: lighten($background, 53%);
-    $switch-disabled: lighten($background, 16%);
     $snackbar: #5b5b5b;
     $background-contrast: #fff;
-    $lv-item: lighten($background, 3%);
-    $button-active: lighten($background, 13%);
   }
 
-  @return (ripple: $background-contrast,
-    border: $border,
-    form-text: $form-text,
-    light-background: $light-background,
-    checkbox: $checkbox,
-    gray-background: $gray-background,
-    button-background: $button-background,
-    button-color: $button-color,
-    button-active: $button-active,
-    input-color: $input-color,
-    switch: $switch,
-    switch-disabled: $switch-disabled,
-    input-text: $input-text,
-    lv-text: $lv-text,
-    background-contrast: $background-contrast,
-    box-input: $box-input,
-    snackbar: $snackbar,
-    snackbar-btn: $snackbar-btn,
-    lv-item: $lv-item,
-    /* static colors */
-    white-text: #fff,
-    dark-text: #000,
-    light-text: #eee,
-    error: #de3226);
+  @return ('ripple': $background-contrast,
+    'border': $border,
+    'gray-background': $gray-background,
+    'background-contrast': $background-contrast,
+    'snackbar': $snackbar,
+    'snackbar-btn': $snackbar-btn,
+    // Static colors
+    'white-text': #fff,
+    'dark-text': #000,
+    'light-text': #eee,
+    'error': #de3226,
+  );
 }
 
 @mixin mbsc-material-common($theme, $params) {
diff --git a/src/scss/core/mobiscroll.scss b/src/scss/core/mobiscroll.scss
index 5991beef..6d54b0a8 100644
--- a/src/scss/core/mobiscroll.scss
+++ b/src/scss/core/mobiscroll.scss
@@ -1,3 +1,5 @@
+@import './base';
+
 $mbsc-mobiscroll-accent: #4eccc4 !default;
 $mbsc-mobiscroll-background: #f7f7f7 !default;
 $mbsc-mobiscroll-text: #454545 !default;
@@ -16,77 +18,58 @@ $mbsc-mobiscroll-info: #5BB7C5 !default;
 $mbsc-mobiscroll-light: darken(#fff, 10%) !default;
 $mbsc-mobiscroll-dark: #47494A !default;
 
+$mbsc-mobiscroll-colors: ( // Colors map
+  'background': $mbsc-mobiscroll-background,
+  'text': $mbsc-mobiscroll-text,
+  'accent': $mbsc-mobiscroll-accent,
+);
+$mbsc-mobiscroll-dark-colors: ( // Colors map
+  'background': $mbsc-mobiscroll-dark-background,
+  'text': $mbsc-mobiscroll-dark-text,
+  'accent': $mbsc-mobiscroll-dark-accent,
+);
+
 @function mbsc-mobiscroll-colors($params) {
-  $background: map-get($params, background);
-  $text: map-get($params, text);
-  $accent: map-get($params, accent);
+  $background: map-get($params, 'background');
+  $text: map-get($params, 'text');
+  $accent: map-get($params, 'accent');
 
-  $input-icon: lighten($text, 20%);
-  $color-input: darken($text, 15%);
-  $event-border: lighten($text, 25%);
-  $lv-item: darken($background, 4%);
-  $checked: desaturate(lighten($accent, 25%), 6%);
   $border: '';
   $empty-color: '';
   $input-disabled: '';
-  $handle: '';
-  $btn-disabled: '';
-  $switch: '';
-  $btn-light: '';
   $input-box: '';
   $tooltip: '';
-  $checkbox: '';
   $empty-color: '';
 
-  // Light background 
+  // Light background
   @if (lightness($background) > 50%) {
     $border: darken($background, 17%);
     $empty-color: lighten($text, 20%);
     $input-disabled: darken($background, 13%);
-    $handle: darken($background, 8%);
-    $btn-disabled: darken($background, 10%);
-    $switch: darken($background, 19%);
-    $btn-light: darken($background, 3%);
     $input-box: darken($background, 10%);
     $tooltip: darken($background, 4%);
-    $checkbox: lighten($background, 3%);
   }
 
-  // Dark background 
+  // Dark background
   @else {
     $border: lighten($background, 17%);
     $empty-color: $text;
     $input-disabled: lighten($background, 17%);
-    $handle: lighten($background, 7%);
-    $btn-disabled: lighten($background, 8%);
-    $switch: lighten($background, 14%);
-    $btn-light: $background;
     $input-box: lighten($background, 10%);
     $tooltip: $background;
-    $checkbox: $background;
   }
 
-  @return (border: $border,
-  empty-color: $empty-color,
-  input-disabled: $input-disabled,
-  btn-light: $btn-light,
-  btn-disabled: $btn-disabled,
-  switch: $switch,
-  checked: $checked,
-  handle: $handle,
-  input-icon: $input-icon,
-  input-box: $input-box,
-  tooltip: $tooltip,
-  color-input: $color-input,
-  event-border: $event-border,
-  lv-item: $lv-item,
-  checkbox: $checkbox,
+  @return ('border': $border,
+  'empty-color': $empty-color,
+  'input-disabled': $input-disabled,
+  'input-box': $input-box,
+  'tooltip': $tooltip,
   /* static colors */
-  textarea: #1f1f1f,
-  notification: #787878,
-  white-text: #ffffff,
-  error: #de3226,
-  dark-text: #000);
+  'textarea': #1f1f1f,
+  'notification': #787878,
+  'white-text': #ffffff,
+  'error': #de3226,
+  'dark-text': #000);
 }
 
 @mixin mbsc-mobiscroll-common($theme, $params) {
diff --git a/src/scss/core/windows.scss b/src/scss/core/windows.scss
index 852dded8..c868f6a4 100644
--- a/src/scss/core/windows.scss
+++ b/src/scss/core/windows.scss
@@ -1,3 +1,5 @@
+@import './base.scss';
+
 $mbsc-windows-accent: #0078d7 !default;
 $mbsc-windows-background: #f2f2f2 !default;
 $mbsc-windows-text: #262626 !default;
@@ -16,114 +18,69 @@ $mbsc-windows-info: #5BB7C5 !default;
 $mbsc-windows-light: #fff !default;
 $mbsc-windows-dark: #47494A !default;
 
+$mbsc-windows-colors: ( // Colors map
+  'background': $mbsc-windows-background,
+  'text': $mbsc-windows-text,
+  'accent': $mbsc-windows-accent,
+);
+$mbsc-windows-dark-colors: ( // Colors map
+  'background': $mbsc-windows-dark-background,
+  'text': $mbsc-windows-dark-text,
+  'accent': $mbsc-windows-dark-accent,
+);
+
 @function mbsc-windows-colors($params) {
-  $background: map-get($params, background);
-  $text: map-get($params, text);
-  $accent: map-get($params, accent);
+  $background: map-get($params, 'background');
+  $text: map-get($params, 'text');
+  $accent: map-get($params, 'accent');
 
   $frame-border: '';
-  $form-background: '';
-  $checkbox-border: '';
-  $button-border: '';
   $input-hover: '';
-  $border-color: '';
   $empty-color: '';
   $input-border: '';
-  $button-background: '';
-  $segmented-disabled: '';
-  $button-hover: '';
   $progress-background: '';
-  $cards-border: '';
-  $wheel-button: '';
   $alt-background: '';
   $color-item: '';
   $color-preview-border: '';
-  $lv-background: '';
-  $scrollbar-track: '';
-  $calendar-day: '';
 
-  // Light background 
+
+  // Light background
   @if (lightness($background) > 50%) {
     $frame-border: darken($background, 15%);
-    $form-background: lighten($background, 13%);
-    $checkbox-border: desaturate(lighten($accent, 52%), 24%);
-    $button-border: lighten($text, 33%);
     $input-hover: darken($background, 55%);
-    $border-color: darken($background, 19%);
     $empty-color: lighten($text, 30%);
     $input-border: darken($background, 35%);
-    $button-background: darken($background, 45%);
-    $segmented-disabled: darken($background, 17%);
-    $button-hover: darken($background, 10%);
+
     $progress-background: hsl(hue($background), saturation($background), min(lightness($background), 80%));
-    $cards-border: darken($background, 5%);
-    $wheel-button: darken($background, 5%);
     $alt-background: darken($background, 18%);
     $color-item: #ffffff;
     $color-preview-border: darken($background, 25%);
-    $lv-background: darken($background, 34%);
-    $scrollbar-track: rgba(0, 0, 0, .05);
-    $calendar-day: lighten($text, 30%);
   }
-
-  // Dark background 
+  // Dark background
   @else {
     $frame-border: lighten($background, 15%);
-    $form-background: darken($background, 12%);
-    $checkbox-border: saturate(darken($accent, 52%), 24%);
-    $button-border: darken($text, 33%);
     $input-hover: lighten($background, 55%);
-    $border-color: lighten($background, 19%);
     $empty-color: darken($text, 30%);
     $input-border: lighten($background, 35%);
-    $button-background: lighten($background, 45%);
-    $segmented-disabled: lighten($background, 19%);
-    $button-hover: lighten($background, 10%);
+
     $progress-background: hsl(hue($background), saturation($background), max(lightness($background), 12%));
-    $cards-border: lighten($background, 12%);
-    $wheel-button: lighten($background, 5%);
     $alt-background: lighten($background, 18%);
     $color-item: fade(#dfdede, 30%);
     $color-preview-border: lighten($background, 60%);
-    $lv-background: darken($background, 34%);
-    $scrollbar-track: rgba(255, 255, 255, .2);
-    $calendar-day: darken($text, 30%);
   }
 
-  @return (frame-border: $frame-border,
-  form-background: $form-background,
-  checkbox-border: $checkbox-border,
-  button-border: $button-border,
-  input-hover: $input-hover,
-  border-color: $border-color,
-  empty-color: $empty-color,
-  input-border: $input-border,
-  button-background: $button-background,
-  segmented-disabled: $segmented-disabled,
-  button-hover: $button-hover,
-  progress-background: $progress-background,
-  cards-border: $cards-border,
-  wheel-button: $wheel-button,
-  alt-background: $alt-background,
-  color-item: $color-item,
-  color-preview-border: $color-preview-border,
-  lv-background: $lv-background,
-  scrollbar-track: $scrollbar-track,
-  calendar-day: $calendar-day,
-  /* static colors */
-  dark-text: darken($mbsc-windows-dark, 30%),
-  light-text: #efeff4,
-  error: #d30101);
-}
-
-@function get-contrast-color($color) {
-  @if (lightness($color) > 65%) {
-    @return #000;
-  }
-
-  @else {
-    @return #fff;
-  }
+  @return ('frame-border': $frame-border,
+    'input-hover': $input-hover,
+    'empty-color': $empty-color,
+    'input-border': $input-border,
+    'progress-background': $progress-background,
+    'alt-background': $alt-background,
+    'color-item': $color-item,
+    'color-preview-border': $color-preview-border,
+    /* static colors */
+    'dark-text': darken($mbsc-windows-dark, 30%),
+    'light-text': #efeff4,
+    'error': #d30101);
 }
 
 @mixin mbsc-windows-common($theme, $params) {
diff --git a/src/scss/forms/forms.ios.colors.scss b/src/scss/forms/forms.ios.colors.scss
index c5a3428c..eb68a8b1 100644
--- a/src/scss/forms/forms.ios.colors.scss
+++ b/src/scss/forms/forms.ios.colors.scss
@@ -6,6 +6,50 @@
 @import "../rating/rating.ios.colors";
 @import "../notifications/notifications.ios.colors";
 
+// Theme specific variables - inherited from global variables
+
+// General colors for the form
+// Background
+$mbsc-ios-form-background: $mbsc-form-background-light !default;
+$mbsc-ios-dark-form-background: $mbsc-form-background-dark !default;
+// Text
+$mbsc-ios-form-text: $mbsc-form-text-light !default;
+$mbsc-ios-dark-form-text: $mbsc-form-text-dark !default;
+// Accent
+$mbsc-ios-form-accent: $mbsc-form-accent-light !default;
+$mbsc-ios-dark-form-accent: $mbsc-form-accent-dark !default;
+
+// Button
+// button background
+$mbsc-ios-button-color: $mbsc-button-color-light !default;
+$mbsc-ios-dark-button-color: $mbsc-button-color-dark !default;
+// button text
+$mbsc-ios-button-text: $mbsc-button-text-light !default;
+$mbsc-ios-dark-button-text: $mbsc-button-text-dark !default;
+
+// Form Group
+// text
+$mbsc-ios-form-group-title-text: $mbsc-form-group-title-text-light !default;
+$mbsc-ios-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;
+
+// add variables to light and dark color maps
+$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
+  'form-background': $mbsc-ios-form-background,
+  'form-text': $mbsc-ios-form-text,
+  'form-accent': $mbsc-ios-form-accent,
+  'button-color': $mbsc-ios-button-color,
+  'button-text': $mbsc-ios-button-text,
+  'form-group-title-text': $mbsc-ios-form-group-title-text,
+));
+$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
+  'form-background': $mbsc-ios-dark-form-background,
+  'form-text': $mbsc-ios-dark-form-text,
+  'form-accent': $mbsc-ios-dark-form-accent,
+  'button-color': $mbsc-ios-dark-button-color,
+  'button-text': $mbsc-ios-dark-button-text,
+  'form-group-title-text': $mbsc-ios-dark-form-group-title-text,
+));
+
 @mixin mbsc-ios-forms($theme, $params) {
   @include exports("forms.#{$theme}.colors") {
 
@@ -15,30 +59,96 @@
     @include mbsc-ios-rating($theme, $params);
     @include mbsc-ios-notifications($theme, $params);
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    // Generic
+    $background-param: map-get($params, 'form-background');
+    $text-param: map-get($params, 'form-text');
+    $accent-param: map-get($params, 'form-accent');
+    // Button custom variables
+    $button-background-param: map-get($params, 'button-color');
+    $button-text-param: map-get($params, 'button-text');
+    // Form Group custom variables
+    $group-title-param: map-get($params, 'form-group-title-text');
+
+
+    // default background color
+    @if (lightness($background) > 50%) {
+      $background: adjust-hue(darken(saturate($background, 19%), 2%), 240%);
+    }
+    @else {
+      $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240%);
+    }
+
+    // overwrite custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    $button: '';
+    @if (map-get($params, 'button')) {
+      $button: map-get($params, 'button');
+    }
+    @else {
+      $button: $accent;
+    }
 
     $colors: mbsc-ios-colors($params);
-    $form-background: map-get($colors, form-background);
-    $form-selection: map-get($colors, form-selection);
-    $form-text: map-get($colors, form-text);
-    $icon-color: map-get($colors, icon-color);
-    $border-color: map-get($colors, border-color);
-    $title-color: map-get($colors, title-color);
-    $cont-background: map-get($colors, cont-background);
-    $disabled-color: map-get($colors, disabled-color);
-    $button-background: map-get($colors, button-background);
-    $disabled-background: map-get($colors, disabled-background);
-    $track-background: map-get($colors, track-background);
-    $track-border: map-get($colors, track-border);
-    $white-text: map-get($colors, white-text);
-    $dark-text: map-get($colors, dark-text);
-    $switch-track: map-get($colors, switch-track);
+    $dark-text: map-get($colors, 'dark-text');
+    $white-text: map-get($colors, 'white-text');
+
+    $cont-background: lighten($background, 6%);
+    $form-selection: '';
+    @if (lightness($button) > 50%) {
+      $form-selection: lighten(saturate($accent, 15%), 3%);
+    }
+    @else {
+      $form-selection: darken(desaturate($accent, 15%), 3%);
+    }
+    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
+    $border-color: '';
+    $button-background: '';
+    $disabled-background: '';
+    $disabled-color: '';
+    $form-text: '';
+    $icon-color: lighten(saturate($text, 10%), 55%);
+    $switch-track: #4cd764;
+    $title-color: '';
+    $track-background: '';
+    $track-border: '';
+    @if (lightness($background) > 50%) {
+      $border-color: darken($background-limited, 17%);
+      $button-background: lighten($background, 10%);
+      $disabled-background: darken($background, 10%);
+      $disabled-color: darken($background, 20%);
+      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
+      $title-color: lighten(saturate($text, 2%), 44%);
+      $track-background: darken($background, 7%);
+      $track-border: darken($background, 7%);
+    }
+    @else {
+      $border-color: lighten($background, 20%);
+      $button-background: lighten($background, 23%);
+      $disabled-background: lighten($background, 13%);
+      $disabled-color: lighten($background, 23%);
+      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
+      $switch-track: $accent;
+      $title-color: darken(desaturate($text, 2%), 44%);
+      $track-background: #fff;
+      $track-border: lighten($background, 17%);
+    }
+
+    // overwrite button color variables
+    $button-background: if($button-background-param, $button-background-param, $button-background);
+    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $accent));
+    $title-color: if($group-title-param, $group-title-param, $title-color);
 
     .mbsc-#{$theme} {
 
+
       &.mbsc-form {
-        background: $form-background;
+        background: $background;
         color: $text;
       }
 
@@ -111,7 +221,7 @@
       /* Buttons */
       &.mbsc-btn {
         background: $button-background;
-        color: $accent;
+        color: $button-text;
       }
 
       &.mbsc-btn:not(.mbsc-btn-flat):disabled {
@@ -152,12 +262,12 @@
       /* Outline buttons */
       &.mbsc-btn-outline.mbsc-btn {
         background: transparent;
-        border: 1px solid $form-selection;
-        color: $form-selection;
+        border: 1px solid $button-text;
+        color: $button-text;
 
         &.mbsc-active {
-          background: $form-selection;
-          color: $form-background;
+          background: $button-text;
+          color: $button-background;
         }
       }
 
diff --git a/src/scss/forms/forms.ios.scss b/src/scss/forms/forms.ios.scss
index 05672739..6c4e857f 100644
--- a/src/scss/forms/forms.ios.scss
+++ b/src/scss/forms/forms.ios.scss
@@ -817,5 +817,5 @@
     }
   }
 
-  @include mbsc-ios-forms(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
+  @include mbsc-ios-forms(ios, $mbsc-ios-colors);
 }
diff --git a/src/scss/forms/forms.material.colors.scss b/src/scss/forms/forms.material.colors.scss
index e99a6222..a56cadc9 100644
--- a/src/scss/forms/forms.material.colors.scss
+++ b/src/scss/forms/forms.material.colors.scss
@@ -6,6 +6,51 @@
 @import "../rating/rating.material.colors";
 @import "../notifications/notifications.material.colors";
 
+// Theme specific variables - inherited from global variables
+
+// General colors for the form
+// Background
+$mbsc-material-form-background: $mbsc-form-background-light !default;
+$mbsc-material-dark-form-background: $mbsc-form-background-dark !default;
+// Text
+$mbsc-material-form-text: $mbsc-form-text-light !default;
+$mbsc-material-dark-form-text: $mbsc-form-text-dark !default;
+// Accent
+$mbsc-material-form-accent: $mbsc-form-accent-light !default;
+$mbsc-material-dark-form-accent: $mbsc-form-accent-dark !default;
+
+// Button
+// button background
+$mbsc-material-button-color: $mbsc-button-color-light !default;
+$mbsc-material-dark-button-color: $mbsc-button-color-dark !default;
+// button text
+$mbsc-material-button-text: $mbsc-button-text-light !default;
+$mbsc-material-dark-button-text: $mbsc-button-text-dark !default;
+
+// Form Group
+// text
+$mbsc-material-form-group-title-text: $mbsc-form-group-title-text-light !default;
+$mbsc-material-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;
+
+
+// add variables to light and dark color maps
+$mbsc-material-colors: map-merge($mbsc-material-colors, (
+  'form-background': $mbsc-material-form-background,
+  'form-text': $mbsc-material-form-text,
+  'form-accent': $mbsc-material-form-accent,
+  'button-color': $mbsc-material-button-color,
+  'button-text': $mbsc-material-button-text,
+  'form-group-title-text': $mbsc-material-form-group-title-text,
+));
+$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
+  'form-background': $mbsc-material-dark-form-background,
+  'form-text': $mbsc-material-dark-form-text,
+  'form-accent': $mbsc-material-dark-form-accent,
+  'button-color': $mbsc-material-dark-button-color,
+  'button-text': $mbsc-material-dark-button-text,
+  'form-group-title-text': $mbsc-material-dark-form-group-title-text,
+));
+
 @mixin mbsc-material-forms($theme, $params) {
   @include exports("forms.#{$theme}.colors") {
 
@@ -15,25 +60,75 @@
     @include mbsc-material-rating($theme, $params);
     @include mbsc-material-notifications($theme, $params);
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    // Generic
+    $background-param: map-get($params, 'form-background');
+    $text-param: map-get($params, 'form-text');
+    $accent-param: map-get($params, 'form-accent');
+    // Button
+    $button-background-param: map-get($params, 'button-color');
+    $button-text-param: map-get($params, 'button-text');
+    // Group Title
+    $group-title-param: map-get($params, 'form-group-title-text');
 
     $colors: mbsc-material-colors($params);
-    $form-text: map-get($colors, form-text);
-    $white-text: map-get($colors, white-text);
-    $dark-text: map-get($colors, dark-text);
-    $light-text: map-get($colors, light-text);
-    $error: map-get($colors, error);
-    $checkbox: map-get($colors, checkbox);
-    $gray-background: map-get($colors, gray-background);
-    $button-background: map-get($colors, button-background);
-    $button-color: map-get($colors, button-color);
-    $button-active: map-get($colors, button-active);
-    $input-color: map-get($colors, input-color);
-    $switch-disabled: map-get($colors, switch-disabled);
-    $switch: map-get($colors, switch);
-    $background-contrast: map-get($colors, background-contrast);
+    // stati colors
+    $white-text: map-get($colors, 'white-text');
+    $dark-text: map-get($colors, 'dark-text');
+    $light-text: map-get($colors, 'light-text');
+    $error: map-get($colors, 'error');
+    $background-contrast: map-get($colors, 'background-contrast');
+
+    // overwrite custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    // derived variables
+    $form-text: lighten($text, 7%);
+    $checkbox: $background;
+    $gray-background: '';
+    $input-color: '';
+    $switch-disabled: '';
+    $switch: '';
+    $button-background: '';
+    $button-text: '';
+    @if (lightness($background) > 50%) {
+      $checkbox: lighten($background, 7%);
+      $gray-background: darken($background, 23%);
+      $input-color: lighten($text, 29%);
+      $switch-disabled: darken($background, 20%);
+      $switch: lighten($background, 5%);
+      $button-background: darken($background, 9%);
+      $button-text: darken($text, 36%);
+    }
+    @else {
+      $gray-background: lighten($background, 17%);
+      $input-color: darken($text, 19%);
+      $switch-disabled: lighten($background, 16%);
+      $switch: lighten($background, 53%);
+      $button-background: lighten($background, 17%);
+      $button-text: lighten($text, 24%);
+    }
+
+    // Switch
+    $switch-track-disabled: $button-background;
+    // Segmented
+    $segmented-background-disabled: $button-background;
+    $segmented-text: $button-text;
+    $segmented-active: darken($button-background, 4%);
+    // Stepper
+    $stepper-background: $button-background;
+
+    // Button specific vars overwritten
+    $button-background: if($button-background-param, $button-background-param, $button-background);
+    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $button-text));
+    $button-active: darken($button-background, 4%);
+
+    // Group title
+    $group-title: if($group-title-param, $group-title-param, $accent);
 
     .mbsc-#{$theme} {
 
@@ -56,7 +151,7 @@
 
       .mbsc-divider,
       .mbsc-form-group-title {
-        color: $accent;
+        color: $group-title;
       }
 
       .mbsc-err-msg,
@@ -100,7 +195,7 @@
       /* Button */
       &.mbsc-btn {
         background: $button-background;
-        color: $button-color;
+        color: $button-text;
         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
       }
 
@@ -177,7 +272,7 @@
       }
 
       &.mbsc-switch input:disabled + .mbsc-switch-track {
-        background: $button-background;
+        background: $switch-track-disabled;
       }
 
       &.mbsc-switch input:disabled + .mbsc-switch-track .mbsc-switch-handle {
@@ -187,7 +282,7 @@
       /* Segmented control and Stepper */
       .mbsc-segmented-content {
         border: .142858em solid $accent;
-        color: $button-color;
+        color: $segmented-text;
       }
 
       &.mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content,
@@ -198,8 +293,8 @@
 
       &.mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content,
       &.mbsc-segmented .mbsc-segmented-item .mbsc-active .mbsc-segmented-content {
-        background: $button-active;
-        color: $button-color;
+        background: $segmented-active;
+        color: $segmented-text;
       }
 
       &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
@@ -209,23 +304,23 @@
       }
 
       &.mbsc-segmented .mbsc-segmented-item input:disabled:checked + .mbsc-segmented-content {
-        background: $button-background;
+        background: $segmented-background-disabled;
         color: $input-color;
-        border-color: $button-background;
+        border-color: $segmented-background-disabled;
       }
 
       .mbsc-stepper .mbsc-segmented-content {
-        border-color: $button-background;
+        border-color: $stepper-background;
       }
 
       .mbsc-stepper-control .mbsc-segmented-content {
-        background: $button-background;
+        background: $stepper-background;
       }
 
       &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
       &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
       &.mbsc-segmented .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content {
-        background: $button-background;
+        background: $segmented-background-disabled;
         color: $input-color;
       }
 
@@ -243,8 +338,8 @@
       }
 
       &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
-        background: $button-active;
-        color: $button-color;
+        background: $segmented-active;
+        color: $segmented-text;
       }
 
       /* Segmented color presets */
diff --git a/src/scss/forms/forms.material.scss b/src/scss/forms/forms.material.scss
index 8e15372a..2d1dd928 100644
--- a/src/scss/forms/forms.material.scss
+++ b/src/scss/forms/forms.material.scss
@@ -989,5 +989,5 @@
     }
   }
 
-  @include mbsc-material-forms(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
+  @include mbsc-material-forms('material', $mbsc-material-colors);
 }
diff --git a/src/scss/forms/forms.mobiscroll.colors.scss b/src/scss/forms/forms.mobiscroll.colors.scss
index 105e4db0..cac9ee8d 100644
--- a/src/scss/forms/forms.mobiscroll.colors.scss
+++ b/src/scss/forms/forms.mobiscroll.colors.scss
@@ -6,6 +6,50 @@
 @import "../rating/rating.mobiscroll.colors";
 @import "../notifications/notifications.mobiscroll.colors";
 
+// Theme specific variables - inherited from global variables
+
+// General colors for the form
+// Background
+$mbsc-mobiscroll-form-background: $mbsc-form-background-light !default;
+$mbsc-mobiscroll-dark-form-background: $mbsc-form-background-dark !default;
+// Text
+$mbsc-mobiscroll-form-text: $mbsc-form-text-light !default;
+$mbsc-mobiscroll-dark-form-text: $mbsc-form-text-dark !default;
+// Accent
+$mbsc-mobiscroll-form-accent: $mbsc-form-accent-light !default;
+$mbsc-mobiscroll-dark-form-accent: $mbsc-form-accent-dark !default;
+
+// Button
+// Button background
+$mbsc-mobiscroll-button-color: $mbsc-button-color-light !default;
+$mbsc-mobiscroll-dark-button-color: $mbsc-button-color-dark !default;
+// Button text
+$mbsc-mobiscroll-button-text: $mbsc-button-text-light !default;
+$mbsc-mobiscroll-dark-button-text: $mbsc-button-text-dark !default;
+
+// Form Group
+// text
+$mbsc-mobiscroll-form-group-title-text: $mbsc-form-group-title-text-light !default;
+$mbsc-mobiscroll-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;
+
+// add variables to light and dark color maps
+$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
+  'form-background': $mbsc-mobiscroll-form-background,
+  'form-text': $mbsc-mobiscroll-form-text,
+  'form-accent': $mbsc-mobiscroll-form-accent,
+  'button-color': $mbsc-mobiscroll-button-color,
+  'button-text': $mbsc-mobiscroll-button-text,
+  'form-group-title-text': $mbsc-mobiscroll-form-group-title-text,
+));
+$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
+  'form-background': $mbsc-mobiscroll-dark-form-background,
+  'form-text': $mbsc-mobiscroll-dark-form-text,
+  'form-accent': $mbsc-mobiscroll-dark-form-accent,
+  'button-color': $mbsc-mobiscroll-dark-button-color,
+  'button-text': $mbsc-mobiscroll-dark-button-text,
+  'form-group-title-text': $mbsc-mobiscroll-dark-form-group-title-text,
+));
+
 @mixin mbsc-mobiscroll-forms($theme, $params) {
   @include exports("forms.#{$theme}.colors") {
 
@@ -15,21 +59,59 @@
     @include mbsc-mobiscroll-rating($theme, $params);
     @include mbsc-mobiscroll-notifications($theme, $params);
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    // Generic
+    $background-param: map-get($params, 'form-background');
+    $text-param: map-get($params, 'form-text');
+    $accent-param: map-get($params, 'form-accent');
+    // Button
+    $button-background-param: map-get($params, 'button-color');
+    $button-text-param: map-get($params, 'button-text');
+    // Form group
+    $group-title-param: map-get($params, 'form-group-title-text');
 
     $colors: mbsc-mobiscroll-colors($params);
-    $input-disabled: map-get($colors, input-disabled);
-    $btn-light: map-get($colors, btn-light);
-    $btn-disabled: map-get($colors, btn-disabled);
-    $switch: map-get($colors, switch);
-    $checked: map-get($colors, checked);
-    $handle: map-get($colors, handle);
-    $mbsc-mobiscroll-dark-text: map-get($colors, dark-text);
-    $white-text: map-get($colors, light);
-    $error: map-get($colors, error);
-    $checkbox: map-get($colors, checkbox);
+    $input-disabled: map-get($colors, 'input-disabled');
+    // static colors
+    $white-text: map-get($colors, 'white-text');
+    $dark-text: map-get($colors, 'dark-text');
+    $error: map-get($colors, 'error');
+
+    // overwrite custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    // derived colors
+    $btn-light: '';
+    $btn-disabled: '';
+    $switch: '';
+    $handle: '';
+    $checkbox: '';
+    $checked: desaturate(lighten($accent, 25%), 6%);
+    // Light background
+    @if (lightness($background) > 50%) {
+      $btn-light: darken($background, 3%);
+      $btn-disabled: darken($background, 10%);
+      $switch: darken($background, 19%);
+      $handle: darken($background, 8%);
+      $checkbox: lighten($background, 3%);
+    }
+    // Dark background
+    @else {
+      $btn-light: $background;
+      $btn-disabled: lighten($background, 8%);
+      $switch: lighten($background, 14%);
+      $handle: lighten($background, 7%);
+      $checkbox: $background;
+    }
+
+    $button-background: if($button-background-param, $button-background-param, $accent);
+    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $btn-light));
+    $button-active: darken($button-background, 4%);
+    $group-title: if($group-title-param, $group-title-param, $accent);
 
     .mbsc-#{$theme} {
 
@@ -38,12 +120,15 @@
         color: $text;
       }
 
-      &.mbsc-form *::-moz-selection {
-        color: $white-text;
-        background: $accent;
+      // when controls are outside of form
+      &.mbsc-control-w {
+        color: $text;
       }
 
-      &.mbsc-form *::selection {
+      &.mbsc-form *::-moz-selection,
+      &.mbsc-control-w *::-moz-selection,
+      &.mbsc-form *::selection,
+      &.mbsc-control-w *::selection {
         color: $white-text;
         background: $accent;
       }
@@ -51,7 +136,7 @@
       .mbsc-divider,
       .mbsc-form-group-title {
         background: $background;
-        color: $accent;
+        color: $group-title;
       }
 
       .mbsc-err-msg,
@@ -96,8 +181,8 @@
 
       /* Buttons */
       &.mbsc-btn {
-        background: $accent;
-        color: $btn-light;
+        background: $button-background;
+        color: $button-text;
       }
 
       &.mbsc-btn:disabled {
@@ -110,12 +195,12 @@
 
       &.mbsc-btn-flat {
         background: transparent;
-        color: $accent;
+        color: $button-background;
         border-color: transparent;
       }
 
       &.mbsc-btn-flat.mbsc-btn.mbsc-active {
-        background: rgba($accent, .3)
+        background: rgba($button-background, .3)
       }
 
       &.mbsc-btn-flat:disabled {
@@ -124,16 +209,16 @@
       }
 
       &.mbsc-btn-light.mbsc-btn {
-        color: $mbsc-mobiscroll-dark-text;
+        color: $dark-text;
       }
 
       /* Outline buttons */
       &.mbsc-btn-outline.mbsc-btn {
-        border: 1px solid $accent;
-        color: $accent;
+        border: 1px solid $button-background;
+        color: $button-background;
 
         &.mbsc-active {
-          background: $accent;
+          background: $button-background;
           color: $background;
         }
 
diff --git a/src/scss/forms/forms.mobiscroll.scss b/src/scss/forms/forms.mobiscroll.scss
index daaefc08..4ccbb939 100644
--- a/src/scss/forms/forms.mobiscroll.scss
+++ b/src/scss/forms/forms.mobiscroll.scss
@@ -43,7 +43,7 @@
     }
 
     /* Checkbox */
-    &.mbsc-checkbox {
+    &.mbsc-ltr.mbsc-checkbox {
       padding: 1em 3.125em 1em 1em;
     }
 
@@ -125,7 +125,7 @@
       border-radius: .625em;
     }
 
-    &.mbsc-radio input:checked+.mbsc-radio-box {
+    &.mbsc-radio input:checked + .mbsc-radio-box {
       background: transparent;
     }
 
@@ -191,12 +191,12 @@
     }
 
     /* Checkbox, Switch, Radio */
-    &.mbsc-checkbox input:disabled~.mbsc-label,
-    &.mbsc-checkbox input:disabled~.mbsc-desc,
-    &.mbsc-radio input:disabled~.mbsc-label,
-    &.mbsc-radio input:disabled~.mbsc-desc,
-    &.mbsc-switch input:disabled~.mbsc-label,
-    &.mbsc-switch input:disabled~.mbsc-desc {
+    &.mbsc-checkbox input:disabled ~ .mbsc-label,
+    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
+    &.mbsc-radio input:disabled ~ .mbsc-label,
+    &.mbsc-radio input:disabled ~ .mbsc-desc,
+    &.mbsc-switch input:disabled ~ .mbsc-label,
+    &.mbsc-switch input:disabled ~ .mbsc-desc {
       opacity: .4;
     }
 
@@ -208,8 +208,8 @@
       transition: transform .1s ease-out;
     }
 
-    &.mbsc-checkbox input:checked+.mbsc-checkbox-box:after,
-    &.mbsc-radio input:checked+.mbsc-radio-box:after {
+    &.mbsc-checkbox input:checked + .mbsc-checkbox-box:after,
+    &.mbsc-radio input:checked + .mbsc-radio-box:after {
       opacity: 1;
       -webkit-transform: scale(1) rotate(-45deg);
       transform: scale(1) rotate(-45deg);
@@ -522,67 +522,67 @@
       transform: scale(1);
     }
 
-    &.mbsc-switch input:disabled+.mbsc-switch-track {
+    &.mbsc-switch input:disabled + .mbsc-switch-track {
       opacity: .7;
     }
 
     /* Switch color presets */
     &.mbsc-switch.mbsc-switch-primary input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-primary, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-primary;
       }
     }
 
     &.mbsc-switch.mbsc-switch-secondary input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-secondary, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-secondary;
       }
     }
 
     &.mbsc-switch.mbsc-switch-success input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-success, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-success;
       }
     }
 
     &.mbsc-switch.mbsc-switch-danger input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-danger, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-danger;
       }
     }
 
     &.mbsc-switch.mbsc-switch-warning input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-warning, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-warning;
       }
     }
 
     &.mbsc-switch.mbsc-switch-info input:checked {
-      +.mbsc-switch-track {
+      + .mbsc-switch-track {
         background: lighten($mbsc-mobiscroll-info, 20%);
       }
 
-      +.mbsc-switch-track .mbsc-switch-handle {
+      + .mbsc-switch-track .mbsc-switch-handle {
         background: $mbsc-mobiscroll-info;
       }
     }
@@ -612,9 +612,9 @@
       margin-top: -1.125em;
     }
 
-    &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content,
+    &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
     &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
-    &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content {
+    &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
       background: transparent;
     }
 
@@ -625,11 +625,11 @@
         color: $mbsc-mobiscroll-primary;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-primary;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-primary, .35)
       }
     }
@@ -640,11 +640,11 @@
         color: $mbsc-mobiscroll-secondary;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-secondary;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-secondary, .35)
       }
     }
@@ -655,11 +655,11 @@
         color: $mbsc-mobiscroll-success;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-success;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-success, .35)
       }
     }
@@ -670,11 +670,11 @@
         color: $mbsc-mobiscroll-danger;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-danger;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-danger, .35)
       }
     }
@@ -685,11 +685,11 @@
         color: $mbsc-mobiscroll-warning;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-warning;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-warning, .35)
       }
     }
@@ -700,11 +700,11 @@
         color: $mbsc-mobiscroll-info;
       }
 
-      &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content {
         background: $mbsc-mobiscroll-info;
       }
 
-      &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content {
+      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
         background: rgba($mbsc-mobiscroll-info, .35)
       }
     }
@@ -854,5 +854,5 @@
     }
   }
 
-  @include mbsc-mobiscroll-forms(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
-}
\ No newline at end of file
+  @include mbsc-mobiscroll-forms(mobiscroll, $mbsc-mobiscroll-colors);
+}
diff --git a/src/scss/forms/forms.scss b/src/scss/forms/forms.scss
index ca310ac0..c3aa8d13 100644
--- a/src/scss/forms/forms.scss
+++ b/src/scss/forms/forms.scss
@@ -439,6 +439,11 @@
 
   .mbsc-btn:disabled {
     cursor: not-allowed;
+
+    * {
+      /* Prevents click event firing for the Angular mbsc-button component, when disabled */
+      pointer-events: none;
+    }
   }
 
   .mbsc-btn:focus {
diff --git a/src/scss/forms/forms.windows.colors.scss b/src/scss/forms/forms.windows.colors.scss
index 37ae228e..b630c77a 100644
--- a/src/scss/forms/forms.windows.colors.scss
+++ b/src/scss/forms/forms.windows.colors.scss
@@ -6,6 +6,50 @@
 @import "../rating/rating.windows.colors";
 @import "../notifications/notifications.windows.colors";
 
+// Theme specific variables - inherited from global variables
+
+// General colors for the form
+// Background
+$mbsc-windows-form-background: $mbsc-form-background-light !default;
+$mbsc-windows-dark-form-background: $mbsc-form-background-dark !default;
+// Text
+$mbsc-windows-form-text: $mbsc-form-text-light !default;
+$mbsc-windows-dark-form-text: $mbsc-form-text-dark !default;
+// Accent
+$mbsc-windows-form-accent: $mbsc-form-accent-light !default;
+$mbsc-windows-dark-form-accent: $mbsc-form-accent-dark !default;
+
+// Button
+// button background
+$mbsc-windows-button-color: $mbsc-button-color-light !default;
+$mbsc-windows-dark-button-color: $mbsc-button-color-dark !default;
+// button text
+$mbsc-windows-button-text: $mbsc-button-text-light !default;
+$mbsc-windows-dark-button-text: $mbsc-button-text-dark !default;
+
+// Form Group
+// text
+$mbsc-windows-form-group-title-text: $mbsc-form-group-title-text-light !default;
+$mbsc-windows-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;
+
+// add variables to light and dark color maps
+$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
+  'form-background': $mbsc-windows-form-background,
+  'form-text': $mbsc-windows-form-text,
+  'form-accent': $mbsc-windows-form-accent,
+  'button-color': $mbsc-windows-button-color,
+  'button-text': $mbsc-windows-button-text,
+  'form-group-title-text': $mbsc-windows-form-group-title-text,
+));
+$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
+  'form-background': $mbsc-windows-dark-form-background,
+  'form-text': $mbsc-windows-dark-form-text,
+  'form-accent': $mbsc-windows-dark-form-accent,
+  'button-color': $mbsc-windows-dark-button-color,
+  'button-text': $mbsc-windows-dark-button-text,
+  'form-group-title-text': $mbsc-windows-dark-form-group-title-text,
+));
+
 @mixin mbsc-windows-forms($theme, $params) {
   @include exports("forms.#{$theme}.colors") {
 
@@ -15,21 +59,63 @@
     @include mbsc-windows-rating($theme, $params);
     @include mbsc-windows-notifications($theme, $params);
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
-
-    $colors: mbsc-windows-colors($params);
-    $form-background: map-get($colors, form-background);
-    $checkbox-border: map-get($colors, checkbox-border);
-    $button-border: map-get($colors, button-border);
-    $frame-border: map-get($colors, frame-border);
-    $input-border: map-get($colors, input-border);
-    $input-hover: map-get($colors, input-hover);
-    $button-background: map-get($colors, button-background);
-    $border-color: map-get($colors, border-color);
-    $segmented-disabled: map-get($colors, segmented-disabled);
-    $button-hover: map-get($colors, button-hover);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    // form specific
+    $background-param: map-get($params, 'form-background');
+    $text-param: map-get($params, 'form-text');
+    $accent-param: map-get($params, 'form-accent');
+    // form component specific
+    $button-text-param: map-get($params, 'button-text');
+    $button-background-param: map-get($params, 'button-color');
+    $group-title-param: map-get($params, 'form-group-title-text');
+    // overwrite custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    $form-background: '';
+    $checkbox-border: '';
+    $button-border: '';
+    $frame-border: '';
+    $input-border: '';
+    $input-hover: '';
+    $border-color: '';
+    $segmented-disabled: '';
+    $button-active: '';
+    $button-hover: '';
+    @if (lightness($background) > 50%) {
+      $form-background: lighten($background, 13%);
+      $checkbox-border: desaturate(lighten($accent, 52%), 24%);
+      $button-border: lighten($text, 33%);
+      $frame-border: darken($background, 15%);
+      $input-border: darken($background, 35%);
+      $input-hover: darken($background, 55%);
+      $border-color: darken($background, 19%);
+      $segmented-disabled: darken($background, 17%);
+      $button-active: darken($background, 45%);
+      $button-hover: darken($background, 10%);
+    }
+    @else {
+      $form-background: darken($background, 12%);
+      $checkbox-border: saturate(darken($accent, 52%), 24%);
+      $button-border: darken($text, 33%);
+      $frame-border: lighten($background, 15%);
+      $input-border: lighten($background, 35%);
+      $input-hover: lighten($background, 55%);
+      $border-color: lighten($background, 19%);
+      $segmented-disabled: lighten($background, 19%);
+      $button-active: lighten($background, 45%);
+      $button-hover: lighten($background, 10%);
+    }
+
+
+    // overwrite custom variables
+    $button-background: if($button-background-param, $button-background-param, $frame-border);
+    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $text));
+    $button-active: if($button-background-param, $button-background-param, $button-active);
+    $group-title: if($group-title-param, $group-title-param, $text);
 
     .mbsc-#{$theme} {
 
@@ -50,6 +136,10 @@
         background: rgba($accent, .9);
       }
 
+      .mbsc-form-group-title {
+        color: $group-title;
+      }
+
       /* Checkbox, radio */
       .mbsc-checkbox-box,
       .mbsc-radio-box {
@@ -91,9 +181,9 @@
 
       /* Buttons */
       &.mbsc-btn {
-        background: $frame-border;
-        border: .125em solid $frame-border;
-        color: $text;
+        background: $button-background; // $frame-border;
+        border: .125em solid $button-background; // .125em solid $frame-border;
+        color: $button-text;
       }
 
       &.mbsc-no-touch.mbsc-btn:not(.mbsc-btn-flat):not(:disabled):hover {
@@ -111,7 +201,7 @@
       }
 
       &.mbsc-btn.mbsc-btn-flat.mbsc-active:not(:disabled) {
-        background: rgba($frame-border, .25);
+        background: rgba($button-background, .25); // rgba($frame-border, .25);
       }
 
       /* Outline buttons */
@@ -121,15 +211,15 @@
         color: $input-border;
 
         &.mbsc-active {
-          background: $button-background;
-          border-color: $button-background;
-          color: get-contrast-color($button-background);
+          background: $button-active;
+          border-color: $button-active;
+          color: $button-text;
         }
       }
 
       /* button hover style */
       &.mbsc-no-touch.mbsc-btn.mbsc-btn-outline:not(:disabled):hover {
-        border-color: $button-background;
+        border-color: $button-active;
       }
 
       .mbsc-switch-track {
diff --git a/src/scss/forms/forms.windows.scss b/src/scss/forms/forms.windows.scss
index b4e95428..87f697c0 100644
--- a/src/scss/forms/forms.windows.scss
+++ b/src/scss/forms/forms.windows.scss
@@ -840,5 +840,5 @@
     }
   }
 
-  @include mbsc-windows-forms(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
+  @include mbsc-windows-forms(windows, $mbsc-windows-colors);
 }
diff --git a/src/scss/frame/frame.ios.colors.scss b/src/scss/frame/frame.ios.colors.scss
index bb73f78a..e7f7f90f 100644
--- a/src/scss/frame/frame.ios.colors.scss
+++ b/src/scss/frame/frame.ios.colors.scss
@@ -1,26 +1,97 @@
 @import "../core/exports";
 @import "../core/ios";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-ios-frame-background: $mbsc-frame-background-light !default;
+$mbsc-ios-dark-frame-background: $mbsc-frame-background-dark !default;
+// Text
+$mbsc-ios-frame-text: $mbsc-frame-text-light !default;
+$mbsc-ios-dark-frame-text: $mbsc-frame-text-dark !default;
+// Accent
+$mbsc-ios-frame-accent: $mbsc-frame-accent-light !default;
+$mbsc-ios-dark-frame-accent: $mbsc-frame-accent-dark !default;
+// Overlay
+$mbsc-ios-frame-overlay: $mbsc-frame-overlay-light !default;
+$mbsc-ios-dark-frame-overlay: $mbsc-frame-overlay-dark !default;
+
+$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
+  'frame-background': $mbsc-ios-frame-background,
+  'frame-text': $mbsc-ios-frame-text,
+  'frame-accent': $mbsc-ios-frame-accent,
+  'frame-overlay': $mbsc-ios-frame-overlay,
+));
+
+$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
+  'frame-background': $mbsc-ios-dark-frame-background,
+  'frame-text': $mbsc-ios-dark-frame-text,
+  'frame-accent': $mbsc-ios-dark-frame-accent,
+  'frame-overlay': $mbsc-ios-dark-frame-overlay,
+));
+
 @mixin mbsc-ios-frame($theme, $params) {
   @include exports("frame.#{$theme}.colors") {
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
-
-    $colors: mbsc-ios-colors($params);
-    $button: map-get($colors, button);
-    $cont-background: map-get($colors, cont-background);
-    $btn-cont-background: map-get($colors, btn-cont-background);
-    $border-color: map-get($colors, border-color);
-    $top-bottom-border: map-get($colors, top-bottom-border);
-    $button-active: map-get($colors, button-active);
-    $background-alt: map-get($colors, background-alt);
-    $background-desktop: map-get($colors, background-desktop);
-    $background-limited: map-get($colors, background-limited);
-    $popup-shadow: map-get($colors, popup-shadow);
-    $popup-arrow-shadow: map-get($colors, popup-arrow-shadow);
-    $popup-border: map-get($colors, popup-border);
-    $background-overlay: map-get($colors, background-overlay);
+    $background:map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+
+    $overlay-param: map-get($params, 'frame-overlay');
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    $button: '';
+    @if (map-get($params, 'button')) {
+      $button: map-get($params, 'button');
+    }
+    @else {
+      $button: $accent;
+    }
+
+    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
+    $cont-background: lighten($background, 6%);
+    $background-alt: lighten($background-limited, 3%);
+
+    $background-overlay: '';
+    $btn-cont-background: '';
+    $border-color: '';
+    $top-bottom-border: '';
+    $button-active: '';
+    $background-desktop: '';
+    $popup-shadow: '';
+    $popup-arrow-shadow: '';
+    $popup-border: '';
+    @if (lightness($background) > 50%) {
+      $background-overlay: rgba(#000, .2);
+      $btn-cont-background: darken($background, 3%);
+      $border-color: darken($background-limited, 17%);
+      $top-bottom-border: darken($background, 41%);
+      $button-active: darken($background, 5%);
+      $background-desktop: $background-limited;
+      $popup-shadow: rgba(0, 0, 0, .3);
+      $popup-arrow-shadow: rgba(0, 0, 0, .2);
+      $popup-border: darken($background-limited, 17%);
+    }
+    @else {
+      $background-overlay: rgba(#fff, .1);
+      $btn-cont-background: lighten($background-limited, 8%);
+      $border-color: lighten($background, 20%);
+      $top-bottom-border: lighten($background, 21%);
+      $button-active: lighten($background, 12%);
+      $background-desktop: lighten($background-limited, 17%);
+      $popup-shadow: rgba(0, 0, 0, .8);
+      $popup-arrow-shadow: rgba(0, 0, 0, .8);
+      $border-color: lighten($background, 20%);
+      $popup-border: lighten($border-color, 13%);
+    }
+
+    $background-overlay: if($overlay-param, $overlay-param, $background-overlay);
 
     .mbsc-#{$theme} {
 
diff --git a/src/scss/frame/frame.ios.scss b/src/scss/frame/frame.ios.scss
index a9f71071..3dcac452 100644
--- a/src/scss/frame/frame.ios.scss
+++ b/src/scss/frame/frame.ios.scss
@@ -218,5 +218,5 @@
     }
   }
 
-  @include mbsc-ios-frame(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
+  @include mbsc-ios-frame(ios, $mbsc-ios-colors);
 }
diff --git a/src/scss/frame/frame.material.colors.scss b/src/scss/frame/frame.material.colors.scss
index 75307c86..7a3e9ab5 100644
--- a/src/scss/frame/frame.material.colors.scss
+++ b/src/scss/frame/frame.material.colors.scss
@@ -1,18 +1,62 @@
 @import "../core/exports";
 @import "../core/material";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-material-frame-background: $mbsc-frame-background-light !default;
+$mbsc-material-dark-frame-background: $mbsc-frame-background-dark !default;
+// Text
+$mbsc-material-frame-text: $mbsc-frame-text-light !default;
+$mbsc-material-dark-frame-text: $mbsc-frame-text-dark !default;
+// Accent
+$mbsc-material-frame-accent: $mbsc-frame-accent-light !default;
+$mbsc-material-dark-frame-accent: $mbsc-frame-accent-dark !default;
+// Overlay
+$mbsc-material-frame-overlay: $mbsc-frame-overlay-light !default;
+$mbsc-material-dark-frame-overlay: $mbsc-frame-overlay-dark !default;
+
+$mbsc-material-colors: map-merge($mbsc-material-colors, (
+  'frame-background': $mbsc-material-frame-background,
+  'frame-text': $mbsc-material-frame-text,
+  'frame-accent': $mbsc-material-frame-accent,
+  'frame-overlay': $mbsc-material-frame-overlay,
+));
+
+$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
+  'frame-background': $mbsc-material-dark-frame-background,
+  'frame-text': $mbsc-material-dark-frame-text,
+  'frame-accent': $mbsc-material-dark-frame-accent,
+  'frame-overlay': $mbsc-material-dark-frame-overlay,
+));
+
 @mixin mbsc-material-frame($theme, $params) {
   @include exports("frame.#{$theme}.colors") {
-    $colors: mbsc-material-colors($params);
-    $background-contrast: map-get($colors, background-contrast);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $overlay-param: map-get($params, 'frame-overlay');
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .6));
+
+    $background-contrast: '';
+    @if (lightness($background) > 50%) {
+      $background-contrast: #000;
+    }
+    @else {
+      $background-contrast: #fff;
+    }
 
     .mbsc-#{$theme} {
       .mbsc-fr-overlay {
-        background: rgba(0, 0, 0, .6);
+        background: $overlay;
       }
 
       .mbsc-fr-w {
diff --git a/src/scss/frame/frame.material.scss b/src/scss/frame/frame.material.scss
index 3baabf24..370507f4 100644
--- a/src/scss/frame/frame.material.scss
+++ b/src/scss/frame/frame.material.scss
@@ -73,5 +73,5 @@
     }
   }
 
-  @include mbsc-material-frame(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
+  @include mbsc-material-frame(material, $mbsc-material-colors);
 }
diff --git a/src/scss/frame/frame.mobiscroll.colors.scss b/src/scss/frame/frame.mobiscroll.colors.scss
index 1dbc0716..ae4adde2 100644
--- a/src/scss/frame/frame.mobiscroll.colors.scss
+++ b/src/scss/frame/frame.mobiscroll.colors.scss
@@ -1,14 +1,57 @@
 @import "../core/exports";
 @import "../core/mobiscroll";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-mobiscroll-frame-background: $mbsc-frame-background-light !default;
+$mbsc-mobiscroll-dark-frame-background: $mbsc-frame-background-dark !default;
+// Text
+$mbsc-mobiscroll-frame-text: $mbsc-frame-text-light !default;
+$mbsc-mobiscroll-dark-frame-text: $mbsc-frame-text-dark !default;
+// Accent
+$mbsc-mobiscroll-frame-accent: $mbsc-frame-accent-light !default;
+$mbsc-mobiscroll-dark-frame-accent: $mbsc-frame-accent-dark !default;
+// Overlay
+$mbsc-mobiscroll-frame-overlay: $mbsc-frame-overlay-light !default;
+$mbsc-mobiscroll-dark-frame-overlay: $mbsc-frame-overlay-dark !default;
+
+$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
+  'frame-background': $mbsc-mobiscroll-frame-background,
+  'frame-text': $mbsc-mobiscroll-frame-text,
+  'frame-accent': $mbsc-mobiscroll-frame-accent,
+  'frame-overlay': $mbsc-mobiscroll-frame-overlay,
+));
+
+$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
+  'frame-background': $mbsc-mobiscroll-dark-frame-background,
+  'frame-text': $mbsc-mobiscroll-dark-frame-text,
+  'frame-accent': $mbsc-mobiscroll-dark-frame-accent,
+  'frame-overlay': $mbsc-mobiscroll-dark-frame-overlay,
+));
+
 @mixin mbsc-mobiscroll-frame($theme, $params) {
   @include exports("frame.#{$theme}.colors") {
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+
+    $overlay-param: map-get($params, 'frame-overlay');
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .7));
 
     .mbsc-#{$theme} {
+      .mbsc-fr-overlay {
+        background: $overlay;
+      }
+
       .mbsc-fr-w {
         background: $background;
         color: $text;
diff --git a/src/scss/frame/frame.mobiscroll.scss b/src/scss/frame/frame.mobiscroll.scss
index 2e25942e..46563a7e 100644
--- a/src/scss/frame/frame.mobiscroll.scss
+++ b/src/scss/frame/frame.mobiscroll.scss
@@ -65,5 +65,5 @@
     }
   }
 
-  @include mbsc-mobiscroll-frame(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
+  @include mbsc-mobiscroll-frame(mobiscroll, $mbsc-mobiscroll-colors);
 }
diff --git a/src/scss/frame/frame.windows.colors.scss b/src/scss/frame/frame.windows.colors.scss
index 16edb7ed..761f8579 100644
--- a/src/scss/frame/frame.windows.colors.scss
+++ b/src/scss/frame/frame.windows.colors.scss
@@ -1,16 +1,65 @@
 @import "../core/exports";
 @import "../core/windows";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-windows-frame-background: $mbsc-frame-background-light !default;
+$mbsc-windows-dark-frame-background: $mbsc-frame-background-dark !default;
+// Text
+$mbsc-windows-frame-text: $mbsc-frame-text-light !default;
+$mbsc-windows-dark-frame-text: $mbsc-frame-text-dark !default;
+// Accent
+$mbsc-windows-frame-accent: $mbsc-frame-accent-light !default;
+$mbsc-windows-dark-frame-accent: $mbsc-frame-accent-dark !default;
+// Overlay
+$mbsc-windows-frame-overlay: $mbsc-frame-overlay-light !default;
+$mbsc-windows-dark-frame-overlay: $mbsc-frame-overlay-dark !default;
+
+$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
+  'frame-background': $mbsc-windows-frame-background,
+  'frame-text': $mbsc-windows-frame-text,
+  'frame-accent': $mbsc-windows-frame-accent,
+  'frame-overlay': $mbsc-windows-frame-overlay,
+));
+
+$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
+  'frame-background': $mbsc-windows-dark-frame-background,
+  'frame-text': $mbsc-windows-dark-frame-text,
+  'frame-accent': $mbsc-windows-dark-frame-accent,
+  'frame-overlay': $mbsc-windows-dark-frame-overlay,
+));
+
 @mixin mbsc-windows-frame($theme, $params) {
   @include exports("frame.#{$theme}.colors") {
-    $colors: mbsc-windows-colors($params);
-    $frame-border: map-get($colors, frame-border);
-    $button-hover: map-get($colors, button-hover);
 
-    $background: map-get($params, background);
-    $text: map-get($params, text);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+
+    $overlay-param: map-get($params, 'frame-overlay');
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, $text);
+    $overlay: if($overlay-param, $overlay-param, rgba(0, 0, 0, .7));
+
+    $button-hover: '';
+    $frame-border: '';
+    @if(lightness($background) > 50%) {
+      $button-hover: darken($background, 10%);
+      $frame-border: darken($background, 15%);
+    }
+    @else {
+      $button-hover: lighten($background, 10%);
+      $frame-border: lighten($background, 15%);
+    }
 
     .mbsc-#{$theme} {
+      .mbsc-fr-overlay {
+        background: $overlay;
+      }
+
       .mbsc-fr-w {
         background: $background;
         color: $text;
diff --git a/src/scss/frame/frame.windows.scss b/src/scss/frame/frame.windows.scss
index ed9f8421..2c6ec53f 100644
--- a/src/scss/frame/frame.windows.scss
+++ b/src/scss/frame/frame.windows.scss
@@ -37,5 +37,5 @@
     }
   }
 
-  @include mbsc-windows-frame(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
+  @include mbsc-windows-frame(windows, $mbsc-windows-colors);
 }
diff --git a/src/scss/input/input.ios.colors.scss b/src/scss/input/input.ios.colors.scss
index ef97dfc9..f131784e 100644
--- a/src/scss/input/input.ios.colors.scss
+++ b/src/scss/input/input.ios.colors.scss
@@ -1,20 +1,70 @@
 @import "../core/exports";
 @import "../core/ios";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-ios-input-background: $mbsc-input-background-light !default;
+$mbsc-ios-dark-input-background: $mbsc-input-background-dark !default;
+// Border
+$mbsc-ios-input-border: $mbsc-input-border-light !default;
+$mbsc-ios-dark-input-border: $mbsc-input-border-dark !default;
+// Text
+$mbsc-ios-input-text: $mbsc-input-text-light !default;
+$mbsc-ios-dark-input-text: $mbsc-input-text-dark !default;
+// Error
+$mbsc-ios-input-error: $mbsc-input-error-light !default;
+$mbsc-ios-dark-input-error: $mbsc-input-error-dark !default;
+
+$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
+  'input-background': $mbsc-ios-input-background,
+  'input-border': $mbsc-ios-input-border,
+  'input-text': $mbsc-ios-input-text,
+  'input-error': $mbsc-ios-input-error,
+));
+$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
+  'input-background': $mbsc-ios-dark-input-background,
+  'input-border': $mbsc-ios-dark-input-border,
+  'input-text': $mbsc-ios-dark-input-text,
+  'input-error': $mbsc-ios-dark-input-error,
+));
+
 @mixin mbsc-ios-input($theme, $params) {
   @include exports("input.#{$theme}.colors") {
 
-    $text: map-get($params, text);
-
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    // get custom params
+    $input-background-param: map-get($params, 'input-background');
+    $input-border-param: map-get($params, 'input-border');
+    $input-text-param: map-get($params, 'input-text');
+    $input-error-param: map-get($params, 'input-error');
+    // static colors
     $colors: mbsc-ios-colors($params);
     $error: map-get($colors, error);
-    $cont-background: map-get($colors, cont-background);
-    $border-color: map-get($colors, border-color);
-    $form-text: map-get($colors, form-text);
+    // overwrite colors with custom colors
+    $text: if($input-text-param, $input-text-param, $text);
+    $border-origin: if($input-background-param, $input-background-param, $background);
+    $background: if($input-background-param, $input-background-param, lighten($background, 6%));
+    $error: if($input-error-param, $input-error-param, $error);
+    // calculated colors
+    $background-limited: hsl(hue($border-origin), saturation($border-origin), max(lightness($border-origin), 3%));
+    $form-text: '';
+    $border-color: '';
+    @if (lightness($background) > 50%) {
+      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
+      $border-color: darken($background-limited, 17%);
+    }
+    @else {
+      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
+      $border-color: lighten($border-origin, 20%);
+    }
+    // overwrite colors with custom ones if provided
+    $border-color:if($input-border-param, $input-border-param, $border-color);
 
     .mbsc-#{$theme} {
       &.mbsc-input {
-        background: $cont-background;
+        background: $background;
       }
 
       &.mbsc-input .mbsc-control::-webkit-input-placeholder {
@@ -57,7 +107,8 @@
 
       &.mbsc-control-w.mbsc-err:after,
       &.mbsc-control-w.mbsc-err + .mbsc-err:before,
-      &.mbsc-control-w.mbsc-err + .mbsc-divider {
+      &.mbsc-control-w.mbsc-err + .mbsc-divider,
+      mbsc-input.mbsc-err + mbsc-input &.mbsc-err:before {
         border-top-color: $error;
       }
 
diff --git a/src/scss/input/input.ios.scss b/src/scss/input/input.ios.scss
index a4a81288..cc466783 100644
--- a/src/scss/input/input.ios.scss
+++ b/src/scss/input/input.ios.scss
@@ -539,5 +539,5 @@
     }
   }
 
-  @include mbsc-ios-input(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
+  @include mbsc-ios-input(ios, $mbsc-ios-colors);
 }
diff --git a/src/scss/input/input.material.colors.scss b/src/scss/input/input.material.colors.scss
index 30ae2901..30ea3610 100644
--- a/src/scss/input/input.material.colors.scss
+++ b/src/scss/input/input.material.colors.scss
@@ -1,23 +1,76 @@
 @import "../core/exports";
 @import "../core/material";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-material-input-background: $mbsc-input-background-light !default;
+$mbsc-material-dark-input-background: $mbsc-input-background-dark !default;
+// Border
+$mbsc-material-input-border: $mbsc-input-border-light !default;
+$mbsc-material-dark-input-border: $mbsc-input-border-dark !default;
+// Text
+$mbsc-material-input-text: $mbsc-input-text-light !default;
+$mbsc-material-dark-input-text: $mbsc-input-text-dark !default;
+// Accent
+$mbsc-material-input-accent: $mbsc-input-accent-light !default;
+$mbsc-material-dark-input-accent: $mbsc-input-accent-dark !default;
+// Error
+$mbsc-material-input-error: $mbsc-input-error-light !default;
+$mbsc-material-dark-input-error: $mbsc-input-error-dark !default;
+
+$mbsc-material-colors: map-merge($mbsc-material-colors, (
+  'input-background': $mbsc-material-input-background,
+  'input-border': $mbsc-material-input-border,
+  'input-text': $mbsc-material-input-text,
+  'input-accent': $mbsc-material-input-accent,
+  'input-error': $mbsc-material-input-error,
+));
+$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
+  'input-background': $mbsc-material-dark-input-background,
+  'input-border': $mbsc-material-dark-input-border,
+  'input-text': $mbsc-material-dark-input-text,
+  'input-accent': $mbsc-material-dark-input-accent,
+  'input-error': $mbsc-material-dark-input-error,
+));
+
 @mixin mbsc-material-input($theme, $params) {
   @include exports("input.#{$theme}.colors") {
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
+    // custom colors
+    $input-background-param: map-get($params, 'input-background');
+    $input-border-param: map-get($params, 'input-border');
+    $input-text-param: map-get($params, 'input-text');
+    $input-accent-param: map-get($params, 'input-accent');
+    $input-error-param: map-get($params, 'input-error');
+
+    // overwrite colors with custom ones
+    $background: if($input-background-param, $input-background-param, $background);
+    $text: if($input-text-param, $input-text-param, $text);
+    $accent: if($input-accent-param, $input-accent-param, $accent);
+
+    $box-input: '';
+    @if (lightness($background) > 50%) {
+      $box-input: darken($background, 7%);
+    }
+    @else {
+      $box-input: lighten($background, 7%);
+    }
 
+    // derived colors
     $colors: mbsc-material-colors($params);
     $error: map-get($colors, error);
-    $box-input: map-get($colors, box-input);
-    $input-text: map-get($colors, input-text);
-    $form-text: map-get($colors, form-text);
-
+    $border: if($input-border-param, $input-border-param, lighten($text, 7%));
+    $error: if($input-error-param, $input-error-param, $error);
+    $input-text: darken($text, 24%);
     .mbsc-#{$theme} {
 
       /* Textbox */
       &.mbsc-input .mbsc-control {
-        border-bottom: 1px solid $form-text;
+        border-bottom: 1px solid $border;
         color: $input-text;
       }
 
@@ -35,8 +88,8 @@
 
       /* Select */
       &.mbsc-select .mbsc-input-wrap:after {
-        border: 5px solid $form-text;
-        border-color: $form-text transparent transparent transparent;
+        border: 5px solid $border;
+        border-color: $border transparent transparent transparent;
       }
 
       /* Box Input color */
@@ -50,7 +103,7 @@
       &.mbsc-input-outline {
 
         &.mbsc-input .mbsc-control {
-          border: 1px solid $form-text;
+          border: 1px solid $border;
         }
 
         &.mbsc-input .mbsc-label {
diff --git a/src/scss/input/input.material.scss b/src/scss/input/input.material.scss
index c80e1ca1..561a5f97 100644
--- a/src/scss/input/input.material.scss
+++ b/src/scss/input/input.material.scss
@@ -780,5 +780,5 @@
     }
   }
 
-  @include mbsc-material-input(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
+  @include mbsc-material-input(material, $mbsc-material-colors);
 }
diff --git a/src/scss/input/input.mobiscroll.colors.scss b/src/scss/input/input.mobiscroll.colors.scss
index 9e1495c5..58fbb651 100644
--- a/src/scss/input/input.mobiscroll.colors.scss
+++ b/src/scss/input/input.mobiscroll.colors.scss
@@ -1,19 +1,66 @@
 @import "../core/exports";
 @import "../core/mobiscroll";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-mobiscroll-input-background: $mbsc-input-background-light !default;
+$mbsc-mobiscroll-dark-input-background: $mbsc-input-background-dark !default;
+// Text
+$mbsc-mobiscroll-input-text: $mbsc-input-text-light !default;
+$mbsc-mobiscroll-dark-input-text: $mbsc-input-text-dark !default;
+// Accent
+$mbsc-mobiscroll-input-accent: $mbsc-input-accent-light !default;
+$mbsc-mobiscroll-dark-input-accent: $mbsc-input-accent-dark !default;
+// Error
+$mbsc-mobiscroll-input-error: $mbsc-input-error-light !default;
+$mbsc-mobiscroll-dark-input-error: $mbsc-input-error-dark !default;
+
+$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
+  'input-background': $mbsc-mobiscroll-input-background,
+  'input-text': $mbsc-mobiscroll-input-text,
+  'input-accent': $mbsc-mobiscroll-input-accent,
+  'input-error': $mbsc-mobiscroll-input-error,
+));
+$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
+  'input-background': $mbsc-mobiscroll-dark-input-background,
+  'input-text': $mbsc-mobiscroll-dark-input-text,
+  'input-accent': $mbsc-mobiscroll-dark-input-accent,
+  'input-error': $mbsc-mobiscroll-dark-input-error,
+));
+
 @mixin mbsc-mobiscroll-input($theme, $params) {
   @include exports("input.#{$theme}.colors") {
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
-    $text: map-get($params, text);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
+    // get custom params
+    $input-background-param: map-get($params, 'input-background');
+    $input-text-param: map-get($params, 'input-text');
+    $input-accent-param: map-get($params, 'input-accent');
+    $input-error-param: map-get($params, 'input-error');
+
+    $text: if($input-text-param, $input-text-param, $text);
+    $accent: if($input-accent-param, $input-accent-param, $accent);
+
+    $input-box: '';
+    @if (lightness($background) > 50%) {
+      $input-box: darken($background, 10%);
+    }
+    @else {
+      $input-box: lighten($background, 10%);
+    }
+
 
     $colors: mbsc-mobiscroll-colors($params);
-    $input-icon: map-get($colors, input-icon);
-    $input-box: map-get($colors, input-box);
     $error: map-get($colors, error);
-    $color-input: map-get($colors, color-input);
-    $white-text: map-get($colors, light);
+    $white-text: map-get($colors, 'white-text');
+    $input-icon: lighten($text, 20%);
+    $color-input: darken($text, 15%);
+
+    $input-box: if($input-background-param, $input-background-param, $input-box);
+    $error: if($input-error-param, $input-error-param, $error);
 
     .mbsc-#{$theme} {
 
diff --git a/src/scss/input/input.mobiscroll.scss b/src/scss/input/input.mobiscroll.scss
index 431f4b3a..5d005faa 100644
--- a/src/scss/input/input.mobiscroll.scss
+++ b/src/scss/input/input.mobiscroll.scss
@@ -722,5 +722,5 @@
     }
   }
 
-  @include mbsc-mobiscroll-input(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
+  @include mbsc-mobiscroll-input(mobiscroll, $mbsc-mobiscroll-colors);
 }
diff --git a/src/scss/input/input.windows.colors.scss b/src/scss/input/input.windows.colors.scss
index 53ff6c6d..08cbbdf2 100644
--- a/src/scss/input/input.windows.colors.scss
+++ b/src/scss/input/input.windows.colors.scss
@@ -1,17 +1,77 @@
 @import "../core/exports";
 @import "../core/windows";
 
+// Theme specific variables - inherited from global variables
+
+// Background
+$mbsc-windows-input-background: $mbsc-input-background-light !default;
+$mbsc-windows-dark-input-background: $mbsc-input-background-dark !default;
+// Border
+$mbsc-windows-input-border: $mbsc-input-border-light !default;
+$mbsc-windows-dark-input-border: $mbsc-input-border-dark !default;
+// Text
+$mbsc-windows-input-text: $mbsc-input-text-light !default;
+$mbsc-windows-dark-input-text: $mbsc-input-text-dark !default;
+// Accent
+$mbsc-windows-input-accent: $mbsc-input-accent-light !default;
+$mbsc-windows-dark-input-accent: $mbsc-input-accent-dark !default;
+// Error
+$mbsc-windows-input-error: $mbsc-input-error-light !default;
+$mbsc-windows-dark-input-error: $mbsc-input-error-dark !default;
+
+$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
+  'input-background': $mbsc-windows-input-background,
+  'input-border': $mbsc-windows-input-border,
+  'input-text': $mbsc-windows-input-text,
+  'input-accent': $mbsc-windows-input-accent,
+  'input-error': $mbsc-windows-input-error,
+));
+$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
+  'input-background': $mbsc-windows-dark-input-background,
+  'input-border': $mbsc-windows-dark-input-border,
+  'input-text': $mbsc-windows-dark-input-text,
+  'input-accent': $mbsc-windows-dark-input-accent,
+  'input-error': $mbsc-windows-dark-input-error,
+));
+
 @mixin mbsc-windows-input($theme, $params) {
   @include exports("input.#{$theme}.colors") {
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+
+    // custom colors
+    $input-background-param: map-get($params, 'input-background');
+    $input-border-param: map-get($params, 'input-border');
+    $input-text-param: map-get($params, 'input-text');
+    $input-accent-param: map-get($params, 'input-accent');
+    $input-error-param: map-get($params, 'input-error');
+
+    // overwrite basic colors with custom ones
+    $background: if($input-background-param, $input-background-param, $background);
+    $accent: if($input-accent-param, $input-accent-param, $accent);
+
+    $input-border: '';
+    $input-hover: '';
+    $frame-border: '';
+    @if (lightness($background) > 50%) {
+      $frame-border: darken($background, 15%);
+      $input-border: darken($background, 35%);
+      $input-hover: darken($background, 55%);
+    }
+    @else {
+      $frame-border: lighten($background, 15%);
+      $input-border: lighten($background, 35%);
+      $input-hover: lighten($background, 55%);
+    }
 
+    // static colors
     $colors: mbsc-windows-colors($params);
     $error: map-get($colors, error);
-    $input-border: map-get($colors, input-border);
-    $input-hover: map-get($colors, input-hover);
-    $frame-border: map-get($colors, frame-border);
+    // overwrite colors with custom ones
+    $input-border: if($input-border-param, $input-border-param, $input-border);
+    $error: if($input-error-param, $input-error-param, $error);
 
     .mbsc-#{$theme} {
 
diff --git a/src/scss/input/input.windows.scss b/src/scss/input/input.windows.scss
index 88b95985..73d23237 100644
--- a/src/scss/input/input.windows.scss
+++ b/src/scss/input/input.windows.scss
@@ -160,5 +160,5 @@
     }
   }
 
-  @include mbsc-windows-input(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
+  @include mbsc-windows-input(windows, $mbsc-windows-colors);
 }
\ No newline at end of file
diff --git a/src/scss/notifications/notifications.windows.colors.scss b/src/scss/notifications/notifications.windows.colors.scss
index 46e7125d..17e81198 100644
--- a/src/scss/notifications/notifications.windows.colors.scss
+++ b/src/scss/notifications/notifications.windows.colors.scss
@@ -7,12 +7,19 @@
 
     @include mbsc-windows-popup($theme, $params);
 
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
 
     $colors: mbsc-windows-colors($params);
-    $dark-text: map-get($colors, dark-text);
-    $light-text: map-get($colors, light-text);
-    $input-hover: map-get($colors, input-hover);
+    $dark-text: map-get($colors, 'dark-text');
+    $light-text: map-get($colors, 'light-text');
+    $input-hover: '';
+    @if (lightness($background) > 50%) {
+      $input-hover: darken($background, 55%);
+    }
+    @else {
+      $input-hover: lighten($background, 55%);
+    }
 
     .mbsc-#{$theme} {
 
diff --git a/src/scss/page/page.ios.colors.scss b/src/scss/page/page.ios.colors.scss
index efce824e..b75d2471 100644
--- a/src/scss/page/page.ios.colors.scss
+++ b/src/scss/page/page.ios.colors.scss
@@ -1,18 +1,52 @@
 @import "../core/exports";
 @import "../core/ios";
 
+// Theme specific variables - inherited from global variables
+
+// background
+$mbsc-ios-page-background: $mbsc-page-background-light !default;
+$mbsc-ios-dark-page-background: $mbsc-page-background-dark !default;
+
+// text
+$mbsc-ios-page-text: $mbsc-page-text-light !default;
+$mbsc-ios-dark-page-text: $mbsc-page-text-dark !default;
+
+// add variables to color maps
+$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
+  'page-background': $mbsc-ios-page-background,
+  'page-text': $mbsc-ios-page-text,
+));
+$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
+  'page-background': $mbsc-ios-dark-page-background,
+  'page-text': $mbsc-ios-dark-page-text,
+));
+
 @mixin mbsc-ios-page($theme, $params) {
   @include exports("page.#{$theme}.colors") {
 
-    $text: map-get($params, text);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
 
     $colors: mbsc-ios-colors($params);
-    $button: map-get($colors, button);
-    $form-background: map-get($colors, form-background);
+    $button: map-get($colors, 'button');
+
+    @if (lightness($background) > 50%) {
+      $background: adjust-hue(darken(saturate($background, 19%), 2%), 240%);
+    }
+    @else {
+      $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240%);
+    }
+
+    // get custom params
+    $text-param: map-get($params, 'page-text');
+    $background-param: map-get($params, 'page-background');
+    // overwrite params with custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
 
     .mbsc-#{$theme} {
       &.mbsc-page {
-        background: $form-background;
+        background: $background;
         color: $text;
       }
 
diff --git a/src/scss/page/page.ios.scss b/src/scss/page/page.ios.scss
index 199b0ba5..29df84b8 100644
--- a/src/scss/page/page.ios.scss
+++ b/src/scss/page/page.ios.scss
@@ -51,5 +51,5 @@
     }
   }
 
-  @include mbsc-ios-page(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
+  @include mbsc-ios-page(ios, $mbsc-ios-colors);
 }
diff --git a/src/scss/page/page.material.colors.scss b/src/scss/page/page.material.colors.scss
index 87d8cfd1..3d6c9593 100644
--- a/src/scss/page/page.material.colors.scss
+++ b/src/scss/page/page.material.colors.scss
@@ -1,22 +1,44 @@
 @import "../core/exports";
 @import "../core/material";
 
+// Theme specific variables - inherited from global variables
+
+// background
+$mbsc-material-page-background: $mbsc-page-background-light !default;
+$mbsc-material-dark-page-background: $mbsc-page-background-dark !default;
+// text
+$mbsc-material-page-text: $mbsc-page-text-light !default;
+$mbsc-material-dark-page-text: $mbsc-page-text-dark !default;
+
+// add variablest to color maps
+$mbsc-material-colors: map-merge($mbsc-material-colors, (
+  'page-background': $mbsc-material-page-background,
+  'page-text': $mbsc-material-page-text,
+));
+$mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, (
+  'page-background': $mbsc-material-dark-page-background,
+  'page-text': $mbsc-material-dark-page-text,
+));
+
 @mixin mbsc-material-page($theme, $params) {
   @include exports("page.#{$theme}.colors") {
     @include mbsc-material-common($theme, $params);
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
 
-    $colors: mbsc-material-colors($params);
-    $form-text: map-get($colors, form-text);
+    // get custom params
+    $text-param: map-get($params, 'page-text');
+    $background-param: map-get($params, 'page-background');
+    // overwrite params with custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), lighten($text, 7%)));
 
     .mbsc-#{$theme} {
-      /* Page */
-
       &.mbsc-page {
         background-color: $background;
-        color: $form-text;
+        color: $text;
       }
 
       a {
diff --git a/src/scss/page/page.material.scss b/src/scss/page/page.material.scss
index 9691a4f7..fc73eb16 100644
--- a/src/scss/page/page.material.scss
+++ b/src/scss/page/page.material.scss
@@ -52,5 +52,5 @@
     }
   }
 
-  @include mbsc-material-page(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
+  @include mbsc-material-page(material, $mbsc-material-colors);
 }
diff --git a/src/scss/page/page.mobiscroll.colors.scss b/src/scss/page/page.mobiscroll.colors.scss
index 43bbe85c..c7aed110 100644
--- a/src/scss/page/page.mobiscroll.colors.scss
+++ b/src/scss/page/page.mobiscroll.colors.scss
@@ -1,13 +1,39 @@
 @import "../core/exports";
 @import "../core/mobiscroll";
 
+// Theme specific variables - inherited from global variables
+
+// background
+$mbsc-mobiscroll-page-background: $mbsc-page-background-light !default;
+$mbsc-mobiscroll-dark-page-background: $mbsc-page-background-dark !default;
+
+// text
+$mbsc-mobiscroll-page-text: $mbsc-page-text-light !default;
+$mbsc-mobiscroll-dark-page-text: $mbsc-page-text-dark !default;
+
+// add variables to color maps
+$mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, (
+  'page-background': $mbsc-mobiscroll-page-background,
+  'page-text': $mbsc-mobiscroll-page-text,
+));
+$mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, (
+  'page-background': $mbsc-mobiscroll-dark-page-background,
+  'page-text': $mbsc-mobiscroll-dark-page-text,
+));
+
 @mixin mbsc-mobiscroll-page($theme, $params) {
   @include exports("page.#{$theme}.colors") {
     @include mbsc-mobiscroll-common($theme, $params);
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
-    $background: map-get($params, background);
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    $background: map-get($params, 'background');
+    // get custom params
+    $text-param: map-get($params, 'page-text');
+    $background-param: map-get($params, 'page-background');
+    // overwrite params with custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
 
     .mbsc-#{$theme} {
       &.mbsc-page {
diff --git a/src/scss/page/page.mobiscroll.scss b/src/scss/page/page.mobiscroll.scss
index e3454237..19e8653e 100644
--- a/src/scss/page/page.mobiscroll.scss
+++ b/src/scss/page/page.mobiscroll.scss
@@ -53,5 +53,5 @@
     }
   }
 
-  @include mbsc-mobiscroll-page(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
+  @include mbsc-mobiscroll-page(mobiscroll, $mbsc-mobiscroll-colors);
 }
diff --git a/src/scss/page/page.windows.colors.scss b/src/scss/page/page.windows.colors.scss
index d0e33880..a206101a 100644
--- a/src/scss/page/page.windows.colors.scss
+++ b/src/scss/page/page.windows.colors.scss
@@ -1,19 +1,52 @@
 @import "../core/exports";
 @import "../core/windows";
 
+// Theme specific variables - inherited from global variables
+
+// background
+$mbsc-windows-page-background: $mbsc-page-background-light !default;
+$mbsc-windows-dark-page-background: $mbsc-page-background-dark !default;
+
+// text
+$mbsc-windows-page-text: $mbsc-page-text-light !default;
+$mbsc-windows-dark-page-text: $mbsc-page-text-dark !default;
+
+// add variables to color maps
+$mbsc-windows-colors: map-merge($mbsc-windows-colors, (
+  'page-background': $mbsc-windows-page-background,
+  'page-text': $mbsc-windows-page-text,
+));
+$mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, (
+  'page-background': $mbsc-windows-dark-page-background,
+  'page-text': $mbsc-windows-dark-page-text,
+));
+
 @mixin mbsc-windows-page($theme, $params) {
   @include exports("page.#{$theme}.colors") {
     @include mbsc-windows-common($theme, $params);
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+
+    @if (lightness($background) > 50%) {
+      $background: lighten($background, 13%);
+    }
+    @else {
+      $background: darken($background, 12%);
+    }
+
 
-    $colors: mbsc-windows-colors($params);
-    $form-background: map-get($colors, form-background);
+    // get custom params
+    $text-param: map-get($params, 'page-text');
+    $background-param: map-get($params, 'page-background');
+    // overwrite params with custom variables
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
 
     .mbsc-#{$theme} {
       &.mbsc-page {
-        background-color: $form-background;
+        background-color: $background;
         color: $text;
       }
 
diff --git a/src/scss/page/page.windows.scss b/src/scss/page/page.windows.scss
index 094849a5..3f7a9634 100644
--- a/src/scss/page/page.windows.scss
+++ b/src/scss/page/page.windows.scss
@@ -49,5 +49,5 @@
     }
   }
 
-  @include mbsc-windows-page(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
+  @include mbsc-windows-page(windows, $mbsc-windows-colors);
 }
diff --git a/src/scss/progress/progress.mobiscroll.colors.scss b/src/scss/progress/progress.mobiscroll.colors.scss
index f666e84a..fbdc79eb 100644
--- a/src/scss/progress/progress.mobiscroll.colors.scss
+++ b/src/scss/progress/progress.mobiscroll.colors.scss
@@ -4,11 +4,21 @@
 @mixin mbsc-mobiscroll-progress($theme, $params) {
   @include exports("progress.#{$theme}.colors") {
 
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
+    // derived colors
+    $input-icon: lighten($text, 20%);
 
-    $colors: mbsc-mobiscroll-colors($params);
-    $input-icon: map-get($colors, input-icon);
-    $btn-disabled: map-get($colors, btn-disabled);
+    $track: '';
+    // Light background
+    @if (lightness($background) > 50%) {
+      $track: darken($background, 10%);
+    }
+    // Dark background
+    @else {
+      $track: lighten($background, 8%);
+    }
 
     .mbsc-#{$theme} {
       &.mbsc-progress .mbsc-input-ic {
@@ -16,7 +26,7 @@
       }
 
       .mbsc-progress-track {
-        background: $btn-disabled;
+        background: $track;
       }
 
       .mbsc-progress-bar {
diff --git a/src/scss/scroller/scroller.ios.colors.scss b/src/scss/scroller/scroller.ios.colors.scss
index d17d1fbf..2b3f0704 100644
--- a/src/scss/scroller/scroller.ios.colors.scss
+++ b/src/scss/scroller/scroller.ios.colors.scss
@@ -7,21 +7,57 @@
 
     @include mbsc-ios-frame($theme, $params);
 
-    $text: map-get($params, text);
-    $accent: map-get($params, accent);
-
-    $colors: mbsc-ios-colors($params);
-    $button: map-get($colors, button);
-    $background-limited: map-get($colors, background-limited);
-    $cont-background: map-get($colors, cont-background);
-    $border-color: map-get($colors, border-color);
-    $item-3d: map-get($colors, item-3d);
-    $item-color: map-get($colors, item-color);
-    $popup-border: map-get($colors, popup-border);
-    $label-text: map-get($colors, label-text);
-    $button-active: map-get($colors, button-active);
-    $top-bottom-frame: map-get($colors, top-bottom-frame);
-    $top-bottom-wheel-border: map-get($colors, top-bottom-wheel-border);
+    $text: map-get($params, 'text');
+    $accent: map-get($params, 'accent');
+    $background: map-get($params, 'background');
+
+    $button: '';
+    @if (map-get($params, 'button')) {
+      $button: map-get($params, 'button');
+    }
+    @else {
+      $button: $accent;
+    }
+
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
+
+    // calculated colors
+    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
+    $background-alt: lighten($background-limited, 3%);
+    $cont-background: lighten($background, 6%);
+    $item-color: hsl(hue($text), saturation($text), 62%);
+
+    $top-bottom-frame: '';
+    $border-color: '';
+    $item-3d: '';
+    $popup-border: '';
+    $label-text: '';
+    $button-active: '';
+    $top-bottom-wheel-border: '';
+    @if (lightness($background) > 50%) {
+      $top-bottom-frame: adjust-hue(darken(saturate($background, 12%), 13%), 216%);
+      $border-color: darken($background-limited, 17%);
+      $item-3d: darken($background-limited, 33%);
+      $popup-border: $border-color;
+      $label-text: lighten($text, 67%);
+      $button-active: darken($background, 5%);
+      $top-bottom-wheel-border: darken($background-limited, 30%);
+    }
+    @else {
+      $top-bottom-frame: $background-limited;
+      $border-color: lighten($background, 20%);
+      $item-3d: lighten($background-limited, 40%);
+      $popup-border: lighten($border-color, 13%);
+      $label-text: $text;
+      $button-active: lighten($background, 12%);
+      $top-bottom-wheel-border: $border-color;
+    }
 
     .mbsc-#{$theme} {
       /* Scroller */
@@ -74,12 +110,12 @@
       /* Inline color theme */
 
       &.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-o {
-        background: -webkit-linear-gradient($cont-background, rgba($cont-background, 0) 52%, rgba($cont-background, 0) 48%, $cont-background);
-        background: linear-gradient($cont-background, rgba($cont-background, 0) 52%, rgba($cont-background, 0) 48%, $cont-background);
+        background: -webkit-linear-gradient($background-alt, rgba($background-alt, 0) 52%, rgba($background-alt, 0) 48%, $background-alt);
+        background: linear-gradient($background-alt, rgba($background-alt, 0) 52%, rgba($background-alt, 0) 48%, $background-alt);
       }
 
       &.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c {
-        background: $cont-background;
+        background: $background-alt;
       }
 
       /* Wheel label */
diff --git a/src/scss/scroller/scroller.ios.scss b/src/scss/scroller/scroller.ios.scss
index 81596267..bb021e68 100644
--- a/src/scss/scroller/scroller.ios.scss
+++ b/src/scss/scroller/scroller.ios.scss
@@ -19,6 +19,10 @@
     }
 
     .mbsc-sc-whl-gr-c {
+      padding: 0 .833333em;
+    }
+
+    &.mbsc-fr-liq .mbsc-sc-whl-gr-3d-c {
       padding: 0 3%;
     }
 
@@ -164,5 +168,5 @@
     }
   }
 
-  @include mbsc-ios-scroller(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent));
+  @include mbsc-ios-scroller(ios, $mbsc-ios-colors);
 }
diff --git a/src/scss/scroller/scroller.material.colors.scss b/src/scss/scroller/scroller.material.colors.scss
index d2e1d25b..1ccc6646 100644
--- a/src/scss/scroller/scroller.material.colors.scss
+++ b/src/scss/scroller/scroller.material.colors.scss
@@ -7,8 +7,14 @@
 
     @include mbsc-material-frame($theme, $params);
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+
+    $background-param: map-get($params, 'frame-background');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $accent: if($accent-param, $accent-param, $accent);
 
     .mbsc-#{$theme} {
       .mbsc-sc-lbl {
diff --git a/src/scss/scroller/scroller.material.scss b/src/scss/scroller/scroller.material.scss
index 41587779..e6bb1891 100644
--- a/src/scss/scroller/scroller.material.scss
+++ b/src/scss/scroller/scroller.material.scss
@@ -106,5 +106,5 @@
     }
   }
 
-  @include mbsc-material-scroller(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent));
+  @include mbsc-material-scroller(material, $mbsc-material-colors);
 }
diff --git a/src/scss/scroller/scroller.mobiscroll.colors.scss b/src/scss/scroller/scroller.mobiscroll.colors.scss
index 5a21d8aa..c6a4819c 100644
--- a/src/scss/scroller/scroller.mobiscroll.colors.scss
+++ b/src/scss/scroller/scroller.mobiscroll.colors.scss
@@ -7,9 +7,17 @@
 
     @include mbsc-mobiscroll-frame($theme, $params);
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
-    $text: map-get($params, text);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
+
+    $background-param: map-get($params, 'frame-background');
+    $text-param: map-get($params, 'frame-text');
+    $accent-param: map-get($params, 'frame-accent');
+
+    $background: if($background-param, $background-param, $background);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+    $accent: if($accent-param, $accent-param, $accent);
 
     .mbsc-#{$theme} {
       .mbsc-sc-lbl {
diff --git a/src/scss/scroller/scroller.mobiscroll.scss b/src/scss/scroller/scroller.mobiscroll.scss
index 0e286b9e..fa0e9068 100644
--- a/src/scss/scroller/scroller.mobiscroll.scss
+++ b/src/scss/scroller/scroller.mobiscroll.scss
@@ -94,5 +94,5 @@
     }
   }
 
-  @include mbsc-mobiscroll-scroller(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
+  @include mbsc-mobiscroll-scroller(mobiscroll, $mbsc-mobiscroll-colors);
 }
diff --git a/src/scss/scroller/scroller.scss b/src/scss/scroller/scroller.scss
index 27cfacd9..df3d7d53 100644
--- a/src/scss/scroller/scroller.scss
+++ b/src/scss/scroller/scroller.scss
@@ -184,6 +184,12 @@
     overflow: hidden;
   }
 
+  .mbsc-sc-whl-gr-3d .mbsc-sc-whl-w,
+  .mbsc-sc-whl-gr-3d .mbsc-sc-whl {
+    /* For Edge and Firefox */
+    transform-style: preserve-3d;
+  }
+
   .mbsc-sc-whl-3d {
     position: absolute;
     top: 50%;
diff --git a/src/scss/scroller/scroller.windows.colors.scss b/src/scss/scroller/scroller.windows.colors.scss
index 3cc9c54e..48d9c72d 100644
--- a/src/scss/scroller/scroller.windows.colors.scss
+++ b/src/scss/scroller/scroller.windows.colors.scss
@@ -7,14 +7,31 @@
 
     @include mbsc-windows-frame($theme, $params);
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
-    $text: map-get($params, text);
-
-    $colors: mbsc-windows-colors($params);
-    $frame-border: map-get($colors, frame-border);
-    $wheel-button: map-get($colors, wheel-button);
-    $button-hover: map-get($colors, button-hover);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
+
+    $background-param: map-get($params, 'frame-background');
+    $accent-param: map-get($params, 'frame-accent');
+    $text-param: map-get($params, 'frame-text');
+
+    $background: if($background-param, $background-param, $background);
+    $accent: if($accent-param, $accent-param, $accent);
+    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
+
+    $button-hover: '';
+    $frame-border: '';
+    $wheel-button: '';
+    @if(lightness($background) > 50%) {
+      $button-hover: darken($background, 10%);
+      $frame-border: darken($background, 15%);
+      $wheel-button: darken($background, 5%);
+    }
+    @else {
+      $button-hover: lighten($background, 10%);
+      $frame-border: lighten($background, 15%);
+      $wheel-button: lighten($background, 5%);
+    }
 
     .mbsc-#{$theme} {
       .mbsc-sc-whl-gr-c {
diff --git a/src/scss/scroller/scroller.windows.scss b/src/scss/scroller/scroller.windows.scss
index 054ec20c..36a9540a 100644
--- a/src/scss/scroller/scroller.windows.scss
+++ b/src/scss/scroller/scroller.windows.scss
@@ -99,5 +99,5 @@
     }
   }
 
-  @include mbsc-windows-scroller(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent));
+  @include mbsc-windows-scroller(windows, $mbsc-windows-colors);
 }
diff --git a/src/scss/slider/slider.windows.colors.scss b/src/scss/slider/slider.windows.colors.scss
index 67a45694..2a7e5d4b 100644
--- a/src/scss/slider/slider.windows.colors.scss
+++ b/src/scss/slider/slider.windows.colors.scss
@@ -9,15 +9,24 @@
     @include mbsc-windows-page($theme, $params);
     @include mbsc-windows-progress($theme, $params);
 
-    $background: map-get($params, background);
-    $accent: map-get($params, accent);
-    $text: map-get($params, text);
+    $background: map-get($params, 'background');
+    $accent: map-get($params, 'accent');
+    $text: map-get($params, 'text');
 
     $colors: mbsc-windows-colors($params);
-    $form-background: map-get($colors, form-background);
-    $input-hover: map-get($colors, input-hover);
-    $input-border: map-get($colors, input-border);
-    $frame-border: map-get($colors, frame-border);
+    $input-border: map-get($colors, 'input-border');
+    $frame-border: map-get($colors, 'frame-border');
+
+    $form-background: '';
+    $input-hover: '';
+    @if (lightness($background) > 50%) {
+      $form-background: lighten($background, 13%);
+      $input-hover: darken($background, 55%);
+    }
+    @else {
+      $form-background: darken($background, 12%);
+      $input-hover: lighten($background, 55%);
+    }
 
     .mbsc-#{$theme} {
       &.mbsc-slider .mbsc-progress-track {