mirror of
https://github.com/pacnpal/Roo-Code.git
synced 2025-12-20 04:11:10 -05:00
Add theme based syntax highlighting for code blocks
This commit is contained in:
Saoud Rizwan
@@ -21,6 +21,7 @@ const App: React.FC = () => {
|
||||
const [showWelcome, setShowWelcome] = useState<boolean>(false)
|
||||
const [apiKey, setApiKey] = useState<string>("")
|
||||
const [maxRequestsPerTask, setMaxRequestsPerTask] = useState<string>("")
|
||||
const [vscodeThemeName, setVscodeThemeName] = useState<string | undefined>(undefined)
|
||||
const [claudeMessages, setClaudeMessages] = useState<ClaudeMessage[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -39,6 +40,7 @@ const App: React.FC = () => {
|
||||
? message.state!.maxRequestsPerTask.toString()
|
||||
: ""
|
||||
)
|
||||
setVscodeThemeName(message.state!.themeName)
|
||||
setClaudeMessages(message.state!.claudeMessages)
|
||||
break
|
||||
case "action":
|
||||
@@ -77,7 +79,7 @@ const App: React.FC = () => {
|
||||
/>
|
||||
)}
|
||||
{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
|
||||
<ChatView messages={claudeMessages} isHidden={showSettings} />
|
||||
<ChatView messages={claudeMessages} isHidden={showSettings} vscodeThemeName={vscodeThemeName} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage"
|
||||
import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
|
||||
import React, { useState } from "react"
|
||||
import { ClaudeMessage, ClaudeAsk, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage"
|
||||
import { VSCodeButton, VSCodeProgressRing, VSCodeBadge } from "@vscode/webview-ui-toolkit/react"
|
||||
import { COMMAND_OUTPUT_STRING } from "../utilities/combineCommandSequences"
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"
|
||||
import CodeBlock from "./CodeBlock"
|
||||
import { SyntaxHighlighterStyle } from "../utilities/getSyntaxHighlighterStyleFromTheme"
|
||||
import CodeBlock from "./CodeBlock/CodeBlock"
|
||||
|
||||
interface ChatRowProps {
|
||||
message: ClaudeMessage
|
||||
syntaxHighlighterStyle: SyntaxHighlighterStyle
|
||||
}
|
||||
|
||||
const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
const ChatRow: React.FC<ChatRowProps> = ({ message, syntaxHighlighterStyle }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const cost = message.text != null && message.say === "api_req_started" ? JSON.parse(message.text).cost : undefined
|
||||
|
||||
@@ -126,7 +126,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
borderRadius: "3px",
|
||||
padding: "8px",
|
||||
whiteSpace: "pre-line",
|
||||
wordWrap: "break-word"
|
||||
wordWrap: "break-word",
|
||||
}}>
|
||||
<span>{message.text}</span>
|
||||
</div>
|
||||
@@ -188,7 +188,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
{toolIcon("edit")}
|
||||
<span style={{ fontWeight: "bold" }}>Claude wants to edit this file:</span>
|
||||
</div>
|
||||
<CodeBlock diff={tool.diff!} path={tool.path!} />
|
||||
<CodeBlock
|
||||
diff={tool.diff!}
|
||||
path={tool.path!}
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case "newFileCreated":
|
||||
@@ -200,7 +204,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
Claude wants to create a new file:
|
||||
</span>
|
||||
</div>
|
||||
<CodeBlock code={tool.content!} path={tool.path!} />
|
||||
<CodeBlock
|
||||
code={tool.content!}
|
||||
path={tool.path!}
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case "readFile":
|
||||
@@ -210,7 +218,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
{toolIcon("file-code")}
|
||||
<span style={{ fontWeight: "bold" }}>Claude wants to read this file:</span>
|
||||
</div>
|
||||
<CodeBlock code={tool.content!} path={tool.path!} />
|
||||
<CodeBlock
|
||||
code={tool.content!}
|
||||
path={tool.path!}
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case "listFiles":
|
||||
@@ -222,7 +234,12 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
Claude wants to view this directory:
|
||||
</span>
|
||||
</div>
|
||||
<CodeBlock code={tool.content!} path={tool.path!} language="shell-session" />
|
||||
<CodeBlock
|
||||
code={tool.content!}
|
||||
path={tool.path!}
|
||||
language="shell-session"
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -260,7 +277,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
</div>
|
||||
<div style={contentStyle}>
|
||||
<div>
|
||||
<CodeBlock code={command} language="shell-session" />
|
||||
<CodeBlock
|
||||
code={command}
|
||||
language="shell-session"
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{output && (
|
||||
@@ -268,7 +289,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
<p style={{ ...contentStyle, margin: "10px 0 10px 0" }}>
|
||||
{COMMAND_OUTPUT_STRING}
|
||||
</p>
|
||||
<CodeBlock code={output} language="shell-session" />
|
||||
<CodeBlock
|
||||
code={output}
|
||||
language="shell-session"
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -318,7 +343,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 20px 10px 20px",
|
||||
padding: "10px 15px 10px 15px",
|
||||
}}>
|
||||
{renderContent()}
|
||||
{isExpanded && message.say === "api_req_started" && (
|
||||
@@ -326,6 +351,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
|
||||
<CodeBlock
|
||||
code={JSON.stringify(JSON.parse(message.text || "{}").request, null, 2)}
|
||||
language="json"
|
||||
syntaxHighlighterStyle={syntaxHighlighterStyle}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -9,13 +9,16 @@ import { getApiMetrics } from "../utilities/getApiMetrics"
|
||||
import { vscode } from "../utilities/vscode"
|
||||
import ChatRow from "./ChatRow"
|
||||
import TaskHeader from "./TaskHeader"
|
||||
import { getSyntaxHighlighterStyleFromTheme } from "../utilities/getSyntaxHighlighterStyleFromTheme"
|
||||
import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"
|
||||
|
||||
interface ChatViewProps {
|
||||
messages: ClaudeMessage[]
|
||||
isHidden: boolean
|
||||
vscodeThemeName?: string
|
||||
}
|
||||
// maybe instead of storing state in App, just make chatview always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs)
|
||||
const ChatView = ({ messages, isHidden }: ChatViewProps) => {
|
||||
const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
|
||||
//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined
|
||||
const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort)
|
||||
const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])
|
||||
@@ -34,6 +37,16 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
|
||||
const [primaryButtonText, setPrimaryButtonText] = useState<string | undefined>(undefined)
|
||||
const [secondaryButtonText, setSecondaryButtonText] = useState<string | undefined>(undefined)
|
||||
|
||||
const [syntaxHighlighterStyle, setSyntaxHighlighterStyle] = useState(vsDarkPlus)
|
||||
|
||||
useEffect(() => {
|
||||
if (!vscodeThemeName) return
|
||||
const theme = getSyntaxHighlighterStyleFromTheme(vscodeThemeName)
|
||||
if (theme) {
|
||||
setSyntaxHighlighterStyle(theme)
|
||||
}
|
||||
}, [vscodeThemeName])
|
||||
|
||||
const scrollToBottom = (instant: boolean = false) => {
|
||||
const options = {
|
||||
containerId: "chat-view-container",
|
||||
@@ -320,7 +333,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
|
||||
overflowY: "auto",
|
||||
}}>
|
||||
{modifiedMessages.map((message, index) => (
|
||||
<ChatRow key={index} message={message} />
|
||||
<ChatRow key={index} message={message} syntaxHighlighterStyle={syntaxHighlighterStyle} />
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useMemo, useState } from "react"
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"
|
||||
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
|
||||
import { getLanguageFromPath } from "../utilities/getLanguageFromPath"
|
||||
import { useMemo, useState } from "react"
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import { getLanguageFromPath } from "../../utilities/getLanguageFromPath"
|
||||
import { SyntaxHighlighterStyle } from "../../utilities/getSyntaxHighlighterStyleFromTheme"
|
||||
|
||||
/*
|
||||
const vscodeSyntaxStyle: React.CSSProperties = {
|
||||
backgroundColor: "var(--vscode-editor-background)",
|
||||
@@ -62,13 +63,12 @@ interface CodeBlockProps {
|
||||
diff?: string
|
||||
language?: string | undefined
|
||||
path?: string
|
||||
syntaxHighlighterStyle: SyntaxHighlighterStyle
|
||||
}
|
||||
|
||||
const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
|
||||
const CodeBlock = ({ code, diff, language, path, syntaxHighlighterStyle }: CodeBlockProps) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
|
||||
const backgroundColor = oneDark['pre[class*="language-"]'].background as string
|
||||
|
||||
/*
|
||||
We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.
|
||||
|
||||
@@ -83,13 +83,11 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
|
||||
[path, language, code]
|
||||
)
|
||||
|
||||
console.log(inferredLanguage)
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "3px",
|
||||
backgroundColor: backgroundColor,
|
||||
backgroundColor: "var(--vscode-editor-background)",
|
||||
overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
|
||||
}}>
|
||||
{path && (
|
||||
@@ -132,7 +130,16 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
|
||||
<SyntaxHighlighter
|
||||
wrapLines={false}
|
||||
language={diff ? "diff" : inferredLanguage} // "diff" automatically colors changed lines in green/red
|
||||
style={oneDark}
|
||||
style={{
|
||||
...syntaxHighlighterStyle,
|
||||
// Our syntax highlighter style doesn't always match the vscode theme 1:1, so we'll apply sensible styles here that vscode exposes to us
|
||||
'code[class*="language-"]': {
|
||||
background: "var(--vscode-editor-background)",
|
||||
},
|
||||
'pre[class*="language-"]': {
|
||||
background: "var(--vscode-editor-background)",
|
||||
},
|
||||
}}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: "6px 10px",
|
||||
@@ -0,0 +1,89 @@
|
||||
import * as defaultThemes from "react-syntax-highlighter/dist/esm/styles/prism"
|
||||
import * as generatedThemes from "./vscode-themes"
|
||||
|
||||
/*
|
||||
VSCode extension webviews have a notoriously difficult time syntax highlighting with styles from the user's theme. We don’t have access to css variables like --vscode-function-color that map to all the token styles react-syntax-highlighter expects. Fortunately, react-syntax-highlighter comes with many built-in themes that we can map to popular VSCode themes. We can also use the few editor css variables exposed to use like --vscode-editor-background (see CodeBlock.tsx), which 99% of the time results in syntax highlighting identical to how the user's editor looks. This approach avoids the overhead of using VSCode's Monaco editor and the monaco-vscode-textmate-theme-converter as some other extensions do, and allows us to take advantage of all the benefits of react-syntax-highlighter.
|
||||
For themes that don't have a 1:1 match with react-syntax-highlighter built-in themes, we can use Claude to generate style objects based on the results from the "Developer: Generate Color Theme From Current Settings" command.
|
||||
|
||||
https://github.com/microsoft/vscode/issues/56356
|
||||
*/
|
||||
|
||||
// See https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD for available styles react-syntax-highlighter provides
|
||||
const defaultSyntaxHighlighterThemes: { [key: string]: string } = {
|
||||
// Vscode built-in
|
||||
"Default Dark Modern": "vscDarkPlus",
|
||||
"Dark+": "vscDarkPlus",
|
||||
"Default Dark+": "vscDarkPlus",
|
||||
"Dark (Visual Studio)": "vscDarkPlus",
|
||||
"Visual Studio Dark": "vscDarkPlus",
|
||||
"Dark High Contrast": "vscDarkPlus",
|
||||
"Default High Contrast": "vscDarkPlus",
|
||||
"Light High Contrast": "vs",
|
||||
"Default High Contrast Light": "vs", // FIXME: some text renders white
|
||||
"Default Light Modern": "vs",
|
||||
"Light+": "vs",
|
||||
"Default Light+": "vs",
|
||||
"Light (Visual Studio)": "vs",
|
||||
"Visual Studio Light": "vs",
|
||||
|
||||
// Third party
|
||||
Anysphere: "nightOwl",
|
||||
Abyss: "materialOceanic",
|
||||
"Kimbie Dark": "cb",
|
||||
Monokai: "darcula",
|
||||
"Monokai Dimmed": "darcula",
|
||||
"Solarized Dark": "solarizedDarkAtom",
|
||||
"Solarized Light": "solarizedlight",
|
||||
"Quiet Light": "solarizedlight",
|
||||
"Tomorrow Night Blue": "lucario",
|
||||
Dracula: "dracula",
|
||||
"Dracula Theme": "dracula",
|
||||
"Dracula Theme Soft": "dracula",
|
||||
"Night Owl": "nightOwl",
|
||||
"Material Theme": "materialDark",
|
||||
"Material Theme Lighter": "materialLight",
|
||||
"Material Theme Lighter High Contrast": "materialLight",
|
||||
"One Dark Pro": "oneDark",
|
||||
"One Dark Pro Darker": "oneDark",
|
||||
"One Dark Pro Flat": "oneDark",
|
||||
"One Dark Pro Mix": "oneDark",
|
||||
"One Light": "oneLight",
|
||||
"Winter is Coming": "nord",
|
||||
"Atom One Dark": "oneDark",
|
||||
"SynthWave '84": "synthwave84",
|
||||
}
|
||||
|
||||
// Themes that don't have an already provided 1:1 syntax highlighter style
|
||||
// These style objects are built with Claude using the results from "Developer: Generate Color Theme From Current Settings" command
|
||||
const generatedSyntaxHighlighterThemes: { [key: string]: string } = {
|
||||
"Github Dark": "githubDark",
|
||||
"GitHub Dark Colorblind (Beta)": "githubDark",
|
||||
"GitHub Dark Colorblind": "githubDark",
|
||||
"GitHub Dark Default": "githubDark",
|
||||
"GitHub Dark Dimmed": "githubDark",
|
||||
"GitHub Dark High Contrast": "githubDark",
|
||||
|
||||
"Github Light": "githubLight",
|
||||
"GitHub Light Colorblind (Beta)": "githubLight",
|
||||
"GitHub Light Colorblind": "githubLight",
|
||||
"GitHub Light Default": "githubLight",
|
||||
"GitHub Light High Contrast": "githubLight",
|
||||
}
|
||||
|
||||
export type SyntaxHighlighterStyle = { [key: string]: React.CSSProperties }
|
||||
|
||||
export function getSyntaxHighlighterStyleFromTheme(themeName: string): SyntaxHighlighterStyle | undefined {
|
||||
const defaultSyntaxHighlighterTheme = Object.entries(defaultSyntaxHighlighterThemes).find(([key]) =>
|
||||
key.toLowerCase().startsWith(themeName.toLowerCase())
|
||||
)?.[1]
|
||||
if (defaultSyntaxHighlighterTheme && defaultSyntaxHighlighterTheme in defaultThemes) {
|
||||
return defaultThemes[defaultSyntaxHighlighterTheme as keyof typeof defaultThemes]
|
||||
} else {
|
||||
const generatedSyntaxHighlighterTheme = Object.entries(generatedSyntaxHighlighterThemes).find(([key]) =>
|
||||
key.toLowerCase().startsWith(themeName.toLowerCase())
|
||||
)?.[1]
|
||||
if (generatedSyntaxHighlighterTheme && generatedSyntaxHighlighterTheme in generatedThemes) {
|
||||
return generatedThemes[generatedSyntaxHighlighterTheme as keyof typeof generatedThemes]
|
||||
}
|
||||
}
|
||||
}
|
||||
503
webview-ui/src/utilities/vscode-themes/github-dark.ts
Normal file
503
webview-ui/src/utilities/vscode-themes/github-dark.ts
Normal file
@@ -0,0 +1,503 @@
|
||||
const theme: { [key: string]: React.CSSProperties } = {
|
||||
'code[class*="language-"]': {
|
||||
color: "#e1e4e8",
|
||||
background: "#24292e",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
},
|
||||
'pre[class*="language-"]': {
|
||||
color: "#e1e4e8",
|
||||
background: "#24292e",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
padding: "1em",
|
||||
margin: "0.5em 0",
|
||||
overflow: "auto",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
'code[class*="language-"]::-moz-selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::-moz-selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::-moz-selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"]::selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::selection': {
|
||||
background: "#3392ff44",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
':not(pre) > code[class*="language-"]': {
|
||||
background: "#24292e",
|
||||
padding: "0.1em",
|
||||
borderRadius: "0.3em",
|
||||
whiteSpace: "normal",
|
||||
},
|
||||
comment: {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
prolog: {
|
||||
color: "#6A737D",
|
||||
},
|
||||
cdata: {
|
||||
color: "#6A737D",
|
||||
},
|
||||
doctype: {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
punctuation: {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
entity: {
|
||||
color: "#e1e4e8",
|
||||
cursor: "help",
|
||||
},
|
||||
"attr-name": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
"class-name": {
|
||||
color: "#B392F0",
|
||||
},
|
||||
boolean: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
constant: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
number: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
atrule: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
keyword: {
|
||||
color: "#F97583",
|
||||
},
|
||||
property: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
tag: {
|
||||
color: "#85E89D",
|
||||
},
|
||||
symbol: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
deleted: {
|
||||
color: "#FDAEB7",
|
||||
background: "#86181D",
|
||||
},
|
||||
important: {
|
||||
color: "#F97583",
|
||||
},
|
||||
selector: {
|
||||
color: "#85E89D",
|
||||
},
|
||||
string: {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
char: {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
builtin: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
inserted: {
|
||||
color: "#85E89D",
|
||||
background: "#144620",
|
||||
},
|
||||
regex: {
|
||||
color: "#DBEDFF",
|
||||
},
|
||||
"attr-value": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
"attr-value > .token.punctuation": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
variable: {
|
||||
color: "#FFAB70",
|
||||
},
|
||||
operator: {
|
||||
color: "#F97583",
|
||||
},
|
||||
function: {
|
||||
color: "#B392F0",
|
||||
},
|
||||
url: {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
"attr-value > .token.punctuation.attr-equals": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"special-attr > .token.attr-value > .token.value.css": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".language-css .token.selector": {
|
||||
color: "#85E89D",
|
||||
},
|
||||
".language-css .token.property": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-css .token.function": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-css .token.url > .token.function": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-css .token.url > .token.string.url": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
".language-css .token.important": {
|
||||
color: "#F97583",
|
||||
},
|
||||
".language-css .token.atrule .token.rule": {
|
||||
color: "#F97583",
|
||||
},
|
||||
".language-javascript .token.operator": {
|
||||
color: "#F97583",
|
||||
},
|
||||
".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
|
||||
{
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".language-json .token.operator": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".language-json .token.null.keyword": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-markdown .token.url": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".language-markdown .token.url > .token.operator": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".language-markdown .token.url-reference.url > .token.string": {
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".language-markdown .token.url > .token.content": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-markdown .token.url > .token.url": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-markdown .token.url-reference.url": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-markdown .token.blockquote.punctuation": {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.hr.punctuation": {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.code-snippet": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
".language-markdown .token.bold .token.content": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".language-markdown .token.italic .token.content": {
|
||||
color: "#B392F0",
|
||||
},
|
||||
".language-markdown .token.strike .token.content": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".language-markdown .token.strike .token.punctuation": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".language-markdown .token.list.punctuation": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".language-markdown .token.title.important > .token.punctuation": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
bold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
italic: {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
namespace: {
|
||||
opacity: "0.8",
|
||||
},
|
||||
"token.tab:not(:empty):before": {
|
||||
color: "#6A737D",
|
||||
},
|
||||
"token.cr:before": {
|
||||
color: "#6A737D",
|
||||
},
|
||||
"token.lf:before": {
|
||||
color: "#6A737D",
|
||||
},
|
||||
"token.space:before": {
|
||||
color: "#6A737D",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
|
||||
marginRight: "0.4em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
|
||||
background: "#2f363d",
|
||||
color: "#959da5",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
|
||||
background: "#2f363d",
|
||||
color: "#959da5",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
|
||||
background: "#2f363d",
|
||||
color: "#959da5",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
|
||||
background: "#444d56",
|
||||
color: "#e1e4e8",
|
||||
},
|
||||
".line-highlight.line-highlight": {
|
||||
background: "#2b3036",
|
||||
},
|
||||
".line-highlight.line-highlight:before": {
|
||||
background: "#2f363d",
|
||||
color: "#e1e4e8",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
".line-highlight.line-highlight[data-end]:after": {
|
||||
background: "#2f363d",
|
||||
color: "#e1e4e8",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
|
||||
backgroundColor: "#2b3036",
|
||||
},
|
||||
".line-numbers.line-numbers .line-numbers-rows": {
|
||||
borderRightColor: "#444d56",
|
||||
},
|
||||
".command-line .command-line-prompt": {
|
||||
borderRightColor: "#444d56",
|
||||
},
|
||||
".line-numbers .line-numbers-rows > span:before": {
|
||||
color: "#444d56",
|
||||
},
|
||||
".command-line .command-line-prompt > span:before": {
|
||||
color: "#444d56",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-1": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-5": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-9": {
|
||||
color: "#FDAEB7",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-2": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-6": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-10": {
|
||||
color: "#9ECBFF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-3": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-7": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-11": {
|
||||
color: "#79B8FF",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-4": {
|
||||
color: "#B392F0",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-8": {
|
||||
color: "#B392F0",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-12": {
|
||||
color: "#B392F0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#86181D",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#144620",
|
||||
},
|
||||
".prism-previewer.prism-previewer:before": {
|
||||
borderColor: "#1b1f23",
|
||||
},
|
||||
".prism-previewer-gradient.prism-previewer-gradient div": {
|
||||
borderColor: "#1b1f23",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-color.prism-previewer-color:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer.prism-previewer:after": {
|
||||
borderTopColor: "#1b1f23",
|
||||
},
|
||||
".prism-previewer-flipped.prism-previewer-flipped.after": {
|
||||
borderBottomColor: "#1b1f23",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle:before": {
|
||||
background: "#1f2428",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time:before": {
|
||||
background: "#1f2428",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing": {
|
||||
background: "#1f2428",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle circle": {
|
||||
stroke: "#e1e4e8",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time circle": {
|
||||
stroke: "#e1e4e8",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing circle": {
|
||||
stroke: "#e1e4e8",
|
||||
fill: "transparent",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing path": {
|
||||
stroke: "#e1e4e8",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing line": {
|
||||
stroke: "#e1e4e8",
|
||||
},
|
||||
}
|
||||
|
||||
export default theme
|
||||
506
webview-ui/src/utilities/vscode-themes/github-light.ts
Normal file
506
webview-ui/src/utilities/vscode-themes/github-light.ts
Normal file
@@ -0,0 +1,506 @@
|
||||
const theme: { [key: string]: React.CSSProperties } = {
|
||||
'code[class*="language-"]': {
|
||||
background: "#ffffff",
|
||||
color: "#24292e",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
},
|
||||
'pre[class*="language-"]': {
|
||||
background: "#ffffff",
|
||||
color: "#24292e",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
padding: "1em",
|
||||
margin: "0.5em 0",
|
||||
overflow: "auto",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
'code[class*="language-"]::-moz-selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::-moz-selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::-moz-selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"]::selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::selection': {
|
||||
background: "#0366d625",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
':not(pre) > code[class*="language-"]': {
|
||||
padding: "0.2em 0.3em",
|
||||
borderRadius: "0.3em",
|
||||
whiteSpace: "normal",
|
||||
},
|
||||
comment: {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
prolog: {
|
||||
color: "#6A737D",
|
||||
},
|
||||
cdata: {
|
||||
color: "#6A737D",
|
||||
},
|
||||
doctype: {
|
||||
color: "#24292e",
|
||||
},
|
||||
punctuation: {
|
||||
color: "#24292e",
|
||||
},
|
||||
entity: {
|
||||
color: "#24292e",
|
||||
cursor: "help",
|
||||
},
|
||||
"attr-name": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
"class-name": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
boolean: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
constant: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
number: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
atrule: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
keyword: {
|
||||
color: "#D73A49",
|
||||
},
|
||||
property: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
tag: {
|
||||
color: "#22863A",
|
||||
},
|
||||
symbol: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
deleted: {
|
||||
color: "#B31D28",
|
||||
background: "#FFEEF0",
|
||||
},
|
||||
important: {
|
||||
color: "#D73A49",
|
||||
},
|
||||
selector: {
|
||||
color: "#22863A",
|
||||
},
|
||||
string: {
|
||||
color: "#032F62",
|
||||
},
|
||||
char: {
|
||||
color: "#032F62",
|
||||
},
|
||||
builtin: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
inserted: {
|
||||
color: "#22863A",
|
||||
background: "#F0FFF4",
|
||||
},
|
||||
regex: {
|
||||
color: "#032F62",
|
||||
},
|
||||
"attr-value": {
|
||||
color: "#032F62",
|
||||
},
|
||||
"attr-value > .token.punctuation": {
|
||||
color: "#032F62",
|
||||
},
|
||||
variable: {
|
||||
color: "#E36209",
|
||||
},
|
||||
operator: {
|
||||
color: "#D73A49",
|
||||
},
|
||||
function: {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
url: {
|
||||
color: "#005CC5",
|
||||
},
|
||||
"attr-value > .token.punctuation.attr-equals": {
|
||||
color: "#24292e",
|
||||
},
|
||||
"special-attr > .token.attr-value > .token.value.css": {
|
||||
color: "#24292e",
|
||||
},
|
||||
".language-css .token.selector": {
|
||||
color: "#22863A",
|
||||
},
|
||||
".language-css .token.property": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-css .token.function": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-css .token.url > .token.function": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-css .token.url > .token.string.url": {
|
||||
color: "#032F62",
|
||||
},
|
||||
".language-css .token.important": {
|
||||
color: "#D73A49",
|
||||
},
|
||||
".language-css .token.atrule .token.rule": {
|
||||
color: "#D73A49",
|
||||
},
|
||||
".language-javascript .token.operator": {
|
||||
color: "#D73A49",
|
||||
},
|
||||
".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
|
||||
{
|
||||
color: "#B31D28",
|
||||
},
|
||||
".language-json .token.operator": {
|
||||
color: "#24292e",
|
||||
},
|
||||
".language-json .token.null.keyword": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-markdown .token.url": {
|
||||
color: "#24292e",
|
||||
},
|
||||
".language-markdown .token.url > .token.operator": {
|
||||
color: "#24292e",
|
||||
},
|
||||
".language-markdown .token.url-reference.url > .token.string": {
|
||||
color: "#24292e",
|
||||
},
|
||||
".language-markdown .token.url > .token.content": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-markdown .token.url > .token.url": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-markdown .token.url-reference.url": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-markdown .token.blockquote.punctuation": {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.hr.punctuation": {
|
||||
color: "#6A737D",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.code-snippet": {
|
||||
color: "#032F62",
|
||||
},
|
||||
".language-markdown .token.bold .token.content": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".language-markdown .token.italic .token.content": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
".language-markdown .token.strike .token.content": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".language-markdown .token.strike .token.punctuation": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".language-markdown .token.list.punctuation": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".language-markdown .token.title.important > .token.punctuation": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
bold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
italic: {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
namespace: {
|
||||
opacity: "0.8",
|
||||
},
|
||||
"token.tab:not(:empty):before": {
|
||||
color: "#24292e33",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.cr:before": {
|
||||
color: "#24292e33",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.lf:before": {
|
||||
color: "#24292e33",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.space:before": {
|
||||
color: "#24292e33",
|
||||
textShadow: "none",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
|
||||
marginRight: "0.4em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
|
||||
background: "#f6f8fa",
|
||||
color: "#24292e",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
|
||||
background: "#f6f8fa",
|
||||
color: "#24292e",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
|
||||
background: "#f6f8fa",
|
||||
color: "#24292e",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
|
||||
background: "#e1e4e8",
|
||||
color: "#2f363d",
|
||||
},
|
||||
".line-highlight.line-highlight": {
|
||||
background: "#f6f8fa",
|
||||
},
|
||||
".line-highlight.line-highlight:before": {
|
||||
background: "#f6f8fa",
|
||||
color: "#24292e",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
".line-highlight.line-highlight[data-end]:after": {
|
||||
background: "#f6f8fa",
|
||||
color: "#24292e",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
|
||||
backgroundColor: "#f6f8fa",
|
||||
},
|
||||
".line-numbers.line-numbers .line-numbers-rows": {
|
||||
borderRightColor: "#e1e4e8",
|
||||
},
|
||||
".command-line .command-line-prompt": {
|
||||
borderRightColor: "#e1e4e8",
|
||||
},
|
||||
".line-numbers .line-numbers-rows > span:before": {
|
||||
color: "#1b1f234d",
|
||||
},
|
||||
".command-line .command-line-prompt > span:before": {
|
||||
color: "#1b1f234d",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-1": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-5": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-9": {
|
||||
color: "#B31D28",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-2": {
|
||||
color: "#22863A",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-6": {
|
||||
color: "#22863A",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-10": {
|
||||
color: "#22863A",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-3": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-7": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-11": {
|
||||
color: "#005CC5",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-4": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-8": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-12": {
|
||||
color: "#6F42C1",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#FFEEF0",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "#F0FFF4",
|
||||
},
|
||||
".prism-previewer.prism-previewer:before": {
|
||||
borderColor: "#ffffff",
|
||||
},
|
||||
".prism-previewer-gradient.prism-previewer-gradient div": {
|
||||
borderColor: "#ffffff",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-color.prism-previewer-color:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer.prism-previewer:after": {
|
||||
borderTopColor: "#ffffff",
|
||||
},
|
||||
".prism-previewer-flipped.prism-previewer-flipped.after": {
|
||||
borderBottomColor: "#ffffff",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle:before": {
|
||||
background: "#f6f8fa",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time:before": {
|
||||
background: "#f6f8fa",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing": {
|
||||
background: "#f6f8fa",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle circle": {
|
||||
stroke: "#24292e",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time circle": {
|
||||
stroke: "#24292e",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing circle": {
|
||||
stroke: "#24292e",
|
||||
fill: "transparent",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing path": {
|
||||
stroke: "#24292e",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing line": {
|
||||
stroke: "#24292e",
|
||||
},
|
||||
}
|
||||
|
||||
export default theme
|
||||
2
webview-ui/src/utilities/vscode-themes/index.ts
Normal file
2
webview-ui/src/utilities/vscode-themes/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as githubLight } from "./github-light"
|
||||
export { default as githubDark } from "./github-dark"
|
||||
503
webview-ui/src/utilities/vscode-themes/one-dark-example.ts
Normal file
503
webview-ui/src/utilities/vscode-themes/one-dark-example.ts
Normal file
@@ -0,0 +1,503 @@
|
||||
const theme: { [key: string]: React.CSSProperties } = {
|
||||
'code[class*="language-"]': {
|
||||
background: "hsl(220, 13%, 18%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
},
|
||||
'pre[class*="language-"]': {
|
||||
background: "hsl(220, 13%, 18%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
|
||||
direction: "ltr",
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre",
|
||||
wordSpacing: "normal",
|
||||
wordBreak: "normal",
|
||||
lineHeight: "1.5",
|
||||
MozTabSize: "2",
|
||||
OTabSize: "2",
|
||||
tabSize: "2",
|
||||
WebkitHyphens: "none",
|
||||
MozHyphens: "none",
|
||||
msHyphens: "none",
|
||||
hyphens: "none",
|
||||
padding: "1em",
|
||||
margin: "0.5em 0",
|
||||
overflow: "auto",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
'code[class*="language-"]::-moz-selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::-moz-selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::-moz-selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"]::selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'code[class*="language-"] *::selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
'pre[class*="language-"] *::selection': {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "inherit",
|
||||
textShadow: "none",
|
||||
},
|
||||
':not(pre) > code[class*="language-"]': {
|
||||
padding: "0.2em 0.3em",
|
||||
borderRadius: "0.3em",
|
||||
whiteSpace: "normal",
|
||||
},
|
||||
comment: {
|
||||
color: "hsl(220, 10%, 40%)",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
prolog: {
|
||||
color: "hsl(220, 10%, 40%)",
|
||||
},
|
||||
cdata: {
|
||||
color: "hsl(220, 10%, 40%)",
|
||||
},
|
||||
doctype: {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
punctuation: {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
entity: {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
cursor: "help",
|
||||
},
|
||||
"attr-name": {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
"class-name": {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
boolean: {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
constant: {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
number: {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
atrule: {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
keyword: {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
property: {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
tag: {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
symbol: {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
deleted: {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
important: {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
selector: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
string: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
char: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
builtin: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
inserted: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
regex: {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
"attr-value": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
"attr-value > .token.punctuation": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
variable: {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
operator: {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
function: {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
url: {
|
||||
color: "hsl(187, 47%, 55%)",
|
||||
},
|
||||
"attr-value > .token.punctuation.attr-equals": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"special-attr > .token.attr-value > .token.value.css": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-css .token.selector": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".language-css .token.property": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-css .token.function": {
|
||||
color: "hsl(187, 47%, 55%)",
|
||||
},
|
||||
".language-css .token.url > .token.function": {
|
||||
color: "hsl(187, 47%, 55%)",
|
||||
},
|
||||
".language-css .token.url > .token.string.url": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
".language-css .token.important": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".language-css .token.atrule .token.rule": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".language-javascript .token.operator": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
|
||||
{
|
||||
color: "hsl(5, 48%, 51%)",
|
||||
},
|
||||
".language-json .token.operator": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-json .token.null.keyword": {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
".language-markdown .token.url": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-markdown .token.url > .token.operator": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-markdown .token.url-reference.url > .token.string": {
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".language-markdown .token.url > .token.content": {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
".language-markdown .token.url > .token.url": {
|
||||
color: "hsl(187, 47%, 55%)",
|
||||
},
|
||||
".language-markdown .token.url-reference.url": {
|
||||
color: "hsl(187, 47%, 55%)",
|
||||
},
|
||||
".language-markdown .token.blockquote.punctuation": {
|
||||
color: "hsl(220, 10%, 40%)",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.hr.punctuation": {
|
||||
color: "hsl(220, 10%, 40%)",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".language-markdown .token.code-snippet": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
".language-markdown .token.bold .token.content": {
|
||||
color: "hsl(29, 54%, 61%)",
|
||||
},
|
||||
".language-markdown .token.italic .token.content": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".language-markdown .token.strike .token.content": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".language-markdown .token.strike .token.punctuation": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".language-markdown .token.list.punctuation": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".language-markdown .token.title.important > .token.punctuation": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
bold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
italic: {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
namespace: {
|
||||
opacity: "0.8",
|
||||
},
|
||||
"token.tab:not(:empty):before": {
|
||||
color: "hsla(220, 14%, 71%, 0.15)",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.cr:before": {
|
||||
color: "hsla(220, 14%, 71%, 0.15)",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.lf:before": {
|
||||
color: "hsla(220, 14%, 71%, 0.15)",
|
||||
textShadow: "none",
|
||||
},
|
||||
"token.space:before": {
|
||||
color: "hsla(220, 14%, 71%, 0.15)",
|
||||
textShadow: "none",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
|
||||
marginRight: "0.4em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
|
||||
background: "hsl(220, 13%, 26%)",
|
||||
color: "hsl(220, 9%, 55%)",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
|
||||
background: "hsl(220, 13%, 26%)",
|
||||
color: "hsl(220, 9%, 55%)",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
|
||||
background: "hsl(220, 13%, 26%)",
|
||||
color: "hsl(220, 9%, 55%)",
|
||||
padding: "0.1em 0.4em",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
|
||||
background: "hsl(220, 13%, 28%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".line-highlight.line-highlight": {
|
||||
background: "hsla(220, 100%, 80%, 0.04)",
|
||||
},
|
||||
".line-highlight.line-highlight:before": {
|
||||
background: "hsl(220, 13%, 26%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
".line-highlight.line-highlight[data-end]:after": {
|
||||
background: "hsl(220, 13%, 26%)",
|
||||
color: "hsl(220, 14%, 71%)",
|
||||
padding: "0.1em 0.6em",
|
||||
borderRadius: "0.3em",
|
||||
boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
|
||||
backgroundColor: "hsla(220, 100%, 80%, 0.04)",
|
||||
},
|
||||
".line-numbers.line-numbers .line-numbers-rows": {
|
||||
borderRightColor: "hsla(220, 14%, 71%, 0.15)",
|
||||
},
|
||||
".command-line .command-line-prompt": {
|
||||
borderRightColor: "hsla(220, 14%, 71%, 0.15)",
|
||||
},
|
||||
".line-numbers .line-numbers-rows > span:before": {
|
||||
color: "hsl(220, 14%, 45%)",
|
||||
},
|
||||
".command-line .command-line-prompt > span:before": {
|
||||
color: "hsl(220, 14%, 45%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-1": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-5": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-9": {
|
||||
color: "hsl(355, 65%, 65%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-2": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-6": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-10": {
|
||||
color: "hsl(95, 38%, 62%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-3": {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-7": {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-11": {
|
||||
color: "hsl(207, 82%, 66%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-4": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-8": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
".rainbow-braces .token.token.punctuation.brace-level-12": {
|
||||
color: "hsl(286, 60%, 67%)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "hsla(353, 100%, 66%, 0.15)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
|
||||
backgroundColor: "hsla(353, 100%, 66%, 0.15)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
|
||||
backgroundColor: "hsla(353, 95%, 66%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "hsla(137, 100%, 55%, 0.15)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
|
||||
backgroundColor: "hsla(137, 100%, 55%, 0.15)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
|
||||
backgroundColor: "hsla(135, 73%, 55%, 0.25)",
|
||||
},
|
||||
".prism-previewer.prism-previewer:before": {
|
||||
borderColor: "hsl(224, 13%, 17%)",
|
||||
},
|
||||
".prism-previewer-gradient.prism-previewer-gradient div": {
|
||||
borderColor: "hsl(224, 13%, 17%)",
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-color.prism-previewer-color:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing:before": {
|
||||
borderRadius: "0.3em",
|
||||
},
|
||||
".prism-previewer.prism-previewer:after": {
|
||||
borderTopColor: "hsl(224, 13%, 17%)",
|
||||
},
|
||||
".prism-previewer-flipped.prism-previewer-flipped.after": {
|
||||
borderBottomColor: "hsl(224, 13%, 17%)",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle:before": {
|
||||
background: "hsl(219, 13%, 22%)",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time:before": {
|
||||
background: "hsl(219, 13%, 22%)",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing": {
|
||||
background: "hsl(219, 13%, 22%)",
|
||||
},
|
||||
".prism-previewer-angle.prism-previewer-angle circle": {
|
||||
stroke: "hsl(220, 14%, 71%)",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-time.prism-previewer-time circle": {
|
||||
stroke: "hsl(220, 14%, 71%)",
|
||||
strokeOpacity: "1",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing circle": {
|
||||
stroke: "hsl(220, 14%, 71%)",
|
||||
fill: "transparent",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing path": {
|
||||
stroke: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
".prism-previewer-easing.prism-previewer-easing line": {
|
||||
stroke: "hsl(220, 14%, 71%)",
|
||||
},
|
||||
}
|
||||
export default theme
|
||||
Reference in New Issue
Block a user