diff --git a/demos/app.variables.scss b/demos/app.variables.scss
new file mode 100644
index 0000000000..12b647616d
--- /dev/null
+++ b/demos/app.variables.scss
@@ -0,0 +1,31 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files. Setting
+// variables before Ionic's Sass will use these variables rather than
+// Ionic's default Sass variable values. App Shared Sass imports belong
+// in the app.core.scss file and not this file. Sass variables specific
+// to the mode belong in either the app.ios.scss or app.md.scss files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+// Both iOS and MD colors can be further customized if colors
+// are different per mode.
+
+$colors: (
+ primary: #387ef5,
+ secondary: #32db64,
+ danger: #f53d3d,
+ light: #f4f4f4,
+ dark: #222,
+ vibrant: rebeccapurple,
+ bright: #FFC125
+);
diff --git a/demos/icon/main.html b/demos/icon/main.html
index 7897a7aee8..704dae498d 100644
--- a/demos/icon/main.html
+++ b/demos/icon/main.html
@@ -9,14 +9,14 @@
-
+
-
+
@@ -25,27 +25,27 @@
-
+
-
+
-
+
-
+
-
+
diff --git a/demos/output.ios.scss b/demos/output.ios.scss
index 052237e8f5..f3018826e5 100644
--- a/demos/output.ios.scss
+++ b/demos/output.ios.scss
@@ -1,4 +1,36 @@
$font-path: "../fonts";
$roboto-font-path: "../fonts";
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files. Setting
+// variables before Ionic's Sass will use these variables rather than
+// Ionic's default Sass variable values. App Shared Sass imports belong
+// in the app.core.scss file and not this file. Sass variables specific
+// to the mode belong in either the app.ios.scss or app.md.scss files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+// Both iOS and MD colors can be further customized if colors
+// are different per mode.
+
+$colors: (
+ primary: #387ef5,
+ secondary: #32db64,
+ danger: #f53d3d,
+ light: #f4f4f4,
+ dark: #222,
+ vibrant: rebeccapurple,
+ bright: #FFC125
+);
+
@import "../ionic/ionic.ios";
diff --git a/demos/output.md.scss b/demos/output.md.scss
index d4d8a86aa8..4c0d7bd119 100644
--- a/demos/output.md.scss
+++ b/demos/output.md.scss
@@ -1,4 +1,36 @@
$font-path: "../fonts";
$roboto-font-path: "../fonts";
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files. Setting
+// variables before Ionic's Sass will use these variables rather than
+// Ionic's default Sass variable values. App Shared Sass imports belong
+// in the app.core.scss file and not this file. Sass variables specific
+// to the mode belong in either the app.ios.scss or app.md.scss files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+// Both iOS and MD colors can be further customized if colors
+// are different per mode.
+
+$colors: (
+ primary: #387ef5,
+ secondary: #32db64,
+ danger: #f53d3d,
+ light: #f4f4f4,
+ dark: #222,
+ vibrant: rebeccapurple,
+ bright: #FFC125
+);
+
@import "../ionic/ionic.md";
diff --git a/gulpfile.js b/gulpfile.js
index 96bba5bcc7..7566326307 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -634,6 +634,7 @@ function buildDemoSass(isProductionMode) {
(function combineSass() {
gulp.src([
sassVars,
+ 'demos/app.variables.scss',
'demos/app.ios.scss'
])
.pipe(concat('output.ios.scss'))
@@ -641,6 +642,7 @@ function buildDemoSass(isProductionMode) {
gulp.src([
sassVars,
+ 'demos/app.variables.scss',
'demos/app.md.scss'
])
.pipe(concat('output.md.scss'))