HKEY_LOCAL_MACHINE, that contains the install path of the game. This is used to obtain the install path if LOOT has no previous record of the game's install path, or LOOT's stored install path is invalid. Either this or an install path must be supplied.
+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 resources/ui/css folder inside LOOT's installation folder, and rename the file to theme.css. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename dark-theme.css in the resources/ui/css folder to theme.css. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.
LOOT is very much a community project, and contributions from its users are very welcome, whether they be metadata, translations, code or anything else. The best way to contribute is to make changes yourself at GitHub! It's the fastest way to get changes you want applied, and you'll get your name automatically immortalised in our credits. diff --git a/resources/ui/css/dark-theme.css b/resources/ui/css/dark-theme.css new file mode 100644 index 00000000..7f260501 --- /dev/null +++ b/resources/ui/css/dark-theme.css @@ -0,0 +1,111 @@ +/* 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; +} + +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; +} + +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; +} + +html /deep/ paper-input-decorator::shadow .underline .unfocused-underline, +.divider { + background-color: rgba(255, 255, 255, 0.12) !important; +} + +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; +} + +html /deep/ paper-checkbox::shadow #checkbox.checked { + border-color: #1A237E !important; +} + +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; +} + +#main { + background: #303030 !important; +} + +li.error > p, +li.warn > p { + color: black !important; +} + +.version { + color: #78909C !important; +} +.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; +} diff --git a/scripts/archive.js b/scripts/archive.js index 1eff1cde..f3b4c546 100644 --- a/scripts/archive.js +++ b/scripts/archive.js @@ -111,6 +111,10 @@ function createAppArchive(rootPath, releasePath, tempPath, destPath) { path.join(releasePath, 'resources', 'ui', 'index.html'), path.join(tempPath, 'resources', 'ui', 'index.html') ); + fs.copySync( + path.join(rootPath, 'resources', 'ui', 'css', 'dark-theme.css'), + path.join(tempPath, 'resources', 'ui', 'css', 'dark-theme.css') + ); fs.copySync( path.join(rootPath, 'resources', 'ui', 'fonts'), path.join(tempPath, 'resources', 'ui', 'fonts') diff --git a/scripts/installer.iss b/scripts/installer.iss index f326034e..e7d4d123 100644 --- a/scripts/installer.iss +++ b/scripts/installer.iss @@ -107,6 +107,8 @@ DestDir: "{app}\docs\images"; Flags: ignoreversion Source: "{#buildir}\Release\resources\ui\index.html"; \ DestDir: "{app}\resources\ui"; Flags: ignoreversion +Source: "resources\ui\css\dark-theme.css"; \ +DestDir: "{app}\resources\ui\css"; Flags: ignoreversion Source: "resources\ui\fonts\*"; \ DestDir: "{app}\resources\ui\fonts"; Flags: ignoreversion diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js index 2cd7c306..650351d6 100755 --- a/scripts/vulcanize.js +++ b/scripts/vulcanize.js @@ -21,6 +21,9 @@ if (process.argv.length > 3) { const vulcanize = new Vulcanize({ inlineScripts: true, inlineCss: true, + excludes: [ + 'css/theme.css', + ], }); function mkdir(dir) { diff --git a/src/gui/html/index.html b/src/gui/html/index.html index dbf293f7..67d418cc 100644 --- a/src/gui/html/index.html +++ b/src/gui/html/index.html @@ -4,6 +4,7 @@