From 0286f45365285577645f1d0f78c4a69f11b690c7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 14:13:49 +0900 Subject: Replace console colors by a variable --- src/console/components/console.scss | 50 ++++++++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 15 deletions(-) (limited to 'src/console/components') diff --git a/src/console/components/console.scss b/src/console/components/console.scss index c0b9b12..d74a585 100644 --- a/src/console/components/console.scss +++ b/src/console/components/console.scss @@ -1,3 +1,17 @@ +$completion-title-background: lightgray; +$completion-title-foreground: #000000; +$completion-item-background: #ffffff; +$completion-item-foreground: #000000; +$completion-item-description-foreground: #008000; +$completion-selected-background: #ffff00; +$completion-selected-foreground: #000000; +$command-background: #ffffff; +$command-foreground: #000000; +$console-error-background: #ff0000; +$console-error-foreground: #ffffff; +$console-info-background: #ffffff; +$console-info-foreground: #018786; + html, body, * { margin: 0; padding: 0; @@ -16,7 +30,7 @@ body { margin: 0; padding: 0; - @mixin consoole-font { + @mixin console-font { font-style: normal; font-family: monospace; font-size: 12px; @@ -28,18 +42,20 @@ body { } &-completion { - background-color: white; - - @include consoole-font; + @include console-font; &-title { - background-color: lightgray; + background-color: $completion-title-background; + color: $completion-title-foreground; font-weight: bold; margin: 0; padding: 0; } &-item { + background-color: $completion-item-background; + color: $completion-item-foreground; + padding-left: 1.5rem; background-position: 0 center; background-size: contain; @@ -47,7 +63,8 @@ body { white-space: pre; &.vimvixen-completion-selected { - background-color: yellow; + background-color: $completion-selected-background; + color: $completion-selected-foreground; } &-caption { @@ -59,7 +76,7 @@ body { &-url { display: inline-block; - color: green; + color: $completion-item-description-foreground; width: 60%; text-overflow: ellipsis; overflow: hidden; @@ -68,36 +85,39 @@ body { } &-message { - @include consoole-font; + @include console-font; border-top: 1px solid gray; } &-error { - background-color: red; + background-color: $console-error-background; + color: $console-error-foreground; font-weight: bold; - color: white; } &-info { - background-color: white; + background-color: $console-info-background; + color: $console-info-foreground; font-weight: normal; - color: green; } &-command { - background-color: white; + background-color: $command-background; + color: $command-foreground; display: flex; &-prompt { - @include consoole-font; + @include console-font; } &-input { border: none; flex-grow: 1; + background-color: $command-background; + color: $command-foreground; - @include consoole-font; + @include console-font; } } } -- cgit v1.2.3 From 6d77918a99cb0811bdb7a08cc016e0cfb31c7b63 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 14:35:43 +0900 Subject: Use CSS var() --- src/console/components/console.scss | 58 +++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 28 deletions(-) (limited to 'src/console/components') diff --git a/src/console/components/console.scss b/src/console/components/console.scss index d74a585..efb8589 100644 --- a/src/console/components/console.scss +++ b/src/console/components/console.scss @@ -1,16 +1,18 @@ -$completion-title-background: lightgray; -$completion-title-foreground: #000000; -$completion-item-background: #ffffff; -$completion-item-foreground: #000000; -$completion-item-description-foreground: #008000; -$completion-selected-background: #ffff00; -$completion-selected-foreground: #000000; -$command-background: #ffffff; -$command-foreground: #000000; -$console-error-background: #ff0000; -$console-error-foreground: #ffffff; -$console-info-background: #ffffff; -$console-info-foreground: #018786; +:root { + --completion-title-background: lightgray; + --completion-title-foreground: #000000; + --completion-item-background: #ffffff; + --completion-item-foreground: #000000; + --completion-item-description-foreground: #008000; + --completion-selected-background: #ffff00; + --completion-selected-foreground: #000000; + --command-background: #ffffff; + --command-foreground: #000000; + --console-error-background: #ff0000; + --console-error-foreground: #ffffff; + --console-info-background: #ffffff; + --console-info-foreground: #018786; +} html, body, * { margin: 0; @@ -45,16 +47,16 @@ body { @include console-font; &-title { - background-color: $completion-title-background; - color: $completion-title-foreground; + background-color: var(--completion-title-background); + color: var(--completion-title-foreground); font-weight: bold; margin: 0; padding: 0; } &-item { - background-color: $completion-item-background; - color: $completion-item-foreground; + background-color: var(--completion-item-background); + color: var(--completion-item-foreground); padding-left: 1.5rem; background-position: 0 center; @@ -63,8 +65,8 @@ body { white-space: pre; &.vimvixen-completion-selected { - background-color: $completion-selected-background; - color: $completion-selected-foreground; + background-color: var(--completion-selected-background); + color: var(--completion-selected-foreground); } &-caption { @@ -76,7 +78,7 @@ body { &-url { display: inline-block; - color: $completion-item-description-foreground; + color: var(--completion-item-description-foreground); width: 60%; text-overflow: ellipsis; overflow: hidden; @@ -91,20 +93,20 @@ body { } &-error { - background-color: $console-error-background; - color: $console-error-foreground; + background-color: var(--console-error-background); + color: var(--console-error-foreground); font-weight: bold; } &-info { - background-color: $console-info-background; - color: $console-info-foreground; + background-color: var(--console-info-background); + color: var(--console-info-foreground); font-weight: normal; } &-command { - background-color: $command-background; - color: $command-foreground; + background-color: var(--command-background); + color: var(--command-foreground); display: flex; &-prompt { @@ -114,8 +116,8 @@ body { &-input { border: none; flex-grow: 1; - background-color: $command-background; - color: $command-foreground; + background-color: var(--command-background); + color: var(--command-foreground); @include console-font; } -- cgit v1.2.3 From 2888d8dd4750bff3882b7214c574bce19c857c37 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 14:41:36 +0900 Subject: Define dark theme and specify a theme by an attribute --- src/console/components/console.scss | 18 +++++++++++++++++- src/console/index.html | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) (limited to 'src/console/components') diff --git a/src/console/components/console.scss b/src/console/components/console.scss index efb8589..ccb769b 100644 --- a/src/console/components/console.scss +++ b/src/console/components/console.scss @@ -1,4 +1,4 @@ -:root { +[data-theme="light"] { --completion-title-background: lightgray; --completion-title-foreground: #000000; --completion-item-background: #ffffff; @@ -14,6 +14,22 @@ --console-info-foreground: #018786; } +[data-theme="dark"] { + --completion-title-background: #052027; + --completion-title-foreground: white; + --completion-item-background: #2f474f; + --completion-item-foreground: white; + --completion-item-description-foreground: #86fab0; + --completion-selected-background: #eeff41; + --completion-selected-foreground: #000000; + --command-background: #052027; + --command-foreground: white; + --console-error-background: red; + --console-error-foreground: white; + --console-info-background: #052027; + --console-info-foreground: #ffffff; +} + html, body, * { margin: 0; padding: 0; diff --git a/src/console/index.html b/src/console/index.html index 73e1e23..3704071 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,7 +5,7 @@ VimVixen console - +
-- cgit v1.2.3 From 65fedca9dfc4b85acce85b9eb3272cfc76d112a7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 16:18:12 +0900 Subject: Allow to change color scheme by "colorscheme" property --- src/console/actions/console.ts | 11 +++++++++++ src/console/actions/index.ts | 10 +++++++++- src/console/clients/SettingClient.ts | 13 +++++++++++++ src/console/components/Console.tsx | 23 ++++++++++++++++++++--- src/console/index.html | 2 +- src/console/reducers/index.ts | 8 ++++++++ src/shared/ColorScheme.ts | 7 +++++++ src/shared/settings/Properties.ts | 6 +----- test/shared/SettingData.test.ts | 13 +++++++++++-- test/shared/settings/Properties.test.ts | 4 ++++ test/shared/settings/Settings.test.ts | 1 + 11 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/console/clients/SettingClient.ts create mode 100644 src/shared/ColorScheme.ts (limited to 'src/console/components') diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index 6282791..16d33b3 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -2,11 +2,13 @@ import * as messages from "../../shared/messages"; import * as actions from "./index"; import { Command } from "../../shared/Command"; import CompletionClient from "../clients/CompletionClient"; +import SettingClient from "../clients/SettingClient"; import CompletionType from "../../shared/CompletionType"; import Completions from "../Completions"; import TabFlag from "../../shared/TabFlag"; const completionClient = new CompletionClient(); +const settingClient = new SettingClient(); const commandDocs = { [Command.Set]: "Set a value of the property", @@ -272,6 +274,14 @@ const completionPrev = (): actions.CompletionPrevAction => { }; }; +const setColorScheme = async (): Promise => { + const scheme = await settingClient.getColorScheme(); + return { + type: actions.CONSOLE_SET_COLORSCHEME, + colorscheme: scheme, + }; +}; + export { hide, showCommand, @@ -288,4 +298,5 @@ export { getPropertyCompletions, completionNext, completionPrev, + setColorScheme, }; diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts index 308a093..6c1c759 100644 --- a/src/console/actions/index.ts +++ b/src/console/actions/index.ts @@ -1,5 +1,6 @@ import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export const CONSOLE_HIDE = "console.hide"; export const CONSOLE_SHOW_COMMAND = "console.show.command"; @@ -11,6 +12,7 @@ export const CONSOLE_SET_COMPLETIONS = "console.set.completions"; export const CONSOLE_COMPLETION_NEXT = "console.completion.next"; export const CONSOLE_COMPLETION_PREV = "console.completion.prev"; export const CONSOLE_SHOW_FIND = "console.show.find"; +export const CONSOLE_SET_COLORSCHEME = "console.set.colorscheme"; export interface HideAction { type: typeof CONSOLE_HIDE; @@ -59,6 +61,11 @@ export interface CompletionPrevAction { type: typeof CONSOLE_COMPLETION_PREV; } +export interface SetColorSchemeAction { + type: typeof CONSOLE_SET_COLORSCHEME; + colorscheme: ColorScheme; +} + export type ConsoleAction = | HideAction | ShowCommand @@ -69,4 +76,5 @@ export type ConsoleAction = | SetConsoleTextAction | SetCompletionsAction | CompletionNextAction - | CompletionPrevAction; + | CompletionPrevAction + | SetColorSchemeAction; diff --git a/src/console/clients/SettingClient.ts b/src/console/clients/SettingClient.ts new file mode 100644 index 0000000..f75517a --- /dev/null +++ b/src/console/clients/SettingClient.ts @@ -0,0 +1,13 @@ +import Settings from "../../shared/settings/Settings"; +import * as messages from "../../shared/messages"; +import ColorScheme from "../../shared/ColorScheme"; + +export default class SettingClient { + async getColorScheme(): Promise { + const json = await browser.runtime.sendMessage({ + type: messages.SETTINGS_QUERY, + }); + const settings = Settings.fromJSON(json); + return settings.properties.colorscheme; + } +} diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index d74040d..a0e22e4 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -10,6 +10,7 @@ import CommandLineParser, { InputPhase, } from "../commandline/CommandLineParser"; import { Command } from "../../shared/Command"; +import ColorScheme from "../../shared/ColorScheme"; const COMPLETION_MAX_ITEMS = 33; @@ -126,11 +127,23 @@ class Console extends React.Component { } render() { + let theme = this.props.colorscheme; + if (this.props.colorscheme === ColorScheme.System) { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + theme = ColorScheme.Dark; + } else { + theme = ColorScheme.Light; + } + } + switch (this.props.mode) { case "command": case "find": return ( -
+
{ case "info": case "error": return ( - {this.props.messageText} +
+ {this.props.messageText} +
); default: return null; } } - focus() { + async focus() { + this.props.dispatch(consoleActions.setColorScheme()); + window.focus(); if (this.input.current) { this.input.current.focus(); diff --git a/src/console/index.html b/src/console/index.html index 3704071..73e1e23 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,7 +5,7 @@ VimVixen console - +
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts index f2ffed7..752dfd9 100644 --- a/src/console/reducers/index.ts +++ b/src/console/reducers/index.ts @@ -1,6 +1,7 @@ import * as actions from "../actions"; import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export interface State { mode: string; @@ -11,6 +12,7 @@ export interface State { completions: Completions; select: number; viewIndex: number; + colorscheme: ColorScheme; } const defaultState = { @@ -22,6 +24,7 @@ const defaultState = { completions: [], select: -1, viewIndex: 0, + colorscheme: ColorScheme.System, }; const nextSelection = (state: State): number => { @@ -122,6 +125,11 @@ export default function reducer( ), }; } + case actions.CONSOLE_SET_COLORSCHEME: + return { + ...state, + colorscheme: action.colorscheme, + }; default: return state; } diff --git a/src/shared/ColorScheme.ts b/src/shared/ColorScheme.ts new file mode 100644 index 0000000..a7b874e --- /dev/null +++ b/src/shared/ColorScheme.ts @@ -0,0 +1,7 @@ +enum ColorScheme { + System = "system", + Light = "light", + Dark = "dark", +} + +export default ColorScheme; diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index 529ecfc..7540c8a 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -1,8 +1,4 @@ -enum ColorScheme { - System = "system", - Light = "light", - Dark = "dark", -} +import ColorScheme from "../ColorScheme"; export type PropertiesJSON = { hintchars?: string; diff --git a/test/shared/SettingData.test.ts b/test/shared/SettingData.test.ts index 283daa5..3cfd5c9 100644 --- a/test/shared/SettingData.test.ts +++ b/test/shared/SettingData.test.ts @@ -6,6 +6,7 @@ import SettingData, { import Settings from "../../src/shared/settings/Settings"; import { expect } from "chai"; import Keymaps from "../../src/shared/settings/Keymaps"; +import ColorScheme from "../../src/shared/ColorScheme"; describe("shared/SettingData", () => { describe("FormKeymaps", () => { @@ -54,7 +55,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`; @@ -104,6 +106,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }; @@ -124,6 +127,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -147,6 +151,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }); @@ -165,6 +170,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -188,7 +194,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`, @@ -212,6 +219,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }, @@ -229,6 +237,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); diff --git a/test/shared/settings/Properties.test.ts b/test/shared/settings/Properties.test.ts index 6007e84..647cb1c 100644 --- a/test/shared/settings/Properties.test.ts +++ b/test/shared/settings/Properties.test.ts @@ -1,5 +1,6 @@ import Properties from "../../../src/shared/settings/Properties"; import { expect } from "chai"; +import ColorScheme from "../../../src/shared/ColorScheme"; describe("Properties", () => { describe("#propertiesValueOf", () => { @@ -9,6 +10,7 @@ describe("Properties", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); @@ -17,12 +19,14 @@ describe("Properties", () => { hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }); expect(props).to.deep.equal({ hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); }); diff --git a/test/shared/settings/Settings.test.ts b/test/shared/settings/Settings.test.ts index 4ecfe77..951c9cd 100644 --- a/test/shared/settings/Settings.test.ts +++ b/test/shared/settings/Settings.test.ts @@ -33,6 +33,7 @@ describe("Settings", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); -- cgit v1.2.3