Update dark theme implementation

To use CSS custom variables.

docs/LOOT Readme.html

@@ -466,7 +466,7 @@ figure > div {
 </table>
 
 <h2 id="themes">Themes</h2>
-<p>LOOT's user interface has experimental support for the use of alternative and custom CSS themes. To use a theme, place its CSS file into the <code>resources/ui/css</code> folder inside LOOT's installation folder, and rename the file to <code>theme.css</code>. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename <code>dark-theme.css</code> in the <code>resources/ui/css</code> folder to <code>theme.css</code>. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.</p>
+<p>LOOT's user interface has CSS theming support. A dark theme is provided with LOOT: to use it, rename <code>dark-theme.css</code> in the <code>resources/ui/css</code> folder to <code>theme.css</code>. A working knowledge of CSS is required to create new themes, though the provided dark theme CSS file is commented to provide some assistance.</p>
 
 
 <h2 id="contrib">Contributing &amp; Support</h2>

resources/ui/css/dark-theme.css

@@ -1,111 +1,51 @@
 /* Dark theme CSS overrides. */
-html,
-html /deep/ paper-item, html /deep/ core-menu > paper-item,
-html /deep/ paper-dropdown-menu::shadow #label {
-    color: white !important;
-}
 
-html, body {
-    background: black;
-}
+/* CSS Custom Variables */
+:root {
+  /* --primary-color is used for the main toolbar background, floating input
+     labels and dialog buttons. */
+  --primary-color: var(--paper-blue-600);
 
-html /deep/ paper-item[disabled],
-html /deep/ paper-item[disabled] > core-icon,
-html /deep/ paper-input-decorator::shadow .label-text,
-html /deep/ input::-webkit-input-placeholder,
-html /deep/ table[is=editable-table] paper-icon-button[disabled],
-html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu[disabled]::shadow #label,
-html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu::shadow #arrow {
-    color: rgba(255, 255, 255, 0.3) !important;
-}
+  /* --light-primary-color is used for the editor toolbar background. */
+  --light-primary-color: var(--paper-grey-900);
 
-html /deep/ paper-item core-icon,
-html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button,
-html /deep/ table[is=editable-table] paper-icon-button,
-html /deep/ loot-plugin-card::shadow core-tooltip:not(#activeTick) > core-icon,
-html /deep/ loot-plugin-card::shadow #conflictsLabel > core-icon,
-html /deep/ loot-plugin-item::shadow #secondary,
-html /deep/ loot-plugin-editor::shadow core-tooltip:not(#activeTick) > core-icon {
-    color: rgba(255, 255, 255, 0.7) !important;
-}
+  /* --accent-color is used for underlines and ripples */
+  --accent-color: var(--paper-blue-600);
 
-html /deep/ paper-input-decorator::shadow .underline .unfocused-underline,
-.divider {
-    background-color: rgba(255, 255, 255, 0.12) !important;
-}
+  /* --dark-accent-color is used for links, the Apply sorting button, and the
+     Save editor icon button. */
+  --dark-accent-color: var(--paper-blue-500);
 
-html /deep/ paper-input-decorator[disabled]::shadow .underline,
-html /deep/ table th,
-html /deep/ paper-dropdown-menu {
-    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
-}
+  /* --primary-background-color is use for sidebar, dialog and card backgrounds. */
+  --primary-background-color: var(--paper-grey-800);
+  --primary-text-color: var(--dark-theme-text-color);
+  --secondary-text-color: var(--dark-theme-secondary-color);
+  --disabled-text-color: var(--dark-theme-disabled-color);
+  --divider-color: var(--dark-theme-divider-color);
 
-html /deep/ paper-checkbox::shadow #checkbox.checked {
-    border-color: #1A237E !important;
-}
+  /* --paper-toolbar-background can be used to override the --primary-color defined
+     above for the main toolbar. */
+  --paper-toolbar-background: var(--paper-grey-900);
 
