diff --git a/src/components/skinManager.js b/src/components/skinManager.js
index a9af80a878..7bca4e283f 100644
--- a/src/components/skinManager.js
+++ b/src/components/skinManager.js
@@ -64,6 +64,9 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
         }, {
             name: "Light (Red Accent)",
             id: "light-red"
+        }, {
+            name: "Purple Haze",
+            id: "purple-haze"
         }, {
             name: "Windows Media Center",
             id: "wmc"
diff --git a/src/components/themes/purple-haze/bg.jpg b/src/components/themes/purple-haze/bg.jpg
new file mode 100644
index 0000000000..7f02e5160f
Binary files /dev/null and b/src/components/themes/purple-haze/bg.jpg differ
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
new file mode 100644
index 0000000000..97958d49b6
--- /dev/null
+++ b/src/components/themes/purple-haze/theme.css
@@ -0,0 +1,476 @@
+.skinHeader,
+html {
+    color: #ddd;
+    color: rgba(255, 255, 255, .8)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+    background-color: #303030
+}
+
+.emby-collapsible-button {
+    border-color: #383838;
+    border-color: rgba(255, 255, 255, .135)
+}
+
+.skinHeader-withBackground {
+    background: #303030;
+    background: -webkit-gradient(linear, left top, right top, from(#000420), color-stop(#06256f), color-stop(#5a1259), color-stop(#06256f), to(#011145));
+    background: -webkit-linear-gradient(left, #000420, #06256f, #5a1259, #2b052b, #011145);
+    background: -o-linear-gradient(left, #000420, #06256f, #5a1259, #2b052b, #011145);
+    background: linear-gradient(to right, #000420, #06256f, #5a1259, #2b052b, #011145)
+}
+
+.skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+}
+
+.pageTitleWithDefaultLogo {
+    background-image: url(../logowhite.png)
+}
+
+.dialog,
+html {
+    background-color: #3f2d7a
+}
+
+.backgroundContainer {
+    background: url(bg.jpg) center top no-repeat #030322;
+    -webkit-background-size: cover;
+    background-size: cover
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: .93
+}
+
+@media (orientation:portrait) {
+    .backgroundContainer {
+        background-position: 30% top
+    }
+}
+
+.paper-icon-button-light:focus {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
+}
+
+.fab,
+.raised {
+    background: rgba(0, 0, 0, .5);
+    color: rgba(255, 255, 255, .87)
+}
+
+.fab:focus,
+.raised:focus {
+    background: rgba(0, 0, 0, .7)
+}
+
+.button-submit {
+    background: #00a4dc;
+    color: #fff
+}
+
+.button-submit:focus {
+    background: #0cb0e8;
+    color: #fff
+}
+
+.checkboxLabel {
+    color: inherit
+}
+
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #bbb;
+    color: rgba(255, 255, 255, .7)
+}
+
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #00a4dc
+}
+
+.checkboxOutline {
+    border-color: currentColor
+}
+
+.cardContent {
+    border-radius: 1.000em
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: rgba(0, 0, 0, .5);
+    border-radius: 1.000em
+}
+
+.cardOverlayContainer {
+    border-radius: 0.8em;
+}
+.visualCardBox .cardOverlayContainer {
+    border-bottom-right-radius: 0em;
+    border-bottom-left-radius: 0em;
+}
+
+.defaultCardBackground1 {
+    background-color: #d2b019
+}
+
+.defaultCardBackground2 {
+    background-color: #338abb
+}
+
+.defaultCardBackground3 {
+    background-color: #6b689d
+}
+
+.defaultCardBackground4 {
+    background-color: #dd452b
+}
+
+.defaultCardBackground5 {
+    background-color: #5ccea9
+}
+
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #999;
+    color: rgba(255, 255, 255, .5)
+}
+
+.actionsheetDivider {
+    background: #444;
+    background: rgba(255, 255, 255, .14)
+}
+
+.cardFooter-vibrant .cardText-secondary {
+    color: inherit;
+    opacity: .5
+}
+
+.actionSheetMenuItem:hover {
+    background-color: rgba(0, 0, 0, .5)
+}
+
+.toast {
+    background: #303030;
+    color: #fff;
+    color: rgba(255, 255, 255, .87)
+}
+
+.appfooter {
+    background: #06256f;
+    color: #ccc;
+    color: rgba(255, 255, 255, .78)
+}
+
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+    .appfooter-blurred {
+        background: rgba(24, 24, 24, .7);
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
+    }
+}
+
+.itemSelectionPanel {
+    border: 1px solid #00a4dc
+}
+
+.selectionCommandsPanel {
+    background: #00a4dc;
+    color: #fff
+}
+
+.upNextDialog-countdownText {
+    color: #00a4dc
+}
+
+.alphaPickerButton {
+    color: #999;
+    color: rgba(255, 255, 255, .5);
+    background-color: transparent
+}
+
+.alphaPickerButton-selected {
+    color: #fff
+}
+
+.alphaPickerButton-tv:focus {
+    background-color: #00a4dc;
+    color: #fff !important
+}
+
+.detailTableBodyRow-shaded:nth-child(even) {
+    background: #1c1c1c;
+    background: rgba(30, 30, 30, .9)
+}
+
+.listItem-border {
+    border-color: rgba(255, 255, 255, .1) !important
+}
+
+.listItem:focus {
+    background: rgba(0, 0, 0, .3)
+}
+
+.progressring-spiner {
+    border-color: #00a4dc
+}
+
+.button-flat-accent,
+.button-link {
+    color: #00a4dc
+}
+
+.mediaInfoText {
+    color: #ddd;
+    background: rgba(170, 170, 190, .2)
+}
+
+.mediaInfoTimerIcon,
+.starIcon {
+    color: #f2b01e
+}
+
+.emby-input,
+.emby-textarea {
+    color: inherit;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
+}
+
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
+
+.emby-select-withcolor {
+    color: inherit;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent
+}
+
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
+
+.emby-select-withcolor:focus {
+    border-color: #00a4dc !important
+}
+
+.emby-select-tv-withcolor:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #00a4dc
+}
+
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #00a4dc
+}
+
+.itemProgressBarForeground-recording {
+    background-color: #CB272A
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.playedIndicator {
+    background: #00a4dc
+}
+
+.fullSyncIndicator {
+    color: #fff
+}
+
+.mainDrawer {
+    background: rgba(0, 0, 0, .5);
+}
+
+.drawer-open {
+    background-color: #030322
+
+}
+
+.navMenuOption:hover {
+    background: rgba(221, 221, 221, 0.068)
+}
+
+.navMenuOption-selected {
+    background: #AA5CC3 !important;
+    color: #fff
+}
+
+.emby-button-focusscale:focus {
+    background: #00a4dc;
+    color: #fff
+}
+
+.emby-tab-button {
+    color: #999;
+    color: rgba(255, 255, 255, .4)
+}
+
+.emby-tab-button-active {
+    color: #fff
+}
+
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
+
+.emby-tab-button.emby-button-tv:focus {
+    color: #00a4dc;
+    background: 0 0
+}
+
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, .05)
+}
+
+.programCell-sports {
+    background: #3949AB !important
+}
+
+.programCell-movie {
+    background: #5E35B1 !important
+}
+
+.programCell-kids {
+    background: #039BE5 !important
+}
+
+.programCell-news {
+    background: #43A047 !important
+}
+
+.programCell-active {
+    background: rgba(0, 0, 0, .4) !important
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
+}
+
+.guide-programTextIcon {
+    color: #1e1e1e;
+    background: #555
+}
+
+.guide-headerTimeslots {
+    color: inherit
+}
+
+.guide-date-tab-button {
+    color: #555;
+    color: rgba(255, 255, 255, .3)
+}
+
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
+
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
+
+.itemBackdropFader {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
+}
+
+.infoBanner {
+    color: #ddd;
+    background: #111;
+    padding: 1em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
+}
+
+.ratingbutton-icon-withrating {
+    color: #c33
+}
+
+.downloadbutton-icon-complete,
+.downloadbutton-icon-on {
+    color: #4285F4
+}
+
+.playstatebutton-icon-played {
+    color: #c33
+}
+
+.repeatButton-active {
+    color: #4285F4
+}
+
+.card:focus .card-focuscontent {
+    border-color: #00a4dc
+}
+
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #3b3b3b
+}
+
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
+    -webkit-border-radius: 2px;
+    background: center no-repeat #888
+}
+
+.timeslotHeaders-desktop::-webkit-scrollbar {
+    height: .7em
+}
+
+.mediaInfoOfficialRating {
+    border: .09em solid #583fa0;
+    background-color: #5a1259
+}