diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index b20ae8be..0c711c93 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -38,6 +38,7 @@ <h1>Guide</h1>
       <li><a href='./blacklist.html'>Blacklist</a></li>
       <li><a href='./search_engines.html'>Search engines</a></li>
       <li><a href='./properties.html'>Properties</a></li>
+      <li><a href='./styles.html'>Custom Styles</a></li>
     </ul>
   </aside>
 
@@ -53,6 +54,7 @@ <h1>Guide</h1>
       <li><a href='./blacklist.html'>Blacklist</a></li>
       <li><a href='./search_engines.html'>Search engines</a></li>
       <li><a href='./properties.html'>Properties</a></li>
+      <li><a href='./styles.html'>Custom Styles</a></li>
       <li class='separator'></li>
       <li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vimmatic'>GitHub</a></li>
       <li><a target="_blank" rel="noopener" href='https://addons.mozilla.org/firefox/addon/vimmatic/'>Firefox Add-ons</a></li>
diff --git a/docs/styles.md b/docs/styles.md
new file mode 100644
index 00000000..7ba4b901
--- /dev/null
+++ b/docs/styles.md
@@ -0,0 +1,31 @@
+---
+title: Custom Styles
+---
+
+# Custom Styles
+
+Users can specify custom styles in CSS format for certain components.
+
+```json
+{
+  "styles": {
+      "hint": {
+          "background-color": "yellow",
+          "border": "1px solid gold",
+          "font-weight": "bold",
+          "font-size": "12px",
+          "color": "black"
+      },
+      "console": {
+          "font-family": "monospace",
+          "font-size": "12px"
+      }
+  }
+}
+
+```
+
+Vimmatic supports the two types of components:
+
+- `hint`: Hint tags in follow mode.
+- `console`: Console at the bottom of the page.
diff --git a/script/build b/script/build
index 39e317a4..e5e9c0e2 100755
--- a/script/build
+++ b/script/build
@@ -30,7 +30,6 @@ const buildScripts = async (browser) => {
 
 const buildAssets = async (browser) => {
   await fs.cp("resources/", `dist/${browser}/resources/`, { recursive: true });
-  await fs.copyFile(`src/console/index.css`, `dist/${browser}/lib/console.css`);
   await fs.copyFile(
     `src/console/index.html`,
     `dist/${browser}/lib/console.html`
diff --git a/src/background/controllers/SettingsController.ts b/src/background/controllers/SettingsController.ts
index 570e3d8e..354e8f84 100644
--- a/src/background/controllers/SettingsController.ts
+++ b/src/background/controllers/SettingsController.ts
@@ -24,6 +24,17 @@ export default class SettingsController {
     return this.settingsUseCase.getProperty(name);
   }
 
+  async getStyle(
+    _ctx: RequestContext,
+    {
+      name,
+    }: {
+      name: string;
+    }
+  ): Promise<Record<string, string>> {
+    return this.settingsUseCase.getStyle(name);
+  }
+
   async validate(
     _ctx: RequestContext,
     { settings }: { settings: unknown }
diff --git a/src/background/di.ts b/src/background/di.ts
index 23215513..22a93a17 100644
--- a/src/background/di.ts
+++ b/src/background/di.ts
@@ -21,6 +21,7 @@ import {
   ChromeClipboardRepositoryImpl,
 } from "./repositories/ClipboardRepository";
 import { PropertySettingsImpl } from "./settings/PropertySettings";
+import { StyleSettingsImpl } from "./settings/StyleSettings";
 import { SearchEngineSettingsImpl } from "./settings/SearchEngineSettings";
 import {
   TransientSettingsRepository,
@@ -65,6 +66,7 @@ if (process.env.BROWSER === "firefox") {
     .to(ChromeBrowserSettingRepositoryImpl);
 }
 container.bind("PropertySettings").to(PropertySettingsImpl);
+container.bind("StyleSettings").to(StyleSettingsImpl);
 container.bind("SearchEngineSettings").to(SearchEngineSettingsImpl);
 container.bind("KeyCaptureClient").to(KeyCaptureClientImpl);
 container.bind("MarkRepository").to(MarkRepositoryImpl);
diff --git a/src/background/messaging/BackgroundMessageListener.ts b/src/background/messaging/BackgroundMessageListener.ts
index 147754d9..d858f43d 100644
--- a/src/background/messaging/BackgroundMessageListener.ts
+++ b/src/background/messaging/BackgroundMessageListener.ts
@@ -60,6 +60,9 @@ export default class BackgroundMessageListener {
     this.receiver
       .route("settings.get.property")
       .to(settingsController.getProperty.bind(settingsController));
+    this.receiver
+      .route("settings.get.style")
+      .to(settingsController.getStyle.bind(settingsController));
     this.receiver
       .route("settings.query")
       .to(settingsController.getSettings.bind(settingsController));
diff --git a/src/background/settings/StyleSettings.ts b/src/background/settings/StyleSettings.ts
new file mode 100644
index 00000000..bc598928
--- /dev/null
+++ b/src/background/settings/StyleSettings.ts
@@ -0,0 +1,25 @@
+import { injectable, inject } from "inversify";
+import SettingsRepository from "./SettingsRepository";
+import { ComponentName } from "../../shared/Styles";
+import { defaultSettings } from "../../settings";
+
+export default interface StyleSettings {
+  getStyle(name: string): Promise<Record<string, string>>;
+}
+
+@injectable()
+export class StyleSettingsImpl {
+  constructor(
+    @inject("SettingsRepository")
+    private readonly settingsRepository: SettingsRepository
+  ) {}
+
+  async getStyle(name: ComponentName): Promise<Record<string, string>> {
+    const settings = await this.settingsRepository.load();
+    const value = (settings.styles || {})[name];
+    if (typeof value === "undefined") {
+      return defaultSettings.styles![name]!;
+    }
+    return value;
+  }
+}
diff --git a/src/background/usecases/SettingsUseCase.ts b/src/background/usecases/SettingsUseCase.ts
index 8a794a35..5ab807e2 100644
--- a/src/background/usecases/SettingsUseCase.ts
+++ b/src/background/usecases/SettingsUseCase.ts
@@ -2,6 +2,7 @@ import { injectable, inject } from "inversify";
 import { serialize, deserialize } from "../../settings";
 import SettingsRepository from "../settings/SettingsRepository";
 import PropertySettings from "../settings/PropertySettings";
+import StyleSettings from "../settings/StyleSettings";
 import Validator from "../settings/Validator";
 
 @injectable()
@@ -11,6 +12,8 @@ export default class SettingsUseCase {
     private readonly settingsRepository: SettingsRepository,
     @inject("PropertySettings")
     private readonly propertySettings: PropertySettings,
+    @inject("StyleSettings")
+    private readonly styleSettings: StyleSettings,
     @inject(Validator)
     private readonly validator: Validator
   ) {}
@@ -23,6 +26,10 @@ export default class SettingsUseCase {
     return this.propertySettings.getProperty(name);
   }
 
+  async getStyle(name: string): Promise<Record<string, string>> {
+    return this.styleSettings.getStyle(name);
+  }
+
   async validate(data: unknown): Promise<string | undefined> {
     try {
       this.validator.validate(deserialize(data));
diff --git a/src/console/App.tsx b/src/console/App.tsx
index f881fb38..2517a971 100644
--- a/src/console/App.tsx
+++ b/src/console/App.tsx
@@ -1,19 +1,51 @@
-import Console from "./components/Console";
+import React from "react";
+import Prompt from "./components/Prompt";
+import InfoMessage from "./components/InfoMessage";
+import ErrorMessage from "./components/ErrorMessage";
 import { SimplexReceiver } from "../messaging";
 import type { Schema as ConsoleMessageSchema } from "../messaging/schema/console";
-import React from "react";
-import { useConsoleMode, useVisibility } from "./app/hooks";
-import { useColorSchemeRefresh } from "./colorscheme/hooks";
+import {
+  useConsoleMode,
+  useVisibility,
+  useExecCommand,
+  useGetCommandCompletion,
+  useExecFind,
+  useGetFindCompletion,
+} from "./app/hooks";
+import { useInvalidateStyle } from "./styles/hooks";
+
+// (10item + 1title) * sbc
+const COMMAND_COMPLETION_MAX_ITEMS = 33;
+const FIND_COMPLETION_MAX_ITEMS = 11;
 
 const App: React.FC = () => {
-  const refreshColorScheme = useColorSchemeRefresh();
+  const refreshColorScheme = useInvalidateStyle();
   const { hide, visible } = useVisibility();
   const {
+    state,
     showCommandPrompt,
     showFindPrompt,
     showInfoMessage,
     showErrorMessage,
   } = useConsoleMode();
+  const execCommand = useExecCommand();
+  const execFind = useExecFind();
+  const getCommandCompletions = useGetCommandCompletion();
+  const getFindCompletions = useGetFindCompletion();
+  const onExec = React.useCallback(
+    (cmd: string) => {
+      if (state.mode !== "prompt") {
+        return;
+      }
+      if (state.promptMode === "command") {
+        execCommand(cmd);
+      } else if (state.promptMode === "find") {
+        execFind(cmd);
+      }
+      hide();
+    },
+    [execCommand, execFind, state]
+  );
 
   React.useEffect(() => {
     if (visible) {
@@ -41,7 +73,36 @@ const App: React.FC = () => {
     });
   }, []);
 
-  return <Console />;
+  if (state.mode === "prompt") {
+    if (state.promptMode === "command") {
+      return (
+        <Prompt
+          prefix={":"}
+          maxLineHeight={COMMAND_COMPLETION_MAX_ITEMS}
+          onExec={onExec}
+          queryCompletions={getCommandCompletions}
+          initValue={state.initValue}
+          onBlur={hide}
+        />
+      );
+    } else if (state.promptMode === "find") {
+      return (
+        <Prompt
+          prefix={"/"}
+          maxLineHeight={FIND_COMPLETION_MAX_ITEMS}
+          onExec={onExec}
+          queryCompletions={getFindCompletions}
+          initValue={state.initValue}
+          onBlur={hide}
+        />
+      );
+    }
+  } else if (state.mode === "info_message") {
+    return <InfoMessage>{state.message}</InfoMessage>;
+  } else if (state.mode === "error_message") {
+    return <ErrorMessage>{state.message}</ErrorMessage>;
+  }
+  return null;
 };
 
 export default App;
diff --git a/src/console/clients/SettingClient.ts b/src/console/clients/SettingClient.ts
index 13f8a07c..50fdf87c 100644
--- a/src/console/clients/SettingClient.ts
+++ b/src/console/clients/SettingClient.ts
@@ -9,4 +9,11 @@ export default class SettingClient {
     });
     return value as string;
   }
+
+  async getConsoleStyle(): Promise<Record<string, string>> {
+    const value = await this.sender.send("settings.get.style", {
+      name: "console",
+    });
+    return value as Record<string, string>;
+  }
 }
diff --git a/src/console/colorscheme/contexts.tsx b/src/console/colorscheme/contexts.tsx
deleted file mode 100644
index dba4eb67..00000000
--- a/src/console/colorscheme/contexts.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-export const ColorSchemeContext = React.createContext<string>("system");
-
-export const ColorSchemeUpdateContext = React.createContext<
-  (colorscheme: string) => void
->(() => {});
diff --git a/src/console/colorscheme/hooks.ts b/src/console/colorscheme/hooks.ts
deleted file mode 100644
index 6a840475..00000000
--- a/src/console/colorscheme/hooks.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { ColorSchemeUpdateContext } from "./contexts";
-import SettingClient from "../clients/SettingClient";
-import { newSender } from "../clients/BackgroundMessageSender";
-
-const settingClient = new SettingClient(newSender());
-
-export const useColorSchemeRefresh = () => {
-  const update = React.useContext(ColorSchemeUpdateContext);
-  const refresh = React.useCallback(() => {
-    settingClient.getColorScheme().then((newScheme) => {
-      update(newScheme);
-    });
-  }, []);
-
-  return refresh;
-};
diff --git a/src/console/colorscheme/providers.tsx b/src/console/colorscheme/providers.tsx
deleted file mode 100644
index 9153f2bd..00000000
--- a/src/console/colorscheme/providers.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { DarkTheme, LightTheme } from "./theme";
-import { ColorSchemeContext, ColorSchemeUpdateContext } from "./contexts";
-import { ThemeProvider } from "styled-components";
-
-export const ColorSchemeProvider: React.FC = ({ children }) => {
-  const [colorscheme, setColorScheme] = React.useState("system");
-  const theme = React.useMemo(() => {
-    if (colorscheme === "system") {
-      if (
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-      ) {
-        return DarkTheme;
-      }
-    } else if (colorscheme === "dark") {
-      return DarkTheme;
-    }
-    return LightTheme;
-  }, [colorscheme]);
-
-  return (
-    <ColorSchemeContext.Provider value={colorscheme}>
-      <ColorSchemeUpdateContext.Provider value={setColorScheme}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </ColorSchemeUpdateContext.Provider>
-    </ColorSchemeContext.Provider>
-  );
-};
-export default ColorSchemeProvider;
diff --git a/src/console/colorscheme/theme.ts b/src/console/colorscheme/theme.ts
deleted file mode 100644
index 5c171904..00000000
--- a/src/console/colorscheme/theme.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export type ThemeProperties = {
-  completionTitleBackground: string;
-  completionTitleForeground: string;
-  completionItemBackground: string;
-  completionItemForeground: string;
-  completionItemDescriptionForeground: string;
-  completionSelectedBackground: string;
-  completionSelectedForeground: string;
-  commandBackground: string;
-  commandForeground: string;
-  consoleErrorBackground: string;
-  consoleErrorForeground: string;
-  consoleInfoBackground: string;
-  consoleInfoForeground: string;
-};
-
-export const LightTheme: ThemeProperties = {
-  completionTitleBackground: "lightgray",
-  completionTitleForeground: "#000000",
-  completionItemBackground: "#ffffff",
-  completionItemForeground: "#000000",
-  completionItemDescriptionForeground: "#008000",
-  completionSelectedBackground: "#ffff00",
-  completionSelectedForeground: "#000000",
-  commandBackground: "#ffffff",
-  commandForeground: "#000000",
-  consoleErrorBackground: "#ff0000",
-  consoleErrorForeground: "#ffffff",
-  consoleInfoBackground: "#ffffff",
-  consoleInfoForeground: "#018786",
-};
-
-export const DarkTheme: ThemeProperties = {
-  completionTitleBackground: "#052027",
-  completionTitleForeground: "white",
-  completionItemBackground: "#2f474f",
-  completionItemForeground: "white",
-  completionItemDescriptionForeground: "#86fab0",
-  completionSelectedBackground: "#eeff41",
-  completionSelectedForeground: "#000000",
-  commandBackground: "#052027",
-  commandForeground: "white",
-  consoleErrorBackground: "red",
-  consoleErrorForeground: "white",
-  consoleInfoBackground: "#052027",
-  consoleInfoForeground: "#ffffff",
-};
diff --git a/src/console/completion/components/CompletionItem.tsx b/src/console/completion/components/CompletionItem.tsx
index 415fecb5..96513f21 100644
--- a/src/console/completion/components/CompletionItem.tsx
+++ b/src/console/completion/components/CompletionItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "../../colorscheme/styled";
+import styled from "../../styles/styled";
 
 const Container = styled.li<{
   shown: boolean;
@@ -9,13 +9,9 @@ const Container = styled.li<{
   background-image: ${({ icon }) =>
     typeof icon !== "undefined" ? "url(" + icon + ")" : "unset"};
   background-color: ${({ highlight, theme }) =>
-    highlight
-      ? theme.completionSelectedBackground
-      : theme.completionItemBackground};
+    highlight ? theme.select?.background : theme.background};
   color: ${({ highlight, theme }) =>
-    highlight
-      ? theme.completionSelectedForeground
-      : theme.completionItemForeground};
+    highlight ? theme.select?.foreground : theme.foreground};
   display: ${({ shown }) => (shown ? "block" : "none")};
   padding-left: 1.8rem;
   background-position: 0 center;
@@ -33,7 +29,7 @@ const Primary = styled.span`
 
 const Secondary = styled.span`
   display: inline-block;
-  color: ${({ theme }) => theme.completionItemDescriptionForeground};
+  color: ${({ theme }) => theme.secondaryForeground};
   width: 60%;
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/src/console/completion/components/CompletionTitle.tsx b/src/console/completion/components/CompletionTitle.tsx
index 99c3eef0..196e950a 100644
--- a/src/console/completion/components/CompletionTitle.tsx
+++ b/src/console/completion/components/CompletionTitle.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import styled from "../../colorscheme/styled";
+import styled from "../../styles/styled";
 
 const Li = styled.li<{ shown: boolean }>`
   display: ${({ shown }) => (shown ? "display" : "none")};
-  background-color: ${({ theme }) => theme.completionTitleBackground};
-  color: ${({ theme }) => theme.completionTitleForeground};
+  background-color: ${({ theme }) => theme.title?.background};
+  color: ${({ theme }) => theme.title?.foreground};
   list-style: none;
   font-weight: bold;
   margin: 0;
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
deleted file mode 100644
index ad024cfd..00000000
--- a/src/console/components/Console.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-import Prompt from "./Prompt";
-import InfoMessage from "./InfoMessage";
-import ErrorMessage from "./ErrorMessage";
-import { useConsoleMode } from "../app/hooks";
-import {
-  useExecCommand,
-  useGetCommandCompletion,
-  useExecFind,
-  useGetFindCompletion,
-  useVisibility,
-} from "../app/hooks";
-
-// (10item + 1title) * sbc
-const COMMAND_COMPLETION_MAX_ITEMS = 33;
-const FIND_COMPLETION_MAX_ITEMS = 11;
-
-const Console: React.FC = () => {
-  const { hide } = useVisibility();
-  const { state } = useConsoleMode();
-  const execCommand = useExecCommand();
-  const execFind = useExecFind();
-  const getCommandCompletions = useGetCommandCompletion();
-  const getFindCompletions = useGetFindCompletion();
-
-  const onExec = React.useCallback(
-    (cmd: string) => {
-      if (state.mode !== "prompt") {
-        return;
-      }
-      if (state.promptMode === "command") {
-        execCommand(cmd);
-      } else if (state.promptMode === "find") {
-        execFind(cmd);
-      }
-      hide();
-    },
-    [execCommand, execFind, state]
-  );
-
-  if (state.mode === "prompt") {
-    if (state.promptMode === "command") {
-      return (
-        <Prompt
-          prefix={":"}
-          maxLineHeight={COMMAND_COMPLETION_MAX_ITEMS}
-          onExec={onExec}
-          queryCompletions={getCommandCompletions}
-          initValue={state.initValue}
-          onBlur={hide}
-        />
-      );
-    } else if (state.promptMode === "find") {
-      return (
-        <Prompt
-          prefix={"/"}
-          maxLineHeight={FIND_COMPLETION_MAX_ITEMS}
-          onExec={onExec}
-          queryCompletions={getFindCompletions}
-          initValue={state.initValue}
-          onBlur={hide}
-        />
-      );
-    }
-  } else if (state.mode === "info_message") {
-    return <InfoMessage>{state.message}</InfoMessage>;
-  } else if (state.mode === "error_message") {
-    return <ErrorMessage>{state.message}</ErrorMessage>;
-  }
-  return null;
-};
-
-export default Console;
diff --git a/src/console/components/ErrorMessage.tsx b/src/console/components/ErrorMessage.tsx
index 4830a555..3b8435ac 100644
--- a/src/console/components/ErrorMessage.tsx
+++ b/src/console/components/ErrorMessage.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import styled from "../colorscheme/styled";
+import styled from "../styles/styled";
 import useAutoResize from "../hooks/useAutoResize";
 
 const Wrapper = styled.p`
   border-top: 1px solid gray;
-  background-color: ${({ theme }) => theme.consoleErrorBackground};
-  color: ${({ theme }) => theme.consoleErrorForeground};
+  background-color: ${({ theme }) => theme.error?.background};
+  color: ${({ theme }) => theme.error?.foreground};
   font-weight: bold;
 `;
 
diff --git a/src/console/components/InfoMessage.tsx b/src/console/components/InfoMessage.tsx
index 80fa8755..e72b99a3 100644
--- a/src/console/components/InfoMessage.tsx
+++ b/src/console/components/InfoMessage.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import styled from "../colorscheme/styled";
+import styled from "../styles/styled";
 import useAutoResize from "../hooks/useAutoResize";
 
 const Wrapper = styled.p`
   border-top: 1px solid gray;
-  background-color: ${({ theme }) => theme.consoleInfoBackground};
-  color: ${({ theme }) => theme.consoleInfoForeground};
+  background-color: ${({ theme }) => theme.info?.background};
+  color: ${({ theme }) => theme.info?.foreground};
   font-weight: normal;
 `;
 
diff --git a/src/console/components/PromptInput.tsx b/src/console/components/PromptInput.tsx
index 161b052c..dd4d2444 100644
--- a/src/console/components/PromptInput.tsx
+++ b/src/console/components/PromptInput.tsx
@@ -1,9 +1,9 @@
 import React, { InputHTMLAttributes } from "react";
-import styled from "../colorscheme/styled";
+import styled from "../styles/styled";
 
 const Container = styled.div`
-  background-color: ${({ theme }) => theme.commandBackground};
-  color: ${({ theme }) => theme.commandForeground};
+  background-color: ${({ theme }) => theme.command.background};
+  color: ${({ theme }) => theme.command.foreground};
   display: flex;
 `;
 
@@ -14,8 +14,8 @@ const Prompt = styled.i`
 const InputInner = styled.input`
   border: none;
   flex-grow: 1;
-  background-color: ${({ theme }) => theme.commandBackground};
-  color: ${({ theme }) => theme.commandForeground};
+  background-color: ${({ theme }) => theme.command.background};
+  color: ${({ theme }) => theme.command.foreground};
 `;
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/console/index.css b/src/console/index.css
deleted file mode 100644
index 95b180e3..00000000
--- a/src/console/index.css
+++ /dev/null
@@ -1,30 +0,0 @@
-html, body, * {
-  margin: 0;
-  padding: 0;
-
-  font-style: normal;
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-input {
-  font-style: normal;
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-body {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.vimmatic-console {
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-}
diff --git a/src/console/index.html b/src/console/index.html
index 47de482b..70503997 100644
--- a/src/console/index.html
+++ b/src/console/index.html
@@ -4,9 +4,8 @@
     <meta charset=utf-8 />
     <title>Vimmatic console</title>
     <script src='console.js'></script>
-    <link href='console.css' rel='stylesheet'></link>
   </head>
   <body>
-    <div id='vimmatic-console' class='vimmatic-console'></div>
+    <div id='vimmatic-console'></div>
   </body>
 </html>
diff --git a/src/console/index.tsx b/src/console/index.tsx
index 5464037b..45eb7f2a 100644
--- a/src/console/index.tsx
+++ b/src/console/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ColorSchemeProvider from "./colorscheme/providers";
+import ColorSchemeProvider from "./styles/providers";
 import { AppProvider } from "./app/provider";
 import App from "./App";
 
diff --git a/src/console/styles/contexts.tsx b/src/console/styles/contexts.tsx
new file mode 100644
index 00000000..4d6c2c0c
--- /dev/null
+++ b/src/console/styles/contexts.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export type Style = {
+  colorscheme: string;
+  css: Record<string, string>;
+};
+
+export const UpdateStyleContext = React.createContext<(style: Style) => void>(
+  () => {}
+);
diff --git a/src/console/styles/global.ts b/src/console/styles/global.ts
new file mode 100644
index 00000000..b01ea66c
--- /dev/null
+++ b/src/console/styles/global.ts
@@ -0,0 +1,23 @@
+import { createGlobalStyle, css } from "styled-components";
+import type { CSSObject } from "styled-components";
+
+const GlobalStyle = createGlobalStyle<CSSObject>`
+  html, body, * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+
+  * {
+    ${(obj) => css(obj)}
+  }
+`;
+
+export default GlobalStyle;
diff --git a/src/console/styles/hooks.ts b/src/console/styles/hooks.ts
new file mode 100644
index 00000000..fe688965
--- /dev/null
+++ b/src/console/styles/hooks.ts
@@ -0,0 +1,17 @@
+import React from "react";
+import { UpdateStyleContext } from "./contexts";
+import SettingClient from "../clients/SettingClient";
+import { newSender } from "../clients/BackgroundMessageSender";
+
+const settingClient = new SettingClient(newSender());
+
+export const useInvalidateStyle = () => {
+  const update = React.useContext(UpdateStyleContext);
+  const refresh = React.useCallback(async () => {
+    const colorscheme = await settingClient.getColorScheme();
+    const css = await settingClient.getConsoleStyle();
+    update({ colorscheme, css });
+  }, []);
+
+  return refresh;
+};
diff --git a/src/console/styles/providers.tsx b/src/console/styles/providers.tsx
new file mode 100644
index 00000000..9dbe8764
--- /dev/null
+++ b/src/console/styles/providers.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { DarkTheme, LightTheme } from "./theme";
+import { Style, UpdateStyleContext } from "./contexts";
+import GlobalStyle from "./global";
+import { ThemeProvider } from "styled-components";
+
+export const StyleProvider: React.FC = ({ children }) => {
+  const [style, setStyle] = React.useState<Style>({
+    colorscheme: "system",
+    css: {},
+  });
+  const theme = React.useMemo(() => {
+    if (style.colorscheme === "system") {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return DarkTheme;
+      }
+    } else if (style.colorscheme === "dark") {
+      return DarkTheme;
+    }
+    return LightTheme;
+  }, [style.colorscheme]);
+
+  return (
+    <UpdateStyleContext.Provider value={setStyle}>
+      <GlobalStyle {...style.css} />
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </UpdateStyleContext.Provider>
+  );
+};
+export default StyleProvider;
diff --git a/src/console/colorscheme/styled.tsx b/src/console/styles/styled.tsx
similarity index 100%
rename from src/console/colorscheme/styled.tsx
rename to src/console/styles/styled.tsx
diff --git a/src/console/styles/theme.ts b/src/console/styles/theme.ts
new file mode 100644
index 00000000..fe5f7259
--- /dev/null
+++ b/src/console/styles/theme.ts
@@ -0,0 +1,77 @@
+export type ThemeProperties = {
+  background: string;
+  foreground: string;
+  secondaryForeground: string;
+  command: {
+    background: string;
+    foreground: string;
+  };
+  title: {
+    background: string;
+    foreground: string;
+  };
+  select: {
+    background: string;
+    foreground: string;
+  };
+  info: {
+    background: string;
+    foreground: string;
+  };
+  error: {
+    background: string;
+    foreground: string;
+  };
+};
+
+export const LightTheme: ThemeProperties = {
+  background: "#ffffff",
+  foreground: "#000000",
+  secondaryForeground: "#008000",
+  command: {
+    background: "#ffffff",
+    foreground: "#000000",
+  },
+  title: {
+    background: "lightgray",
+    foreground: "#000000",
+  },
+  select: {
+    background: "#ffff00",
+    foreground: "#000000",
+  },
+  info: {
+    background: "#ffffff",
+    foreground: "#018786",
+  },
+  error: {
+    background: "#ff0000",
+    foreground: "#ffffff",
+  },
+};
+
+export const DarkTheme: ThemeProperties = {
+  background: "#2f474f",
+  foreground: "white",
+  secondaryForeground: "#86fab0",
+  command: {
+    background: "#052027",
+    foreground: "white",
+  },
+  title: {
+    background: "#052027",
+    foreground: "white",
+  },
+  select: {
+    background: "#eeff41",
+    foreground: "#000000",
+  },
+  info: {
+    background: "#052027",
+    foreground: "#ffffff",
+  },
+  error: {
+    background: "red",
+    foreground: "white",
+  },
+};
diff --git a/src/content/index.ts b/src/content/index.ts
index 07424087..9d0362ae 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -1,7 +1,6 @@
 import "@abraham/reflection";
 import Application from "./Application";
 import Bootstrap from "./Bootstrap";
-import consoleFrameStyle from "./site-style";
 import { container } from "./di";
 
 const initDom = () => {
@@ -13,10 +12,6 @@ const initDom = () => {
       console.error(e);
     }
   })();
-
-  const style = window.document.createElement("style");
-  style.textContent = consoleFrameStyle;
-  window.document.head.appendChild(style);
 };
 
 const bootstrap = new Bootstrap();
diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts
index 4e32c6fa..017af13b 100644
--- a/src/content/presenters/ConsoleFramePresenter.ts
+++ b/src/content/presenters/ConsoleFramePresenter.ts
@@ -12,6 +12,20 @@ export default interface ConsoleFramePresenter {
   isTopWindow(): boolean;
 }
 
+const FRAME_STYLES = {
+  margin: "0",
+  padding: "0",
+  bottom: "0",
+  left: "0",
+  height: "0",
+  width: "100%",
+  position: "fixed",
+  "z-index": "2147483647",
+  border: "none",
+  "background-color": "unset",
+  "pointer-events": "none",
+} as const;
+
 @injectable()
 export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
   private static readonly IframeId = "vimmatic-console-frame" as const;
@@ -25,8 +39,10 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
     const iframe = document.createElement("iframe");
     iframe.src = chrome.runtime.getURL("lib/console.html");
     iframe.id = ConsoleFramePresenterImpl.IframeId;
-    iframe.className = "vimmatic-console-frame";
     iframe.name = "vimmatic-console-frame";
+    for (const [name, value] of Object.entries(FRAME_STYLES)) {
+      iframe.style.setProperty(name, value, "important");
+    }
     document.body.append(iframe);
   }
 
diff --git a/src/content/presenters/FollowPresenter.ts b/src/content/presenters/FollowPresenter.ts
index 65a00dd3..53392f5a 100644
--- a/src/content/presenters/FollowPresenter.ts
+++ b/src/content/presenters/FollowPresenter.ts
@@ -1,4 +1,5 @@
-import { injectable } from "inversify";
+import { inject, injectable } from "inversify";
+import SettingRepository from "../repositories/SettingRepository";
 import Hint, { InputHint, LinkHint } from "./Hint";
 import * as doms from "../../shared/utils/dom";
 
@@ -83,6 +84,11 @@ export default interface FollowPresenter {
 
 @injectable()
 export class FollowPresenterImpl implements FollowPresenter {
+  constructor(
+    @inject("SettingRepository")
+    private readonly settingRepository: SettingRepository
+  ) {}
+
   private hints: Hint[] = [];
 
   getTargetCount(viewSize: Size, framePosition: Point): number {
@@ -91,17 +97,19 @@ export class FollowPresenterImpl implements FollowPresenter {
   }
 
   createHints(viewSize: Size, framePosition: Point, tags: string[]): void {
+    const style = this.settingRepository.getStyle("hint");
     const targets = this.getTargets(viewSize, framePosition);
     const min = Math.min(targets.length, tags.length);
+
     for (let i = 0; i < min; ++i) {
       const target = targets[i];
       if (
         target instanceof HTMLAnchorElement ||
         target instanceof HTMLAreaElement
       ) {
-        this.hints.push(new LinkHint(target, tags[i]));
+        this.hints.push(new LinkHint(target, tags[i], style));
       } else {
-        this.hints.push(new InputHint(target, tags[i]));
+        this.hints.push(new InputHint(target, tags[i], style));
       }
     }
   }
diff --git a/src/content/presenters/Hint.ts b/src/content/presenters/Hint.ts
index 12da4add..dc119228 100644
--- a/src/content/presenters/Hint.ts
+++ b/src/content/presenters/Hint.ts
@@ -5,6 +5,8 @@ interface Point {
   y: number;
 }
 
+type Style = Record<string, string>;
+
 const hintPosition = (element: Element): Point => {
   const { left, top, right, bottom } = doms.viewportRect(element);
 
@@ -23,7 +25,7 @@ export default abstract class Hint {
 
   private tag: string;
 
-  constructor(target: HTMLElement, tag: string) {
+  constructor(target: HTMLElement, tag: string, style: Style) {
     this.tag = tag;
 
     const doc = target.ownerDocument;
@@ -35,8 +37,13 @@ export default abstract class Hint {
     const { scrollX, scrollY } = window;
 
     const hint = doc.createElement("span");
-    hint.className = "vimmatic-hint";
     hint.textContent = tag;
+    for (const [key, value] of Object.entries(style)) {
+      hint.style.setProperty(key, value);
+    }
+    hint.style.position = "absolute";
+    hint.style.textTransform = "uppercase";
+    hint.style.zIndex = "2147483647";
     hint.style.left = x + scrollX + "px";
     hint.style.top = y + scrollY + "px";
 
@@ -66,8 +73,12 @@ export default abstract class Hint {
 export class LinkHint extends Hint {
   private target: HTMLAnchorElement | HTMLAreaElement;
 
-  constructor(target: HTMLAnchorElement | HTMLAreaElement, tag: string) {
-    super(target, tag);
+  constructor(
+    target: HTMLAnchorElement | HTMLAreaElement,
+    tag: string,
+    style: Style
+  ) {
+    super(target, tag, style);
 
     this.target = target;
   }
@@ -88,8 +99,8 @@ export class LinkHint extends Hint {
 export class InputHint extends Hint {
   private target: HTMLElement;
 
-  constructor(target: HTMLElement, tag: string) {
-    super(target, tag);
+  constructor(target: HTMLElement, tag: string, style: Style) {
+    super(target, tag, style);
 
     this.target = target;
   }
diff --git a/src/content/repositories/SettingRepository.ts b/src/content/repositories/SettingRepository.ts
index 3ffdc7bc..8f60d534 100644
--- a/src/content/repositories/SettingRepository.ts
+++ b/src/content/repositories/SettingRepository.ts
@@ -3,6 +3,7 @@ import Blacklist from "../../shared/Blacklist";
 import Keymaps from "../../shared/Keymaps";
 import Properties from "../../shared/Properties";
 import Search from "../../shared/Search";
+import { ComponentName, CSS } from "../../shared/Styles";
 import SettingClient from "../client/SettingClient";
 import { defaultSettings } from "../../settings";
 import Settings from "../../shared/Settings";
@@ -19,6 +20,8 @@ export default interface SettingRepository {
   getSearch(): Search;
 
   getProperties(): Properties;
+
+  getStyle(component: ComponentName): CSS;
 }
 
 @injectable()
@@ -50,4 +53,11 @@ export class SettingRepositoryImpl implements SettingRepository {
       ...current.properties,
     };
   }
+
+  getStyle(component: ComponentName): CSS {
+    return (
+      (current.styles && current.styles[component]) ||
+      defaultSettings.styles![component]!
+    );
+  }
 }
diff --git a/src/content/site-style.ts b/src/content/site-style.ts
deleted file mode 100644
index 659dc4d1..00000000
--- a/src/content/site-style.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default `
-.vimmatic-console-frame {
-  margin: 0;
-  padding: 0;
-  bottom: 0;
-  left: 0;
-  height: 0;
-  width: 100%;
-  position: fixed;
-  z-index: 2147483647;
-  border: none !important;
-  background-color: unset !important;
-  pointer-events:none;
-}
-
-.vimmatic-hint {
-  background-color: yellow;
-  border: 1px solid gold;
-  font-weight: bold;
-  position: absolute;
-  text-transform: uppercase;
-  z-index: 2147483647;
-  font-size: 12px;
-  color: black;
-}
-`;
diff --git a/src/messaging/schema/background.ts b/src/messaging/schema/background.ts
index 080fc7db..7de87fee 100644
--- a/src/messaging/schema/background.ts
+++ b/src/messaging/schema/background.ts
@@ -18,6 +18,7 @@ export type Schema = {
   "console.find.completions": Duplex<{ query: string }, Completions>;
   "console.resize": Duplex<{ width: number; height: number }>;
   "settings.get.property": Duplex<{ name: string }, string | number | boolean>;
+  "settings.get.style": Duplex<{ name: string }, Record<string, string>>;
   "settings.validate": Duplex<{ settings: unknown }, { error?: string }>;
   "press.key": Duplex<{ key: string }>;
 };
diff --git a/src/settings/default.ts b/src/settings/default.ts
index 1a88d523..5c0fe662 100644
--- a/src/settings/default.ts
+++ b/src/settings/default.ts
@@ -82,5 +82,18 @@ export const defaultJSONSettings = `{
     "colorscheme": "system"
   },
   "blacklist": [
-  ]
+  ],
+  "styles": {
+    "hint": {
+      "background-color": "yellow",
+      "border": "1px solid gold",
+      "font-weight": "bold",
+      "font-size": "12px",
+      "color": "black"
+    },
+    "console": {
+      "font-family": "monospace",
+      "font-size": "12px"
+    }
+  }
 }`;
diff --git a/src/settings/schema.ts b/src/settings/schema.ts
index 8dff7b03..90f4f504 100644
--- a/src/settings/schema.ts
+++ b/src/settings/schema.ts
@@ -15,11 +15,16 @@ export const SerializedPropertiesSchema = z.record(
 export const SerializedBlacklistSchema = z
   .union([z.string(), z.object({ url: z.string(), keys: z.string().array() })])
   .array();
+export const SerializedStyles = z.object({
+  hint: z.record(z.string()).optional(),
+  console: z.record(z.string()).optional(),
+});
 export const SerializedSettingsSchema = z.object({
   keymaps: z.optional(SerializedKeymapsSchema),
   search: z.optional(SerializedSearchEngineSchema),
   properties: z.optional(SerializedPropertiesSchema),
   blacklist: z.optional(SerializedBlacklistSchema),
+  styles: z.optional(SerializedStyles),
 });
 
 export type SerializedKeymaps = z.infer<typeof SerializedKeymapsSchema>;
@@ -28,6 +33,7 @@ export type SerializedSearchEngine = z.infer<
 >;
 export type SerializedProperties = z.infer<typeof SerializedPropertiesSchema>;
 export type SerializedBlacklist = z.infer<typeof SerializedBlacklistSchema>;
+export type SerializedStyles = z.infer<typeof SerializedStyles>;
 export type SerializedSettings = z.infer<typeof SerializedSettingsSchema>;
 
 export const validateSerializedSettings = (json: unknown): void => {
diff --git a/src/settings/serdes.ts b/src/settings/serdes.ts
index 7e729f0f..5367854f 100644
--- a/src/settings/serdes.ts
+++ b/src/settings/serdes.ts
@@ -4,6 +4,7 @@ import type {
   SerializedBlacklist,
   SerializedProperties,
   SerializedSearchEngine,
+  SerializedStyles,
 } from "./schema";
 import { validateSerializedSettings } from "./schema";
 import { Operation } from "../shared/operations2";
@@ -12,6 +13,7 @@ import Keymaps from "../shared/Keymaps";
 import Search from "../shared/Search";
 import Properties from "../shared/Properties";
 import Blacklist from "../shared/Blacklist";
+import Styles from "../shared/Styles";
 import { BlacklistItem } from "../shared/Blacklist";
 
 const serializeKeymaps = (keymaps: Keymaps): SerializedKeymaps => {
@@ -72,12 +74,22 @@ const deserializeBlacklist = (json: SerializedBlacklist): Blacklist => {
   return new Blacklist(items);
 };
 
+const serializeStyles = (styles: Styles): SerializedStyles => {
+  const obj: SerializedStyles = styles;
+  return obj;
+};
+
+const deserializeStyles = (json: SerializedStyles): Styles => {
+  return json;
+};
+
 export const serializeSettings = (settings: Settings): SerializedSettings => {
   return {
     keymaps: settings.keymaps && serializeKeymaps(settings.keymaps),
     search: settings.search && serializeSearch(settings.search),
     properties: settings.properties && serializeProperties(settings.properties),
     blacklist: settings.blacklist && serializeBlacklist(settings.blacklist),
+    styles: settings.styles && serializeStyles(settings.styles),
   };
 };
 
@@ -91,5 +103,6 @@ export const deserializeSettings = (json: unknown): Settings => {
       serialized.properties && deserializeProperties(serialized.properties),
     blacklist:
       serialized.blacklist && deserializeBlacklist(serialized.blacklist),
+    styles: serialized.styles && deserializeStyles(serialized.styles),
   };
 };
diff --git a/src/shared/Settings.ts b/src/shared/Settings.ts
index ae991ac3..f220cf74 100644
--- a/src/shared/Settings.ts
+++ b/src/shared/Settings.ts
@@ -2,12 +2,14 @@ import type Keymaps from "./Keymaps";
 import type Search from "./Search";
 import type Properties from "./Properties";
 import type Blacklist from "./Blacklist";
+import type Styles from "./Styles";
 
 type Settings = {
   keymaps?: Keymaps;
   search?: Search;
   properties?: Properties;
   blacklist?: Blacklist;
+  styles?: Styles;
 };
 
 export default Settings;
diff --git a/src/shared/Styles.ts b/src/shared/Styles.ts
new file mode 100644
index 00000000..25a4bac1
--- /dev/null
+++ b/src/shared/Styles.ts
@@ -0,0 +1,6 @@
+export type ComponentName = "hint" | "console";
+export type CSS = Record<string, string>;
+
+type Styles = Partial<Record<ComponentName, CSS>>;
+
+export default Styles;
diff --git a/test/background/mock/MockPropertyRegistry.ts b/test/background/mock/MockPropertyRegistry.ts
new file mode 100644
index 00000000..b3b632dd
--- /dev/null
+++ b/test/background/mock/MockPropertyRegistry.ts
@@ -0,0 +1,18 @@
+import PropertyRegistry from "../../../src/background/property/PropertyRegistry";
+import Property from "../../../src/background/property/Property";
+
+class MockPropertyRegistry implements PropertyRegistry {
+  register(_prop: Property): void {
+    throw new Error("not implemented");
+  }
+
+  getProperty(_name: string): Property | undefined {
+    throw new Error("not implemented");
+  }
+
+  getProperties(): Property[] {
+    throw new Error("not implemented");
+  }
+}
+
+export default MockPropertyRegistry;
diff --git a/test/background/mock/MockSettingsRepository.ts b/test/background/mock/MockSettingsRepository.ts
new file mode 100644
index 00000000..fc97fb9f
--- /dev/null
+++ b/test/background/mock/MockSettingsRepository.ts
@@ -0,0 +1,18 @@
+import SettingsRepository from "../../../src/background/settings/SettingsRepository";
+import Settings from "../../../src/shared/Settings";
+
+class MockSettingsRepository implements SettingsRepository {
+  load(): Promise<Settings> {
+    throw new Error("not implemented");
+  }
+
+  save(): Promise<void> {
+    throw new Error("not implemented");
+  }
+
+  onChanged(): void {
+    throw new Error("not implemented");
+  }
+}
+
+export default MockSettingsRepository;
diff --git a/test/background/settings/PropertySettings.test.ts b/test/background/settings/PropertySettings.test.ts
new file mode 100644
index 00000000..8f635201
--- /dev/null
+++ b/test/background/settings/PropertySettings.test.ts
@@ -0,0 +1,152 @@
+import { PropertySettingsImpl } from "../../../src/background/settings/PropertySettings";
+import Property, {
+  PropertyType,
+  PropertyTypeName,
+} from "../../../src/background/property/Property";
+import MockSettingsRepository from "../mock/MockSettingsRepository";
+import MockPropertyRegistry from "../mock/MockPropertyRegistry";
+
+class MyProp implements Property {
+  name(): string {
+    return "myprop";
+  }
+
+  description(): string {
+    return "this is myprop";
+  }
+
+  type(): PropertyTypeName {
+    return "string";
+  }
+
+  defaultValue(): PropertyType {
+    return "foo";
+  }
+
+  validate(value: PropertyType): void {
+    if (value !== "foo" && value !== "bar") {
+      throw new Error(`invalid property: ${value}`);
+    }
+  }
+}
+
+describe("PropertySettingsImpl", () => {
+  const settingsRepository = new MockSettingsRepository();
+  const propertyRegistry = new MockPropertyRegistry();
+  const propertySettings = new PropertySettingsImpl(
+    settingsRepository,
+    propertyRegistry
+  );
+  const mockGetProperty = jest.spyOn(propertyRegistry, "getProperty");
+  const mockLoad = jest.spyOn(settingsRepository, "load");
+  const mockSave = jest.spyOn(settingsRepository, "save");
+
+  beforeEach(() => {
+    mockGetProperty.mockClear();
+    mockLoad.mockClear();
+    mockSave.mockClear();
+  });
+
+  describe("getProperty", () => {
+    it("returns saved property", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({
+        properties: {
+          myprop: "bar",
+        },
+      });
+
+      const v = await propertySettings.getProperty("myprop");
+      expect(v).toBe("bar");
+    });
+
+    it("returns default value when property not set", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({ properties: {} });
+
+      const v = await propertySettings.getProperty("myprop");
+      expect(v).toBe("foo");
+    });
+
+    it("returns default value when empty settings", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({});
+
+      const v = await propertySettings.getProperty("myprop");
+      expect(v).toBe("foo");
+    });
+
+    it("returns default value when saved property is invalid", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({
+        properties: {
+          myprop: "incorrect",
+        },
+      });
+
+      const v = await propertySettings.getProperty("myprop");
+      expect(v).toBe("foo");
+    });
+
+    it("throws an error when unknown property", async () => {
+      mockGetProperty.mockReturnValue(undefined);
+      mockLoad.mockResolvedValue({});
+
+      await expect(propertySettings.getProperty("xxxxx")).rejects.toThrowError(
+        "Unknown property: xxxxx"
+      );
+    });
+  });
+
+  describe("setProperty", () => {
+    it("saves new property value", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({
+        properties: {
+          myprop: "foo",
+        },
+      });
+      mockSave.mockResolvedValue();
+
+      await propertySettings.setProperty("myprop", "bar");
+
+      expect(mockSave).toBeCalledWith({
+        properties: {
+          myprop: "bar",
+        },
+      });
+    });
+
+    it("saves new property value when empty settings", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({});
+      mockSave.mockResolvedValue();
+
+      await propertySettings.setProperty("myprop", "bar");
+
+      expect(mockSave).toBeCalledWith({
+        properties: {
+          myprop: "bar",
+        },
+      });
+    });
+
+    it("throws an error when unknown property", async () => {
+      mockGetProperty.mockReturnValue(undefined);
+      mockLoad.mockResolvedValue({});
+
+      await expect(
+        propertySettings.setProperty("xxxxx", "")
+      ).rejects.toThrowError("Unknown property: xxxxx");
+    });
+
+    it("throws an error when invalid value", async () => {
+      mockGetProperty.mockReturnValue(new MyProp());
+      mockLoad.mockResolvedValue({});
+
+      await expect(
+        propertySettings.setProperty("myprop", "fizz")
+      ).rejects.toThrowError("invalid property: fizz");
+    });
+  });
+});
diff --git a/test/background/settings/StyleSettings.test.ts b/test/background/settings/StyleSettings.test.ts
new file mode 100644
index 00000000..42eee737
--- /dev/null
+++ b/test/background/settings/StyleSettings.test.ts
@@ -0,0 +1,37 @@
+import { StyleSettingsImpl } from "../../../src/background/settings/StyleSettings";
+import MockSettingsRepository from "../mock/MockSettingsRepository";
+
+describe("StyleSettingsImpl", () => {
+  const settingsRepository = new MockSettingsRepository();
+  const styleSettings = new StyleSettingsImpl(settingsRepository);
+  const mockLoad = jest.spyOn(settingsRepository, "load");
+
+  beforeEach(() => {
+    mockLoad.mockClear();
+  });
+
+  describe("getStyle", () => {
+    it("returns default styles on empty settings", async () => {
+      mockLoad.mockResolvedValue({});
+
+      const css = await styleSettings.getStyle("hint");
+      expect(css).toHaveProperty("background-color", "yellow");
+    });
+
+    it("returns default styles on empty styles property", async () => {
+      mockLoad.mockResolvedValue({ styles: {} });
+
+      const css = await styleSettings.getStyle("hint");
+      expect(css).toHaveProperty("background-color", "yellow");
+    });
+
+    it("returns saved styles", async () => {
+      mockLoad.mockResolvedValue({
+        styles: { hint: { "background-color": "green" } },
+      });
+
+      const css = await styleSettings.getStyle("hint");
+      expect(css).toHaveProperty("background-color", "green");
+    });
+  });
+});
diff --git a/test/content/presenters/Hint.test.ts b/test/content/presenters/Hint.test.ts
index 122945b2..794884a0 100644
--- a/test/content/presenters/Hint.test.ts
+++ b/test/content/presenters/Hint.test.ts
@@ -9,6 +9,8 @@ import AbstractHint, {
 
 class Hint extends AbstractHint {}
 
+const css = {};
+
 describe("Hint", () => {
   beforeEach(() => {
     document.body.innerHTML = `<a id='test-link' href='#'>link</a>`;
@@ -17,21 +19,29 @@ describe("Hint", () => {
   describe("#constructor", () => {
     it("creates a hint element with tag name", () => {
       const link = document.getElementById("test-link")!;
-      new Hint(link, "abc");
+      new Hint(link, "abc", css);
 
-      const elem = document.querySelector(".vimmatic-hint");
+      const elem = document.querySelector("span");
       expect(elem!.textContent!.trim()).toEqual("abc");
     });
+
+    it("sets reserved styles", () => {
+      const link = document.getElementById("test-link")!;
+      new Hint(link, "abc", { position: "relative" });
+
+      const elem = document.querySelector("span") as HTMLElement;
+      expect(elem.style.position).toEqual("absolute");
+    });
   });
 
   describe("#show", () => {
     it("shows an element", () => {
       const link = document.getElementById("test-link")!;
-      const hint = new Hint(link, "abc");
+      const hint = new Hint(link, "abc", css);
       hint.hide();
       hint.show();
 
-      const elem = document.querySelector(".vimmatic-hint") as HTMLElement;
+      const elem = document.querySelector("span") as HTMLElement;
       expect(elem.style.display).not.toEqual("none");
     });
   });
@@ -39,10 +49,10 @@ describe("Hint", () => {
   describe("#hide", () => {
     it("hides an element", () => {
       const link = document.getElementById("test-link") as HTMLElement;
-      const hint = new Hint(link, "abc");
+      const hint = new Hint(link, "abc", css);
       hint.hide();
 
-      const elem = document.querySelector(".vimmatic-hint") as HTMLElement;
+      const elem = document.querySelector("span") as HTMLElement;
       expect(elem.style.display).toEqual("none");
     });
   });
@@ -50,9 +60,9 @@ describe("Hint", () => {
   describe("#remove", () => {
     it("removes an element", () => {
       const link = document.getElementById("test-link")!;
-      const hint = new Hint(link, "abc");
+      const hint = new Hint(link, "abc", css);
 
-      const elem = document.querySelector(".vimmatic-hint")!;
+      const elem = document.querySelector("span")!;
       expect(elem.parentElement).not.toBeNull;
       hint.remove();
       expect(elem.parentElement).toBeNull;
@@ -72,7 +82,7 @@ describe("LinkHint", () => {
   describe("#getLink()", () => {
     it('returns value of "href" attribute', () => {
       const link = document.getElementById("test-link1") as HTMLAnchorElement;
-      const hint = new LinkHint(link, "abc");
+      const hint = new LinkHint(link, "abc", css);
 
       expect(hint.getLink()).toEqual("https://google.com/");
     });
@@ -81,12 +91,12 @@ describe("LinkHint", () => {
   describe("#getLinkTarget()", () => {
     it('returns value of "target" attribute', () => {
       let link = document.getElementById("test-link1") as HTMLAnchorElement;
-      let hint = new LinkHint(link, "abc");
+      let hint = new LinkHint(link, "abc", css);
 
       expect(hint.getLinkTarget()).toBeNull;
 
       link = document.getElementById("test-link2") as HTMLAnchorElement;
-      hint = new LinkHint(link, "abc");
+      hint = new LinkHint(link, "abc", css);
 
       expect(hint.getLinkTarget()).toEqual("_blank");
     });
@@ -95,7 +105,7 @@ describe("LinkHint", () => {
   describe("#click()", () => {
     it("clicks a element", (done) => {
       const link = document.getElementById("test-link3") as HTMLAnchorElement;
-      const hint = new LinkHint(link, "abc");
+      const hint = new LinkHint(link, "abc", css);
       link.onclick = () => {
         done();
       };
@@ -114,7 +124,7 @@ describe("InputHint", () => {
 
       it("focuses to the input", () => {
         const input = document.getElementById("test-input") as HTMLInputElement;
-        const hint = new InputHint(input, "abc");
+        const hint = new InputHint(input, "abc", css);
         hint.activate();
 
         expect(document.activeElement).toEqual(input);
@@ -128,7 +138,7 @@ describe("InputHint", () => {
 
       it("checks and focuses to the input", () => {
         const input = document.getElementById("test-input") as HTMLInputElement;
-        const hint = new InputHint(input, "abc");
+        const hint = new InputHint(input, "abc", css);
         hint.activate();
 
         expect(input.checked).toBeTruthy;
@@ -143,7 +153,7 @@ describe("InputHint", () => {
         const textarea = document.getElementById(
           "test-textarea"
         ) as HTMLTextAreaElement;
-        const hint = new InputHint(textarea, "abc");
+        const hint = new InputHint(textarea, "abc", css);
         hint.activate();
 
         expect(document.activeElement).toEqual(textarea);
@@ -163,7 +173,7 @@ describe("InputHint", () => {
           done();
         };
 
-        const hint = new InputHint(button, "abc");
+        const hint = new InputHint(button, "abc", css);
         hint.activate();
       });
     });
diff --git a/test/content/repositories/SettingRepository.test.ts b/test/content/repositories/SettingRepository.test.ts
index f3aedef0..4d4e5d43 100644
--- a/test/content/repositories/SettingRepository.test.ts
+++ b/test/content/repositories/SettingRepository.test.ts
@@ -44,4 +44,25 @@ describe("SettingRepositoryImpl", () => {
       complete: "sbh",
     });
   });
+
+  it("returns default values", async () => {
+    const settings = deserialize({});
+
+    mockLoad.mockResolvedValue(settings);
+    const sut = new SettingRepositoryImpl(settingClient);
+
+    await sut.reload();
+
+    expect(sut.getKeymaps().entries().length).not.toBe(0);
+    expect(sut.getBlacklist().items.length).toBe(0);
+    expect(sut.getSearch().defaultEngine).toBe("google");
+    expect(sut.getProperties()).toMatchObject({
+      hintchars: "abcdefghijklmnopqrstuvwxyz",
+      smoothscroll: false,
+      complete: "sbh",
+    });
+    expect(sut.getStyle("hint")).toMatchObject({
+      "background-color": "yellow",
+    });
+  });
 });
diff --git a/test/messaging/handler/Sender.test.ts b/test/messaging/handler/Sender.test.ts
index 73f7bdf7..11334ba6 100644
--- a/test/messaging/handler/Sender.test.ts
+++ b/test/messaging/handler/Sender.test.ts
@@ -26,7 +26,7 @@ describe("Sender", () => {
 
   const sut = new Sender<Schema>(handler);
 
-  test.only("it receives and route a message", async () => {
+  test("it receives and route a message", async () => {
     await expect(sut.send("greeting", { lang: "en" })).resolves.toBe("hello");
     await expect(sut.send("greeting", { lang: "du" })).resolves.toBe("hallo");
     await expect(sut.send("greeting", { lang: "it" })).rejects.toThrowError(
diff --git a/test/settings/serdes.test.ts b/test/settings/serdes.test.ts
index 3ae50347..95026b30 100644
--- a/test/settings/serdes.test.ts
+++ b/test/settings/serdes.test.ts
@@ -100,6 +100,32 @@ describe("serializeSettings", () => {
       expect(ser).toMatchObject({ properties: {} });
     });
   });
+
+  describe("styles", () => {
+    it("serializes property settings", () => {
+      const styles = {
+        hint: {
+          "background-color": "yellow",
+        },
+      };
+      const ser = serializeSettings({ styles });
+
+      expect(ser).toMatchObject({
+        styles: {
+          hint: {
+            "background-color": "yellow",
+          },
+        },
+      });
+    });
+
+    it("serializes empty property settings", () => {
+      const styles = {};
+      const ser = serializeSettings({ styles });
+
+      expect(ser).toMatchObject({ styles: {} });
+    });
+  });
 });
 
 describe("deserializeSettings", () => {
@@ -237,4 +263,26 @@ describe("deserializeSettings", () => {
       expect(settings.properties).toEqual({});
     });
   });
+
+  describe("styles", () => {
+    test("it deserialize styles settings", () => {
+      const styles = {
+        hint: {
+          "background-color": "yellow",
+        },
+      };
+      const settings = deserializeSettings({ styles });
+
+      expect(settings.styles.hint).toMatchObject({
+        "background-color": "yellow",
+      });
+    });
+
+    test("it deserialize empty styles settings", () => {
+      const styles = {};
+      const settings = deserializeSettings({ styles });
+
+      expect(settings.styles).toEqual({});
+    });
+  });
 });