diff --git a/LesionTracker/client/components/app/app.html b/LesionTracker/client/components/app/app.html
index 9669c60fb2e..56540f83119 100644
--- a/LesionTracker/client/components/app/app.html
+++ b/LesionTracker/client/components/app/app.html
@@ -37,4 +37,5 @@
{{ >lastLoginModal }}
{{ >progressDialog }}
{{ >viewSeriesDetailsModal }}
+ {{ >themeSelectorModal }}
diff --git a/Packages/ohif-design/app.styl b/Packages/ohif-design/app.styl
index 47040a535d2..86acfae54d7 100644
--- a/Packages/ohif-design/app.styl
+++ b/Packages/ohif-design/app.styl
@@ -2,3 +2,4 @@
@import "{design}/styles/imports/mixins"
@import "{design}/styles/imports/spacings"
@import "{design}/styles/imports/variables"
+@import "{design}/styles/imports/theme-icons"
diff --git a/Packages/ohif-design/assets/theme-icons.png b/Packages/ohif-design/assets/theme-icons.png
new file mode 100644
index 00000000000..098f7ed5201
Binary files /dev/null and b/Packages/ohif-design/assets/theme-icons.png differ
diff --git a/Packages/ohif-design/package.js b/Packages/ohif-design/package.js
index 71f3051735a..d0b29c3f72a 100644
--- a/Packages/ohif-design/package.js
+++ b/Packages/ohif-design/package.js
@@ -12,6 +12,8 @@ Package.onUse(function(api) {
api.use('jquery');
api.use('stylus');
+ api.addAssets('assets/theme-icons.png', 'client');
+
// Importable colors / typography settings
api.addFiles([
'app.styl',
@@ -19,8 +21,14 @@ Package.onUse(function(api) {
'styles/imports/spacings.styl',
'styles/imports/variables.styl',
'styles/imports/theming.styl',
- 'styles/imports/theme-tide.styl',
- 'styles/imports/theme-tigerlilly.styl'
+ 'styles/imports/theme-icons.styl',
+ 'styles/imports/themes/theme-tide.styl',
+ 'styles/imports/themes/theme-tigerlily.styl',
+ 'styles/imports/themes/theme-crickets.styl',
+ 'styles/imports/themes/theme-honeycomb.styl',
+ 'styles/imports/themes/theme-mint.styl',
+ 'styles/imports/themes/theme-overcast.styl',
+ 'styles/imports/themes/theme-quartz.styl'
], 'client', {
isImport: true
});
diff --git a/Packages/ohif-design/styles/imports/theme-icons.styl b/Packages/ohif-design/styles/imports/theme-icons.styl
new file mode 100644
index 00000000000..853638f52ef
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/theme-icons.styl
@@ -0,0 +1,47 @@
+.theme-icon-crickets
+.theme-icon-tide
+.theme-icon-tigerlily
+.theme-icon-quartz
+.theme-icon-overcast
+.theme-icon-mint
+.theme-icon-honeycomb
+ display: inline-block
+ background: url('/packages/design/assets/theme-icons.png') no-repeat
+ overflow: hidden
+ text-indent: -9999px
+ text-align: left
+
+.theme-icon-crickets
+ background-position: -0px -0px
+ width: 64px
+ height: 56px
+
+.theme-icon-tide
+ background-position: -0px -56px
+ width: 64px
+ height: 54px
+
+.theme-icon-tigerlily
+ background-position: -0px -110px
+ width: 62px
+ height: 61px
+
+.theme-icon-quartz
+ background-position: -0px -171px
+ width: 59px
+ height: 64px
+
+.theme-icon-overcast
+ background-position: -0px -235px
+ width: 58px
+ height: 37px
+
+.theme-icon-mint
+ background-position: -0px -272px
+ width: 57px
+ height: 61px
+
+.theme-icon-honeycomb
+ background-position: -0px -333px
+ width: 50px
+ height: 58px
diff --git a/Packages/ohif-design/styles/imports/themes/theme-crickets.styl b/Packages/ohif-design/styles/imports/themes/theme-crickets.styl
new file mode 100644
index 00000000000..2ff8f593383
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/themes/theme-crickets.styl
@@ -0,0 +1,35 @@
+$themes['crickets'] = {
+ // Common pallete
+ $uiYellow: #E29E4A
+ $uiSkyBlue: #6FBDE2
+
+ // State pallete
+ $uiStateError: #FFCCCC
+ $uiStateErrorBorder: #993333
+ $uiStateErrorText: #661111
+
+ $uiGrayLight: #516873
+ $uiGray: #263340
+ $uiGrayDark: #2B141B
+ $uiGrayDarker: #231C1E
+ $uiGrayDarkest: #14191E
+
+ // Interface UI Colors
+ $defaultColor: #92C2DA
+ $hoverColor: #ffffff
+ $activeColor: #D4C3C1
+ $uiBorderColor: #537B76
+ $uiBorderColorDark: #3C5D80
+ $uiBorderColorActive: #d4aaa5
+ $primaryBackgroundColor: #000000
+ $boxBackgroundColor: #344a61
+
+ // Text Colors
+ $textColorActive: black
+ $textPrimaryColor: #ffffff
+ $textSecondaryColor: #8BE7B5
+ $largeNumbersColor: #D47C66
+
+ // Other Colors
+ $imageSliderColor: #163239
+}
diff --git a/Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl b/Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl
new file mode 100644
index 00000000000..c2099d1341b
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl
@@ -0,0 +1,35 @@
+$themes['honeycomb'] = {
+ // Common pallete
+ $uiYellow: #E29E4A
+ $uiSkyBlue: #6FBDE2
+
+ // State pallete
+ $uiStateError: #FFCCCC
+ $uiStateErrorBorder: #993333
+ $uiStateErrorText: #661111
+
+ $uiGrayLight: #516873
+ $uiGray: #263340
+ $uiGrayDark: #252228
+ $uiGrayDarker: #18161A
+ $uiGrayDarkest: #14191E
+
+ // Interface UI Colors
+ $defaultColor: #B5B5B5
+ $hoverColor: #ffffff
+ $activeColor: #CDA56B
+ $uiBorderColor: #623337
+ $uiBorderColorDark: #3C5D80
+ $uiBorderColorActive: #ce9e59
+ $primaryBackgroundColor: #000000
+ $boxBackgroundColor: #344a61
+
+ // Text Colors
+ $textColorActive: black
+ $textPrimaryColor: #ffffff
+ $textSecondaryColor: #FAB797
+ $largeNumbersColor: #D47C66
+
+ // Other Colors
+ $imageSliderColor: #163239
+}
diff --git a/Packages/ohif-design/styles/imports/themes/theme-mint.styl b/Packages/ohif-design/styles/imports/themes/theme-mint.styl
new file mode 100644
index 00000000000..450f01bf338
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/themes/theme-mint.styl
@@ -0,0 +1,35 @@
+$themes['mint'] = {
+ // Common pallete
+ $uiYellow: #E29E4A
+ $uiSkyBlue: #6FBDE2
+
+ // State pallete
+ $uiStateError: #FFCCCC
+ $uiStateErrorBorder: #993333
+ $uiStateErrorText: #661111
+
+ $uiGrayLight: #516873
+ $uiGray: #263340
+ $uiGrayDark: #1D232A
+ $uiGrayDarker: #15191E
+ $uiGrayDarkest: #14191E
+
+ // Interface UI Colors
+ $defaultColor: #A7E9B3
+ $hoverColor: #ffffff
+ $activeColor: #31B166
+ $uiBorderColor: #214529
+ $uiBorderColorDark: #3C5D80
+ $uiBorderColorActive: #23b15d
+ $primaryBackgroundColor: #000000
+ $boxBackgroundColor: #344a61
+
+ // Text Colors
+ $textColorActive: black
+ $textPrimaryColor: #ffffff
+ $textSecondaryColor: #A7E9B3
+ $largeNumbersColor: #76D27D
+
+ // Other Colors
+ $imageSliderColor: #163239
+}
diff --git a/Packages/ohif-design/styles/imports/themes/theme-overcast.styl b/Packages/ohif-design/styles/imports/themes/theme-overcast.styl
new file mode 100644
index 00000000000..3f9fc6e74e0
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/themes/theme-overcast.styl
@@ -0,0 +1,35 @@
+$themes['overcast'] = {
+ // Common pallete
+ $uiYellow: #E29E4A
+ $uiSkyBlue: #6FBDE2
+
+ // State pallete
+ $uiStateError: #FFCCCC
+ $uiStateErrorBorder: #993333
+ $uiStateErrorText: #661111
+
+ $uiGrayLight: #516873
+ $uiGray: #263340
+ $uiGrayDark: #252228
+ $uiGrayDarker: #15191E
+ $uiGrayDarkest: #14191E
+
+ // Interface UI Colors
+ $defaultColor: #9CBECF
+ $hoverColor: #ffffff
+ $activeColor: #507D80
+ $uiBorderColor: #404040
+ $uiBorderColorDark: #3C5D80
+ $uiBorderColorActive: #467c80
+ $primaryBackgroundColor: #000000
+ $boxBackgroundColor: #344a61
+
+ // Text Colors
+ $textColorActive: black
+ $textPrimaryColor: #ffffff
+ $textSecondaryColor: #73F2FC
+ $largeNumbersColor: #74F1FA
+
+ // Other Colors
+ $imageSliderColor: #163239
+}
diff --git a/Packages/ohif-design/styles/imports/themes/theme-quartz.styl b/Packages/ohif-design/styles/imports/themes/theme-quartz.styl
new file mode 100644
index 00000000000..92db4c1681a
--- /dev/null
+++ b/Packages/ohif-design/styles/imports/themes/theme-quartz.styl
@@ -0,0 +1,35 @@
+$themes['quartz'] = {
+ // Common pallete
+ $uiYellow: #E29E4A
+ $uiSkyBlue: #6FBDE2
+
+ // State pallete
+ $uiStateError: #FFCCCC
+ $uiStateErrorBorder: #993333
+ $uiStateErrorText: #661111
+
+ $uiGrayLight: #516873
+ $uiGray: #263340
+ $uiGrayDark: #2B2E3F
+ $uiGrayDarker: #151A1F
+ $uiGrayDarkest: #14191E
+
+ // Interface UI Colors
+ $defaultColor: #8EA2A4
+ $hoverColor: #ffffff
+ $activeColor: #7858CE
+ $uiBorderColor: #885B86
+ $uiBorderColorDark: #3C5D80
+ $uiBorderColorActive: #6843cc
+ $primaryBackgroundColor: #000000
+ $boxBackgroundColor: #344a61
+
+ // Text Colors
+ $textColorActive: black
+ $textPrimaryColor: #ffffff
+ $textSecondaryColor: #D7E8FE
+ $largeNumbersColor: #ABCDF6
+
+ // Other Colors
+ $imageSliderColor: #163239
+}
diff --git a/Packages/ohif-design/styles/imports/theme-tide.styl b/Packages/ohif-design/styles/imports/themes/theme-tide.styl
similarity index 78%
rename from Packages/ohif-design/styles/imports/theme-tide.styl
rename to Packages/ohif-design/styles/imports/themes/theme-tide.styl
index 98fc157dc4c..61ee1312498 100644
--- a/Packages/ohif-design/styles/imports/theme-tide.styl
+++ b/Packages/ohif-design/styles/imports/themes/theme-tide.styl
@@ -15,19 +15,20 @@ $themes['tide'] = {
$uiGrayDarkest: #14191E
// Interface UI Colors
- $defaultColor: #9cd0fe
+ $defaultColor: #9CCEF9
$hoverColor: #ffffff
- $activeColor: #00a4d9
- $uiBorderColor: #436270
+ $activeColor: #20A5D6
+ $uiBorderColor: #44626F
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #00a4d9
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
- $textColorActive: black //#89bae5
+ $textColorActive: black
$textPrimaryColor: #ffffff
- $textSecondaryColor: #6a8fb1
+ $textSecondaryColor: #91B9CD
+ $largeNumbersColor: #6FBDE2
// Other Colors
$imageSliderColor: #163239
diff --git a/Packages/ohif-design/styles/imports/theme-tigerlilly.styl b/Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl
similarity index 75%
rename from Packages/ohif-design/styles/imports/theme-tigerlilly.styl
rename to Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl
index 34ca407f1db..90b9291d4c5 100644
--- a/Packages/ohif-design/styles/imports/theme-tigerlilly.styl
+++ b/Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl
@@ -1,4 +1,4 @@
-$themes['tigerlilly'] = {
+$themes['tigerlily'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
@@ -10,15 +10,15 @@ $themes['tigerlilly'] = {
$uiGrayLight: #516873
$uiGray: #263340
- $uiGrayDark: #16202B
+ $uiGrayDark: #26333F
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
// Interface UI Colors
- $defaultColor: #98ceff
+ $defaultColor: #9ACFFD
$hoverColor: #ffffff
- $activeColor: #ff8a3d
- $uiBorderColor: #744b71
+ $activeColor: #fa8947
+ $uiBorderColor: #875a86
$uiBorderColorDark: #744b71
$uiBorderColorActive: #ff8a3d
$primaryBackgroundColor: #000000
@@ -27,7 +27,8 @@ $themes['tigerlilly'] = {
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
- $textSecondaryColor: #6a8fb1
+ $textSecondaryColor: #9CCDF8
+ $largeNumbersColor: #D47C66
// Other Colors
$imageSliderColor: #4b2c3c //#163239
diff --git a/Packages/ohif-design/styles/imports/theming.styl b/Packages/ohif-design/styles/imports/theming.styl
index e3a3c083277..78abcf00bca 100644
--- a/Packages/ohif-design/styles/imports/theming.styl
+++ b/Packages/ohif-design/styles/imports/theming.styl
@@ -2,8 +2,13 @@ $themes = {}
$defaultTheme = 'tide'
// Import the theme variables
-@import "./theme-tide.styl"
-@import "./theme-tigerlilly.styl"
+@import "./themes/theme-tide.styl"
+@import "./themes/theme-tigerlily.styl"
+@import "./themes/theme-crickets.styl"
+@import "./themes/theme-honeycomb.styl"
+@import "./themes/theme-mint.styl"
+@import "./themes/theme-overcast.styl"
+@import "./themes/theme-quartz.styl"
/*
* Process each theme variable in the given value, splitting it by space
diff --git a/Packages/ohif-study-list/client/components/index.js b/Packages/ohif-study-list/client/components/index.js
index 64dc284094f..414b454e64b 100644
--- a/Packages/ohif-study-list/client/components/index.js
+++ b/Packages/ohif-study-list/client/components/index.js
@@ -3,3 +3,4 @@ import './seriesDetailsModal';
import './serverInformation';
import './studyContextMenu';
import './studylist';
+import './themeSelector';
diff --git a/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl b/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl
index c56b4cf2dc7..7cba1526a08 100644
--- a/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl
+++ b/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl
@@ -30,7 +30,7 @@ $bodyCellHeight = 40px
line-height: $studyListToolbarHeight
.studyCount
- theme('color', '$uiSkyBlue')
+ theme('color', '$largeNumbersColor')
font-size: 40px
font-weight: 100
line-height: $studyListToolbarHeight
@@ -54,7 +54,7 @@ $bodyCellHeight = 40px
z-index: 1
&:after
- theme('background-color', '$uiSkyBlue')
+ theme('background-color', '$largeNumbersColor')
bottom: -1px
height: 1px
z-index: 3
diff --git a/Packages/ohif-study-list/client/components/themeSelector/index.js b/Packages/ohif-study-list/client/components/themeSelector/index.js
new file mode 100644
index 00000000000..f4bd17197ec
--- /dev/null
+++ b/Packages/ohif-study-list/client/components/themeSelector/index.js
@@ -0,0 +1,3 @@
+import './themeSelectorModal/themeSelectorModal.html';
+import './themeSelectorModal/themeSelectorModal.styl';
+import './themeSelectorModal/themeSelectorModal.js';
diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
new file mode 100644
index 00000000000..3d3886e66d5
--- /dev/null
+++ b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
@@ -0,0 +1,28 @@
+
+