From 20faca581a3b832301c9dca3074b0f61ba163d62 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 4 Apr 2021 14:07:13 +0900 Subject: Extract ttheme as a ColorSchemeProvider --- src/console/components/ColorSchemeProvider.tsx | 76 ++++++++++++++++++++++ src/console/components/Console.tsx | 29 ++------- src/console/components/Theme.ts | 53 --------------- src/console/components/console/CompletionItem.tsx | 2 +- src/console/components/console/CompletionTitle.tsx | 2 +- src/console/components/console/Input.tsx | 2 +- src/console/components/console/Message.tsx | 2 +- 7 files changed, 85 insertions(+), 81 deletions(-) create mode 100644 src/console/components/ColorSchemeProvider.tsx delete mode 100644 src/console/components/Theme.ts diff --git a/src/console/components/ColorSchemeProvider.tsx b/src/console/components/ColorSchemeProvider.tsx new file mode 100644 index 0000000..bd63571 --- /dev/null +++ b/src/console/components/ColorSchemeProvider.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import ColorScheme from "../../shared/ColorScheme"; +import { ThemeProvider } from "styled-components"; +import baseStyled, { ThemedStyledInterface } from "styled-components"; + +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", +}; + +interface Props extends React.HTMLAttributes { + colorscheme: ColorScheme; +} + +const ColorSchemeProvider: React.FC = ({ colorscheme, children }) => { + let theme = LightTheme; + if (colorscheme === ColorScheme.System) { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + theme = DarkTheme; + } + } else if (colorscheme === ColorScheme.Dark) { + theme = DarkTheme; + } + + return {children}; +}; + +export const styled = baseStyled as ThemedStyledInterface; + +export default ColorSchemeProvider; diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index 3cccc43..fa91336 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -7,10 +7,7 @@ import CommandLineParser, { InputPhase, } from "../commandline/CommandLineParser"; import { Command } from "../../shared/Command"; -import ColorScheme from "../../shared/ColorScheme"; -import { LightTheme, DarkTheme } from "./Theme"; -import styled from "./Theme"; -import { ThemeProvider } from "styled-components"; +import ColorSchemeProvider, { styled } from "./ColorSchemeProvider"; import ConsoleFrameClient from "../clients/ConsoleFrameClient"; import AppContext from "./AppContext"; @@ -180,25 +177,11 @@ const Console: React.FC = () => { } }; - let theme = state.colorscheme; - if (state.colorscheme === ColorScheme.System) { - if ( - window.matchMedia && - window.matchMedia("(prefers-color-scheme: dark)").matches - ) { - theme = ColorScheme.Dark; - } else { - theme = ColorScheme.Light; - } - } - switch (state.mode) { case "command": case "find": return ( - + { value={state.consoleText} /> - + ); case "info": case "error": return ( - + {state.messageText} - + ); default: return null; diff --git a/src/console/components/Theme.ts b/src/console/components/Theme.ts deleted file mode 100644 index dd7baa5..0000000 --- a/src/console/components/Theme.ts +++ /dev/null @@ -1,53 +0,0 @@ -import baseStyled, { ThemedStyledInterface } from "styled-components"; - -type Theme = { - 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: Theme = { - 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: Theme = { - 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", -}; - -const styled = baseStyled as ThemedStyledInterface; - -export default styled; diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx index 2451d87..7313491 100644 --- a/src/console/components/console/CompletionItem.tsx +++ b/src/console/components/console/CompletionItem.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "../Theme"; +import { styled } from "../ColorSchemeProvider"; const Container = styled.li<{ shown: boolean; diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx index 5594eb3..a8e8a54 100644 --- a/src/console/components/console/CompletionTitle.tsx +++ b/src/console/components/console/CompletionTitle.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "../Theme"; +import { styled } from "../ColorSchemeProvider"; const Li = styled.li<{ shown: boolean }>` display: ${({ shown }) => (shown ? "display" : "none")}; diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx index bf48d75..1f56036 100644 --- a/src/console/components/console/Input.tsx +++ b/src/console/components/console/Input.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "../Theme"; +import { styled } from "../ColorSchemeProvider"; const Container = styled.div` background-color: ${({ theme }) => theme.commandBackground}; diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx index 73498fd..8dcdb5a 100644 --- a/src/console/components/console/Message.tsx +++ b/src/console/components/console/Message.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "../Theme"; +import { styled } from "../ColorSchemeProvider"; const Error = styled.p` border-top: 1px solid gray; -- cgit v1.2.3