aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/actions/console.ts12
-rw-r--r--src/console/actions/index.ts10
-rw-r--r--src/console/clients/CompletionClient.ts4
-rw-r--r--src/console/clients/SettingClient.ts13
-rw-r--r--src/console/components/Console.tsx23
-rw-r--r--src/console/components/console.scss68
-rw-r--r--src/console/reducers/index.ts8
7 files changed, 117 insertions, 21 deletions
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index 80ea6b0..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",
@@ -26,6 +28,7 @@ const propertyDocs: { [key: string]: string } = {
hintchars: "hint characters on follow mode",
smoothscroll: "smooth scroll",
complete: "which are completed at the open page",
+ colorscheme: "color scheme of the console",
};
const hide = (): actions.ConsoleAction => {
@@ -271,6 +274,14 @@ const completionPrev = (): actions.CompletionPrevAction => {
};
};
+const setColorScheme = async (): Promise<actions.SetColorSchemeAction> => {
+ const scheme = await settingClient.getColorScheme();
+ return {
+ type: actions.CONSOLE_SET_COLORSCHEME,
+ colorscheme: scheme,
+ };
+};
+
export {
hide,
showCommand,
@@ -287,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/CompletionClient.ts b/src/console/clients/CompletionClient.ts
index 64119e8..a80918b 100644
--- a/src/console/clients/CompletionClient.ts
+++ b/src/console/clients/CompletionClient.ts
@@ -5,7 +5,7 @@ import {
ConsoleRequestBookmarksResponse,
ConsoleRequestHistoryResponse,
ConsoleRequestSearchEnginesResponse,
- ConsoleRequesttabsResponse,
+ ConsoleRequestTabsResponse,
} from "../../shared/messages";
import CompletionType from "../../shared/CompletionType";
import TabFlag from "../../shared/TabFlag";
@@ -74,7 +74,7 @@ export default class CompletionClient {
type: messages.CONSOLE_REQUEST_TABS,
query,
excludePinned,
- })) as ConsoleRequesttabsResponse;
+ })) as ConsoleRequestTabsResponse;
return resp;
}
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<ColorScheme> {
+ 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<Props> {
}
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 (
- <div className="vimvixen-console-command-wrapper">
+ <div data-theme={theme} className="vimvixen-console-command-wrapper">
<Completion
size={COMPLETION_MAX_ITEMS}
completions={this.props.completions}
@@ -149,14 +162,18 @@ class Console extends React.Component<Props> {
case "info":
case "error":
return (
- <Message mode={this.props.mode}>{this.props.messageText}</Message>
+ <div data-theme={theme}>
+ <Message mode={this.props.mode}>{this.props.messageText}</Message>
+ </div>
);
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/components/console.scss b/src/console/components/console.scss
index c0b9b12..ccb769b 100644
--- a/src/console/components/console.scss
+++ b/src/console/components/console.scss
@@ -1,3 +1,35 @@
+[data-theme="light"] {
+ --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;
+}
+
+[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;
@@ -16,7 +48,7 @@ body {
margin: 0;
padding: 0;
- @mixin consoole-font {
+ @mixin console-font {
font-style: normal;
font-family: monospace;
font-size: 12px;
@@ -28,18 +60,20 @@ body {
}
&-completion {
- background-color: white;
-
- @include consoole-font;
+ @include console-font;
&-title {
- background-color: lightgray;
+ background-color: var(--completion-title-background);
+ color: var(--completion-title-foreground);
font-weight: bold;
margin: 0;
padding: 0;
}
&-item {
+ background-color: var(--completion-item-background);
+ color: var(--completion-item-foreground);
+
padding-left: 1.5rem;
background-position: 0 center;
background-size: contain;
@@ -47,7 +81,8 @@ body {
white-space: pre;
&.vimvixen-completion-selected {
- background-color: yellow;
+ background-color: var(--completion-selected-background);
+ color: var(--completion-selected-foreground);
}
&-caption {
@@ -59,7 +94,7 @@ body {
&-url {
display: inline-block;
- color: green;
+ color: var(--completion-item-description-foreground);
width: 60%;
text-overflow: ellipsis;
overflow: hidden;
@@ -68,36 +103,39 @@ body {
}
&-message {
- @include consoole-font;
+ @include console-font;
border-top: 1px solid gray;
}
&-error {
- background-color: red;
+ background-color: var(--console-error-background);
+ color: var(--console-error-foreground);
font-weight: bold;
- color: white;
}
&-info {
- background-color: white;
+ background-color: var(--console-info-background);
+ color: var(--console-info-foreground);
font-weight: normal;
- color: green;
}
&-command {
- background-color: white;
+ background-color: var(--command-background);
+ color: var(--command-foreground);
display: flex;
&-prompt {
- @include consoole-font;
+ @include console-font;
}
&-input {
border: none;
flex-grow: 1;
+ background-color: var(--command-background);
+ color: var(--command-foreground);
- @include consoole-font;
+ @include console-font;
}
}
}
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-12 04:20:45 +0000