Use functional variables
This commit is contained in:
simurai
parent
7be7c471b1
commit
85a86690a2
112
src/theme.js
112
src/theme.js
|
|
@ -16,121 +16,119 @@ function getTheme({ theme, name }) {
|
|||
// Usage: scale.blue[6]
|
||||
const scale = color.scale;
|
||||
|
||||
const workbenchForeground = themes({ light: scale.gray[8], dark: scale.gray[1], dimmed: scale.gray[1] });
|
||||
const editorForeground = themes({ light: scale.gray[9], dark: scale.gray[1], dimmed: scale.gray[0] });
|
||||
const borderPrimary = themes({ light: scale.gray[2], dark: scale.gray[6], dimmed: scale.gray[7] });
|
||||
|
||||
return {
|
||||
name: name,
|
||||
colors: {
|
||||
focusBorder : themes({ light: scale.blue[4], dark: scale.blue[6], dimmed: scale.blue[6] }),
|
||||
foreground : themes({ light: scale.gray[7], dark: scale.gray[1], dimmed: scale.gray[1] }),
|
||||
descriptionForeground: themes({ light: scale.gray[5], dark: scale.gray[3], dimmed: scale.gray[3] }),
|
||||
errorForeground : themes({ light: scale.red[6], dark: scale.red[3], dimmed: scale.red[3] }),
|
||||
focusBorder : color.state.focus.border,
|
||||
foreground : color.text.primary,
|
||||
descriptionForeground: color.text.tertiary,
|
||||
errorForeground : color.text.danger,
|
||||
|
||||
"textLink.foreground" : themes({ light: scale.blue[5], dark: scale.blue[3], dimmed: scale.blue[3] }),
|
||||
"textLink.foreground" : color.text.link,
|
||||
"textLink.activeForeground": themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
|
||||
"textBlockQuote.background": themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"textBlockQuote.border" : themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
"textCodeBlock.background" : themes({ light: scale.gray[1], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"textPreformat.foreground" : themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }),
|
||||
"textSeparator.foreground" : themes({ light: scale.gray[3], dark: scale.gray[6], dimmed: scale.gray[6] }),
|
||||
"textBlockQuote.background": color.bg.canvasInset,
|
||||
"textBlockQuote.border" : color.markdown.blockquoteBorder,
|
||||
"textCodeBlock.background" : color.markdown.codeBg,
|
||||
"textPreformat.foreground" : color.text.secondary,
|
||||
"textSeparator.foreground" : color.border.secondary,
|
||||
|
||||
"button.background" : themes({ light: "#159739", dark: scale.green[7], dimmed: scale.green[7] }),
|
||||
"button.foreground" : themes({ light: scale.white, dark: scale.green[1], dimmed: scale.green[1] }),
|
||||
"button.hoverBackground": themes({ light: "#138934", dark: scale.green[6], dimmed: scale.green[6] }),
|
||||
"button.background" : color.btn.primary.bg,
|
||||
"button.foreground" : color.btn.primary.text,
|
||||
"button.hoverBackground": color.btn.primary.hoverBg,
|
||||
|
||||
"checkbox.background": themes({ light: scale.gray[0], dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
"checkbox.border" : themes({ light: scale.gray[3], dark: scale.black, dimmed: scale.black }),
|
||||
"checkbox.background": color.bg.tertiary,
|
||||
"checkbox.border" : color.border.primary,
|
||||
|
||||
"dropdown.background" : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"dropdown.border" : borderPrimary,
|
||||
"dropdown.foreground" : workbenchForeground,
|
||||
"dropdown.listBackground": themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"dropdown.background" : color.bg.overlay,
|
||||
"dropdown.border" : color.border.overlay,
|
||||
"dropdown.foreground" : color.text.primary,
|
||||
"dropdown.listBackground": color.bg.overlay,
|
||||
|
||||
"input.background" : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"input.border" : borderPrimary,
|
||||
"input.foreground" : workbenchForeground,
|
||||
"input.placeholderForeground": themes({ light: scale.gray[4], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"input.background" : color.input.bg,
|
||||
"input.border" : color.input.border,
|
||||
"input.foreground" : color.text.primary,
|
||||
"input.placeholderForeground": color.text.placeholder,
|
||||
|
||||
"badge.foreground": themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
|
||||
"badge.background": themes({ light: scale.blue[1], dark: scale.blue[7], dimmed: scale.blue[7] }),
|
||||
|
||||
"progressBar.background": themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }),
|
||||
|
||||
"titleBar.activeForeground" : workbenchForeground,
|
||||
"titleBar.activeForeground" : color.text.secondary,
|
||||
"titleBar.activeBackground" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"titleBar.inactiveForeground": themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"titleBar.inactiveBackground": themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"titleBar.border" : borderPrimary,
|
||||
"titleBar.border" : color.border.primary,
|
||||
|
||||
"activityBar.foreground" : workbenchForeground,
|
||||
"activityBar.inactiveForeground": themes({ light: scale.gray[4], dark: scale.gray[5], dimmed: scale.gray[5] }),
|
||||
"activityBar.background" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"activityBar.foreground" : color.text.secondary,
|
||||
"activityBar.inactiveForeground": color.text.tertiary,
|
||||
"activityBar.background" : color.bg.canvas,
|
||||
"activityBarBadge.foreground" : themes({ light: scale.white, dark: scale.white, dimmed: scale.white }),
|
||||
"activityBarBadge.background" : themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }),
|
||||
"activityBar.activeBorder" : "#f9826c",
|
||||
"activityBar.border" : borderPrimary,
|
||||
"activityBar.border" : color.border.primary,
|
||||
|
||||
"sideBar.foreground" : themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }),
|
||||
"sideBar.background" : themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"sideBar.border" : borderPrimary,
|
||||
"sideBarTitle.foreground" : workbenchForeground,
|
||||
"sideBarSectionHeader.foreground": workbenchForeground,
|
||||
"sideBarSectionHeader.background": themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"sideBarSectionHeader.border" : borderPrimary,
|
||||
"sideBar.foreground" : color.text.secondary,
|
||||
"sideBar.background" : color.bg.canvasInset,
|
||||
"sideBar.border" : color.border.primary,
|
||||
"sideBarTitle.foreground" : color.text.primary,
|
||||
"sideBarSectionHeader.foreground": color.text.primary,
|
||||
"sideBarSectionHeader.background": color.bg.canvasInset,
|
||||
"sideBarSectionHeader.border" : color.border.primary,
|
||||
|
||||
"list.hoverForeground" : workbenchForeground,
|
||||
"list.inactiveSelectionForeground": workbenchForeground,
|
||||
"list.activeSelectionForeground" : workbenchForeground,
|
||||
"list.hoverForeground" : color.text.secondary,
|
||||
"list.inactiveSelectionForeground": color.text.secondary,
|
||||
"list.activeSelectionForeground" : color.text.secondary,
|
||||
"list.hoverBackground" : themes({ light: "#ebf0f4", dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"list.inactiveSelectionBackground": themes({ light: "#e8eaed", dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"list.activeSelectionBackground" : themes({ light: "#e2e5e9", dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
"list.inactiveFocusBackground" : themes({ light: scale.blue[1], dark: scale.blue[9], dimmed: scale.blue[9] }),
|
||||
"list.focusBackground" : themes({ light: "#cce5ff", dark: scale.blue[8], dimmed: scale.blue[8] }),
|
||||
|
||||
"tree.indentGuidesStroke": themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
"tree.indentGuidesStroke": color.border.secondary,
|
||||
|
||||
"notificationCenterHeader.foreground": themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"notificationCenterHeader.background": themes({ light: scale.gray[2], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"notifications.foreground" : workbenchForeground,
|
||||
"notifications.foreground" : color.text.secondary,
|
||||
"notifications.background" : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"notifications.border" : borderPrimary,
|
||||
"notifications.border" : color.border.primary,
|
||||
"notificationsErrorIcon.foreground" : themes({ light: scale.red[5], dark: scale.red[4], dimmed: scale.red[4] }),
|
||||
"notificationsWarningIcon.foreground": themes({ light: scale.orange[6], dark: scale.orange[3], dimmed: scale.orange[3] }),
|
||||
"notificationsInfoIcon.foreground" : themes({ light: scale.blue[6], dark: scale.blue[3], dimmed: scale.blue[3] }),
|
||||
|
||||
"pickerGroup.border" : themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
"pickerGroup.foreground": workbenchForeground,
|
||||
"pickerGroup.foreground": color.text.secondary,
|
||||
"quickInput.background" : themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"quickInput.foreground" : workbenchForeground,
|
||||
"quickInput.foreground" : color.text.secondary,
|
||||
|
||||
"statusBar.foreground" : themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }),
|
||||
"statusBar.background" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"statusBar.border" : borderPrimary,
|
||||
"statusBar.border" : color.border.primary,
|
||||
"statusBar.noFolderBackground" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"statusBar.debuggingBackground" : themes({ light: "#f9826c", dark: "#931b06", dimmed: "#931b06" }),
|
||||
"statusBar.debuggingForeground" : themes({ light: scale.white, dark: scale.white, dimmed: scale.white }),
|
||||
"statusBarItem.prominentBackground": themes({ light: "#e8eaed", dark: "#282e34", dimmed: "#282e34" }),
|
||||
|
||||
"editorGroupHeader.tabsBackground": themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"editorGroupHeader.tabsBorder" : borderPrimary,
|
||||
"editorGroup.border" : borderPrimary,
|
||||
"editorGroupHeader.tabsBorder" : color.border.primary,
|
||||
"editorGroup.border" : color.border.primary,
|
||||
|
||||
"tab.activeForeground" : workbenchForeground,
|
||||
"tab.activeForeground" : color.text.secondary,
|
||||
"tab.inactiveForeground" : themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"tab.inactiveBackground" : themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.activeBackground" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.hoverBackground" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.unfocusedHoverBackground": themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.border" : borderPrimary,
|
||||
"tab.unfocusedActiveBorderTop": borderPrimary,
|
||||
"tab.border" : color.border.primary,
|
||||
"tab.unfocusedActiveBorderTop": color.border.primary,
|
||||
"tab.activeBorder" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.unfocusedActiveBorder" : themes({ light: scale.white, dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"tab.activeBorderTop" : "#f9826c",
|
||||
|
||||
"breadcrumb.foreground" : themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"breadcrumb.focusForeground" : workbenchForeground,
|
||||
"breadcrumb.focusForeground" : color.text.secondary,
|
||||
"breadcrumb.activeSelectionForeground": themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }),
|
||||
"breadcrumbPicker.background" : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
|
||||
|
|
@ -172,10 +170,10 @@ function getTheme({ theme, name }) {
|
|||
"scrollbarSlider.activeBackground": themes({ light: "#959da588", dark: "#484F5888", dimmed: "#484F5888" }),
|
||||
"editorOverviewRuler.border" : themes({ light: scale.white, dark: scale.black, dimmed: scale.black }),
|
||||
|
||||
"panel.background" : themes({ light: scale.gray[1], dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
"panel.border" : borderPrimary,
|
||||
"panel.background" : color.bg.canvasInset,
|
||||
"panel.border" : color.border.primary,
|
||||
"panelTitle.activeBorder" : "#f9826c",
|
||||
"panelTitle.activeForeground" : workbenchForeground,
|
||||
"panelTitle.activeForeground" : color.text.secondary,
|
||||
"panelTitle.inactiveForeground": themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
|
||||
"panelInput.border" : themes({ light: scale.gray[2], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
|
||||
|
|
@ -198,7 +196,7 @@ function getTheme({ theme, name }) {
|
|||
"peekViewEditor.background" : themes({ dark: "#0d111788", dimmed: "#0d111788" }),
|
||||
"peekViewResult.background" : themes({ dark: scale.gray[9], dimmed: scale.gray[9] }),
|
||||
|
||||
"settings.headerForeground" : workbenchForeground,
|
||||
"settings.headerForeground" : color.text.secondary,
|
||||
"settings.modifiedItemIndicator" : themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }),
|
||||
"welcomePage.buttonBackground" : themes({ light: scale.gray[1], dark: scale.gray[8], dimmed: scale.gray[8] }),
|
||||
"welcomePage.buttonHoverBackground": themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }),
|
||||
|
|
|
|||
Loading…
Reference in a new issue