diff --git a/README.md b/README.md index 5040347ab6..9ed71f7955 100644 --- a/README.md +++ b/README.md @@ -314,6 +314,12 @@ You can use all of the following options with the standalone version of the ` position: absolute; width: 100%; z-index: 100; - background: #fafafa; - color: #263238; + background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor}; + color: ${props => props.theme.rightPanel.servers.overlay.textColor}; box-sizing: border-box; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33); overflow: hidden; @@ -78,7 +78,7 @@ export const ServerItem = styled.div` export const ServerUrl = styled.div` padding: 5px; border: 1px solid #ccc; - background: #fff; + background: ${props => props.theme.rightPanel.servers.url.backgroundColor}; word-break: break-all; color: ${props => props.theme.colors.primary.main}; > span { diff --git a/src/theme.ts b/src/theme.ts index 791ab4f427..25a9122441 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -164,6 +164,15 @@ const defaultTheme: ThemeInterface = { backgroundColor: '#263238', width: '40%', textColor: '#ffffff', + servers: { + overlay: { + backgroundColor: '#fafafa', + textColor: '#263238', + }, + url: { + backgroundColor: '#fff', + }, + }, }, codeBlock: { backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor), @@ -231,6 +240,16 @@ export interface FontSettings { color: string; } +export interface Servers { + overlay: { + backgroundColor: string; + textColor: string; + }; + url: { + backgroundColor: string; + }; +} + export interface ResolvedThemeInterface { spacing: { unit: number; @@ -350,6 +369,7 @@ export interface ResolvedThemeInterface { backgroundColor: string; textColor: string; width: string; + servers: Servers; }; codeBlock: { backgroundColor: string;