diff --git a/src/console/index.tsx b/src/console/index.tsx index 5b979176..17dfcb58 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -5,6 +5,10 @@ import { AppProvider } from "./app/provider"; import App from "./App"; import "./index.css"; +const colorScheme = (new URLSearchParams(window.location.search)).get('colorScheme') +/* @ts-expect-error: The colorScheme property is not on the CSSStyleDeclaration type in TypeScript v4.3.5 */ +window.document.documentElement.style.colorScheme = colorScheme ?? '' + window.addEventListener("DOMContentLoaded", () => { const wrapper = document.getElementById("vimvixen-console"); ReactDOM.render( diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index 0db58f0b..793efc26 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -19,10 +19,13 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { return; } + /* @ts-expect-error: The colorScheme property is not on the CSSStyleDeclaration type in TypeScript v4.3.5 */ + const colorScheme = getComputedStyle(document.body).colorScheme const iframe = document.createElement("iframe"); - iframe.src = browser.runtime.getURL("build/console.html"); + iframe.src = browser.runtime.getURL("build/console.html?colorScheme=" + colorScheme); iframe.id = ConsoleFramePresenterImpl.IframeId; iframe.className = "vimvixen-console-frame"; + iframe.style.height = '0px'; document.body.append(iframe); } @@ -39,6 +42,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { if (!ele) { return; } + this.resize(0, 0) ele.blur(); }