From a7aef045ca7c42a0c4f0b86e6d646a43becbd42a Mon Sep 17 00:00:00 2001 From: Ben Straub Date: Thu, 13 Oct 2022 11:25:51 -0700 Subject: [PATCH 1/2] Initial import for dark mode theme --- src/module/features/visual-theme.ts | 1 + src/module/helpers/settings.ts | 3 +- src/styles/themes/dark-mode.less | 51 +++++++++++++++++++++++++++++ system/lang/en.json | 5 +-- 4 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 src/styles/themes/dark-mode.less diff --git a/src/module/features/visual-theme.ts b/src/module/features/visual-theme.ts index 16ed5ba32..6d2cbb1ca 100644 --- a/src/module/features/visual-theme.ts +++ b/src/module/features/visual-theme.ts @@ -3,6 +3,7 @@ import { IronswornSettings } from '../helpers/settings' import '../../styles/styles.less' import '../../styles/themes/ironsworn.less' import '../../styles/themes/starforged.less' +import '../../styles/themes/dark-mode.less' export function themeSetup() { const currentTheme = IronswornSettings.get('theme') diff --git a/src/module/helpers/settings.ts b/src/module/helpers/settings.ts index 4a5e22110..991025fd8 100644 --- a/src/module/helpers/settings.ts +++ b/src/module/helpers/settings.ts @@ -11,7 +11,7 @@ declare global { interface Values { // Settings added here will be automatically typed throughout the game system. 'foundry-ironsworn.prompt-world-truths': boolean - 'foundry-ironsworn.theme': 'ironsworn' | 'starforged' + 'foundry-ironsworn.theme': 'ironsworn' | 'starforged' | 'darkmode' 'foundry-ironsworn.toolbox': 'ironsworn' | 'starforged' | 'sheet' 'foundry-ironsworn.shared-supply': boolean 'foundry-ironsworn.log-changes': boolean @@ -50,6 +50,7 @@ export class IronswornSettings { choices: { ironsworn: 'IRONSWORN.Settings.Theme.Ironsworn', starforged: 'IRONSWORN.Settings.Theme.Starforged', + darkmode: 'IRONSWORN.Settings.Theme.DarkMode', }, default: 'ironsworn', onChange: reload, diff --git a/src/styles/themes/dark-mode.less b/src/styles/themes/dark-mode.less new file mode 100644 index 000000000..ef5aa049e --- /dev/null +++ b/src/styles/themes/dark-mode.less @@ -0,0 +1,51 @@ +body.theme-darkmode { + a { + color: #d9d9d9 !important; + } + .chat-message .message-header { + color: #d9d9d9 !important; + } + .chat-message { + color: #d9d9d9 !important; + border: 0px; + background: #00000095; + } + :root { + --darkreader-border--color-border-dark: #00000000; + } + .dice-tray button { + border-color: #ffffff10; + box-shadow: rgb(87 87 87) 0px 0px 0px inset; + } + .dice-tray input[type='text'] { + border-color: #ffffff10; + box-shadow: rgb(87 87 87) 0px 0px 0px inset; + } + body.theme-ironsworn table tr.selected, + body.theme-ironsworn table tr[aria-selected='true'] { + background-color: #4c4c4c; + } + #module-management input[type='checkbox']:checked::after { + background-color: #ffffff50; + } + button { + background-color: #00000050; + border: 0px; + } + #chat-controls .roll-type-select { + background-color: #ffffff00; + border-color: #ffffff10; + } + #chat-form textarea { + background-color: #ffffff10; + background-image: none; + } + .chat-message.emote { + color: #d9d9d9 !important; + border: 0px; + background: #00000095; + } + body.theme-ironsworn { + --ironsworn-color-thematic: #4c4c4c; + } +} diff --git a/system/lang/en.json b/system/lang/en.json index f92d65773..e55fdab8f 100644 --- a/system/lang/en.json +++ b/system/lang/en.json @@ -279,7 +279,8 @@ "Name": "Visual Theme", "Hint": "Select the visual look for this game. Requires a reload.", "Ironsworn": "Ironsworn Classic", - "Starforged": "Starforged (experimental)" + "Starforged": "Starforged (experimental)", + "DarkMode": "Dark Mode" }, "Tools": { "Name": "Character Tools", @@ -1666,4 +1667,4 @@ } } } -} \ No newline at end of file +} From 40491f0d9c222388f5b721e39792322134e1d75e Mon Sep 17 00:00:00 2001 From: Ben Straub Date: Thu, 13 Oct 2022 11:32:44 -0700 Subject: [PATCH 2/2] Copy-paste the ironsworn theme and hack with some colors :yuk: --- src/styles/themes/dark-mode.less | 184 ++++++++++++++++++++++++++++++- 1 file changed, 179 insertions(+), 5 deletions(-) diff --git a/src/styles/themes/dark-mode.less b/src/styles/themes/dark-mode.less index ef5aa049e..df383e604 100644 --- a/src/styles/themes/dark-mode.less +++ b/src/styles/themes/dark-mode.less @@ -1,4 +1,181 @@ body.theme-darkmode { + @background-color: black; + @light-color: #ccc; + @medium-color: darkgray; + @dark-color: #888; + @text-color: #999; + --ironsworn-color-bg: @background-color; + --ironsworn-color-shade-1: @dark-color; + --ironsworn-color-shade-2: @medium-color; + --ironsworn-color-shade-3: @light-color; + --ironsworn-color-fg: @text-color; + --ironsworn-color-border: @text-color; + --ironsworn-color-thematic: @text-color; + --ironsworn-color-highlight: palegoldenrod; + + input::placeholder { + color: var(--ironsworn-color-shade-2); + } + + input.highlight:focus { + background-color: var(--ironsworn-color-fg); + color: var(--ironsworn-color-bg); + } + + .window-content, + .journal-entry .journal-entry-content { + background: var(--ironsworn-color-bg); + } + + .sheet-area { + border-color: var(--ironsworn-color-shade-2); + } + + .margin-left, + .margin-right { + border-color: var(--ironsworn-color-border); + h1 { + border-color: var(--ironsworn-color-border); + } + } + + .stack-row { + border-color: var(--ironsworn-color-border); + } + + .edit { + border-color: var(--ironsworn-color-border); + + &.editing { + background: var(--ironsworn-color-shade-2); + } + } + + .inset { + border-color: var(--ironsworn-color-shade-2); + } + + .item-row { + border-color: var(--ironsworn-color-border); + background-color: var(--ironsworn-color-bg); + + &.highlighted { + background-color: var(--ironsworn-color-highlight); + } + } + + .movesheet-row.highlighted { + background-color: var(--ironsworn-color-highlight); + } + + .progresses .item { + border-color: var(--ironsworn-color-shade-2); + } + + .asset-ironsworn .asset-ability:before { + border: 1px solid @text-color; + } + + [role^='tablist'], + [role*=' tablist'] { + border-color: var(--ironsworn-color-shade-2); + } + + .item-list { + ol > h2 { + border-color: var(--ironsworn-color-bg); + background-color: var(--ironsworn-color-shade-3); + color: var(--ironsworn-color-bg); + } + + .item { + border-color: var(--ironsworn-color-shade-2); + } + } + + .progress { + border-color: var(--ironsworn-color-border); + } + + .move-title { + background-color: var(--ironsworn-color-bg); + border-color: var(--ironsworn-color-shade-3); + } + + .clickable { + &.selected, + &[aria-selected='true'] { + &:not(svg):not(.svg) { + color: var(--ironsworn-color-bg); + background-color: var(--ironsworn-color-thematic); + border-color: var(--ironsworn-color-border); + } + } + + &.disabled, + &:disabled, + &[aria-disabled='true'] { + color: var(--ironsworn-color-shade-3); + } + + &.hover, + &:hover { + &.block { + background: var(--ironsworn-color-shade-1); + } + &.text:not(.block) { + color: var(--ironsworn-color-shade-1); + } + } + &:active { + &.block { + background: var(--ironsworn-color-shade-2); + } + &.text:not(.block) { + color: var(--ironsworn-color-shade-2); + } + } + } + + .drag-highlight { + background: var(--ironsworn-color-shade-2); + } + + .stats { + .stat { + border-color: var(--ironsworn-color-border); + } + } + + .compact { + .bordergroup { + border-color: var(--ironsworn-color-border); + } + } + + .ironsworn-roll { + .dice-formula, + .dice-total { + background-color: var(--ironsworn-color-bg); + } + } + + table tr { + &.selected, + &[aria-selected='true'] { + background-color: @text-color; + color: var(--ironsworn-color-shade-1); + + .entity-link, + .content-link { + color: var(--ironsworn-color-bg); + padding: none; + border: none; + background: transparent; + } + } + } + a { color: #d9d9d9 !important; } @@ -21,8 +198,8 @@ body.theme-darkmode { border-color: #ffffff10; box-shadow: rgb(87 87 87) 0px 0px 0px inset; } - body.theme-ironsworn table tr.selected, - body.theme-ironsworn table tr[aria-selected='true'] { + table tr.selected, + table tr[aria-selected='true'] { background-color: #4c4c4c; } #module-management input[type='checkbox']:checked::after { @@ -45,7 +222,4 @@ body.theme-darkmode { border: 0px; background: #00000095; } - body.theme-ironsworn { - --ironsworn-color-thematic: #4c4c4c; - } }