-html /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
-    background-color: rgba(26, 35, 126, 0.5) !important;
-}
-
-html /deep/ paper-toggle-button::shadow [checked] .toggle-button,
-html /deep/ paper-checkbox::shadow #checkbox.checked {
-    background-color: #1A237E !important;
-}
-
-html /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
-    color: #1A237E !important;
-}
-
-/* Dark dropdown menus. */
-html /deep/ paper-dropdown::shadow #background,
-loot-dialog,
-loot-message-dialog,
-div[drawer],
-#summary,
-html /deep/ loot-plugin-card::shadow #wrapper,
-html /deep/ loot-plugin-editor::shadow core-selector > * {
-    background: #424242 !important;
-}
-
-/* Dark dialogs. */
-loot-dialog,
-loot-message-dialog {
-    color: white !important;
-}
-
-/* Dark progress bar background. */
-paper-progress::shadow #progressContainer {
-    background-color: #303030 !important;
-}
-
-core-toolbar,
-div[drawer] > div:first-child,
-html /deep/ loot-search::shadow core-toolbar,
-html /deep/ loot-plugin-editor {
-    background: #212121 !important;
+  /* --secondary-background-color is used for the progress bar background and
+     the background behind cards. */
+  --secondary-background-color: #303030;
+  --paper-progress-container-color: var(--secondary-background-color);
 }
 
 #main {
-    background: #303030 !important;
+    background: var(--secondary-background-color);
 }
 
 li.error > p,
 li.warn > p {
-    color: black !important;
+    color: black;
 }
 
 .version {
-    color: #78909C !important;
+    color: #78909C;
 }
+
 .crc {
-    color: #8D6E63 !important;
-}
-
-html /deep/ loot-plugin-card.search-result::shadow #editor {
-    box-shadow: inset 4px 0 #1A237E !important;
-}
-
-html /deep/ loot-plugin-editor::shadow core-selector > * {
-    border-bottom: 4px solid #212121 !important;
+    color: #8D6E63;
 }

src/gui/html/css/style.css

@@ -26,9 +26,11 @@
   --state-transition-time: 0.6s;
 
   --primary-color: var(--paper-indigo-500);
+  --light-primary-color: var(--paper-blue-50);
   --accent-color: var(--paper-blue-300);
   --dark-accent-color: var(--paper-blue-500);
 
+  --primary-background-color: white;
   --primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
   --secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
   --disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
@@ -39,7 +41,7 @@
   --dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
   --dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));
 
-  --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30);
+  --paper-icon-button-disabled-text: var(--dark-theme-disabled-color);
   --paper-tabs-selection-bar-color: var(--accent-color);
   --paper-tab-ink: var(--accent-color);
 
@@ -78,7 +80,7 @@ tt, code, kbd, samp {
 
 /* Drawer / Sidebar */
 div[drawer] {
-    background: white;
+    background: var(--primary-background-color);
 }
 div[drawer] > * {
     border-right: 1px var(--divider-color) solid;
@@ -118,7 +120,7 @@ div[drawer] > iron-pages {
     margin-bottom: 120px;
 }
 #summary {
-    background-color: white;
+    background-color: var(--primary-background-color);
     margin: 8px;
     padding: 16px;
 }

src/gui/html/elements/loot-plugin-card.html

@@ -21,7 +21,7 @@
       /* Host styling. */
       #wrapper {
         display: block;
-        background: white;
+        background: var(--primary-background-color);
         margin: 0 8px 8px 8px;
         position: relative;
       }
@@ -72,7 +72,7 @@
       /* Misc Styling. */
       paper-toolbar {
         --paper-toolbar-color: var(--primary-text-color);
-        --paper-toolbar-background: white;
+        --paper-toolbar-background: var(--primary-background-color);
       }
       #content {
         overflow: hidden;

src/gui/html/elements/loot-plugin-editor.html

@@ -33,6 +33,7 @@ loot-editor-close
         min-height: 56px;
         max-height: calc(100% - 56px);
         transition: height var(--state-transition-time), min-height var(--state-transition-time);
+        background-color: var(--primary-background-color);
       }
       :host(.hidden) {
         height: 0;
@@ -85,7 +86,7 @@ loot-editor-close
 
       /* Misc Styling. */
       paper-toolbar.medium-tall {
-        --paper-toolbar-background: var(--paper-blue-50);
+        --paper-toolbar-background: var(--loot-plugin-editor-toolbar-background, var(--light-primary-color));
         --paper-toolbar-color: var(--primary-text-color);
         height: 104px;
       }
@@ -106,7 +107,7 @@ loot-editor-close
         z-index: 1;
       }
       #splitter:active {
-        background: rgba(0, 0, 0, 0.12);
+        background: var(--divider-color);
       }
     </style>
     <div id="splitter"></div>

src/gui/html/index.html

@@ -94,6 +94,7 @@
       };
     }
     .paper-item {
+      background-color: var(--primary-background-color);
       display: flex;
       align-items: center;
     }
@@ -110,6 +111,9 @@
         transition: color var(--state-transition-time);
       };
 
+      --paper-item: {
+          background-color: var(--primary-background-color);
+      };
       --paper-icon-item: {
         white-space: nowrap;
       };