diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css new file mode 100644 index 000000000..e83cab517 --- /dev/null +++ b/ui/dist/themes/dark.css @@ -0,0 +1,33 @@ +:root { + /* Colors */ + --color-primary: #009688; + --color-canvas: #0f1517; + --color-bg: #1a2327; + --color-bg-alt: #314048; + --color-help: #AAA; + --color-error: #a94442; + --color-load-screen-text: #FFF; + --color-money: var(--color-primary); + --color-meta-light: #757575; + --color-dark-overlay: rgb(15, 21, 23, 0.85); + + /* Text */ + --text-color: #FFF; + + /* Input */ + --input-bg: transparent; + --input-active-bg: rgba(0,0,0, 0.65); + --input-border-color: rgba(255,255,255, 0.25); + + /* Search */ + --search-bg: rgba(0,0,0, 0.45); + --search-active-bg: rgba(0,0,0, 0.75); + --search-border: 1px solid rgba(0,0,0, 0.5); + + /* Select */ + --select-bg: var(--color-bg-alt); + + /* Header */ + --header-color: #EEE; + --header-active-color: #FFF; +} diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index e28667c08..6efe7db7e 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -19,6 +19,10 @@ class App extends React.PureComponent { alertError(event.detail); }); + getThemes(); + + setTheme(); + if (!this.props.upgradeSkipped) { checkUpgradeAvailable(); } @@ -32,12 +36,6 @@ class App extends React.PureComponent { this.scrollListener = () => this.props.recordScroll(window.scrollY); window.addEventListener("scroll", this.scrollListener); - - // Load themes - getThemes(); - - // Select theme - setTheme(); } componentWillUnmount() { diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 1c484c68b..7e4d93f1d 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -7,6 +7,7 @@ html } body { + color: var(--text-color); font-family: 'Source Sans Pro', sans-serif; line-height: var(--font-line-height); } diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 3148abd7e..95e394126 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -19,6 +19,7 @@ --color-bg: #ffffff; --color-bg-alt: #D9D9D9; + /* Misc */ --content-max-width: 1000px; --nsfw-blur-intensity: 20px; @@ -50,9 +51,14 @@ /* Input */ --input-width: 330px; + --input-color: var(--text-color); --input-border-size: 2px; --input-border-color: rgba(0,0,0,.25); + /* Select */ + --select-bg: var(--color-bg-alt); + --select-color: var(--text-color); + /* Button */ --button-bg: var(--color-bg-alt); --button-color: #FFF; diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 841d58d62..8e2547c54 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -46,6 +46,8 @@ input[type="text"].input-copyable { padding-left: 5px; padding-right: 5px; height: $spacing-vertical; + background: var(--select-bg); + color: var(--select-color); &:focus { outline: var(--input-border-size) solid var(--color-primary); } @@ -67,6 +69,8 @@ input[type="text"].input-copyable { padding-right: 1px; box-sizing: border-box; -webkit-appearance: none; + background: var(--input-bg); + color: var(--input-color); &[readonly] { background-color: #bbb; } @@ -82,6 +86,7 @@ input[type="text"].input-copyable { line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; + &.form-field__input--error { border-color: var(--color-error); } diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 0d01abe1c..f27cb4e00 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -45,8 +45,9 @@ padding-right: 5px; @include border-radius(2px); border: var(--search-border); - transition: all var(--transition-duration) var(--transition-type); + transition: box-shadow var(--transition-duration) var(--transition-type); &:focus { + background: var(--search-active-bg); color: var(--search-active-color); box-shadow: var(--box-shadow-focus); border-color: var(--color-primary);