Skip to content

Commit

Permalink
More adjusting
Browse files Browse the repository at this point in the history
  • Loading branch information
Sakari Mursu committed Aug 25, 2022
1 parent 1b32637 commit d835680
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 82 deletions.
22 changes: 7 additions & 15 deletions src/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ const palette = {

white: '#f2f4f8',
gray: '#8193B1',
black1: '#1D222A',
black2: '#1d1f26',
dark4: '#58667E',
dark5: '#C8DCFF',
red1: '#f2564f',

//Bright versions, used for e.g, in terminal
black: '#1D222A',
blueBright: chroma('#69a4fc').darken(0.9).hex(), //'#2f71e8',
magentaBright: '#9D72F3',
greenBright: '#73d783',
Expand Down Expand Up @@ -63,32 +63,24 @@ module.exports = {

foreground: palette.white,
foreground2: chroma('rgb(138, 143, 152)').hex(),

// accent #5e6ad2
// accent hover #717ce1
foregroundSubtle: chroma(palette.white).alpha(0.2).hex(),
foregroundInactive: chroma('rgb(98, 102, 109)').hex(),

border: chroma('#ffffff').alpha(0.1).hex(),
input: chroma('#27282b').hex(),
inputForeground: palette.white,
foregroundInactive: chroma('rgb(98, 102, 109)').hex(),
inputBorder: chroma('#27282b').hex(),

background1: '#1f2023', //'#242734',
background1: chroma('rgb(31, 32, 35)').hex(), // main, most common bg
background2: chroma('rgb(39, 40, 43)').hex(),
background3: '#1b1c1e',

background3: chroma('rgb(27, 28, 30)').hex(),
backgroundPopup: chroma('rgb(55, 55, 60)').hex(),
backgroundHover: chroma('rgb(45, 47, 54)').hex(),

blue10: chroma(palette.blue).alpha(0.1).hex(),
blue15: chroma(palette.blue).alpha(0.15).hex(),
blue25: chroma(palette.blue).alpha(0.25).hex(),
yellow15: chroma(palette.yellow).alpha(0.15).hex(),
yellow30: chroma(palette.yellow).alpha(0.3).hex(),
purple50: chroma(palette.purple).alpha(0.5).hex(),

dark4_25: chroma(palette.dark4).alpha(0.25).hex(),
dark4_50: chroma(palette.dark4).alpha(0.5).hex(),
black40: chroma(palette.black1).alpha(0.4).hex(),

// Git decoration, gutter
modified: palette.purple,
deleted: palette.red,
Expand Down
145 changes: 78 additions & 67 deletions src/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,50 @@ module.exports = function createTheme({ name, colors }) {
name: name,
type: 'dark',
colors: {
focusBorder: colors.dark4,
focusBorder: colors.border,
foreground: colors.foreground,
descriptionForeground: colors.foreground,
errorForeground: colors.redBright,
// disabledForeground: colors.redBright,
// selection.background
// descriptionForeground
errorForeground: colors.red,
'sash.hoverBorder': colors.yellow,

'icon.foreground': colors.white,
'widget.shadow': colors.black40,
'icon.foreground': colors.foreground2,
'widget.shadow': colors.background1,

// TODO: update
'button.background': colors.accent,
'button.foreground': colors.white,
'button.hoverBackground': colors.accentHover,

'checkbox.background': colors.black1,
'checkbox.foreground': colors.white,
'checkbox.border': colors.black1,
'checkbox.background': colors.backgroundPopup,
'checkbox.foreground': colors.foreground,
'checkbox.border': colors.border,

'dropdown.background': colors.black1,
'dropdown.border': colors.black1,
'dropdown.foreground': colors.white,
'dropdown.listBackground': colors.black2,
'dropdown.background': colors.backgroundPopup,
'dropdown.border': colors.border,
'dropdown.foreground': colors.foreground,
'dropdown.listBackground': colors.backgroundPopup,

'input.background': colors.input,
'input.border': colors.inputBorder,
'input.foreground': colors.inputForeground,
'input.background': colors.background2,
'input.border': colors.background2,
'input.foreground': colors.foreground,
'input.placeholderForeground': colors.foregroundInactive,

'badge.foreground': colors.black1,
'badge.foreground': colors.background1,
'badge.background': colors.yellow,

'toolbar.activeBackground': colors.red,
'toolbar.hoverBackground': colors.backgroundPopup,

'progressBar.background': colors.accent,

'titleBar.activeForeground': colors.white,
'titleBar.activeBackground': colors.black2,
'titleBar.inactiveForeground': colors.foreground,
'titleBar.inactiveBackground': colors.black2,
'titleBar.border': colors.black1,
'titleBar.activeForeground': colors.foreground,
'titleBar.activeBackground': colors.background1,
'titleBar.inactiveForeground': colors.foreground2,
'titleBar.inactiveBackground': colors.background2,
'titleBar.border': colors.background1,

// The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.
// https://code.visualstudio.com/api/references/theme-color#activity-bar
Expand Down Expand Up @@ -96,7 +103,6 @@ module.exports = function createTheme({ name, colors }) {
'tab.inactiveForeground': colors.foregroundInactive,
// tab.unfocusedActiveForeground: Active tab foreground color in an inactive editor group.
// tab.unfocusedInactiveForeground: Inactive tab foreground color in an inactive editor group.
// 'tab.unfocusedHoverBackground': colors.red1,
'tab.hoverBackground': colors.backgroundHover,
// tab.unfocusedHoverForeground: Tab foreground color in an unfocused group when hovering
// tab.hoverBorder: Border to highlight tabs when hovering
Expand All @@ -115,24 +121,25 @@ module.exports = function createTheme({ name, colors }) {
// 'editor.selectionBackground': colors.red, // TODO: update
'editor.wordHighlightBackground': colors.dark4, // TODO: update

'editor.findMatchBackground': colors.purple, // TODO: update
'editor.findMatchHighlightBackground': colors.purple50, // TODO: update
'editor.findMatchBackground': colors.dark4, // TODO: update
'editor.findMatchHighlightBackground': colors.yellow30, // TODO: update

'editorIndentGuide.background': colors.dark4_50,
'editorIndentGuide.background': colors.foregroundSubtle,
'editorCursor.foreground': colors.dark5,

'editorBracketMatch.border': colors.dark5,
'editorBracketMatch.border': colors.yellow,

'editorGutter.modifiedBackground': colors.modified,
'editorGutter.addedBackground': colors.added,
'editorGutter.deletedBackground': colors.deleted,

'editorError.foreground': colors.redBright,
'editorError.foreground': colors.red,
'editorWarning.foreground': colors.orange,

'editorWidget.background': colors.black2,
'editorWidget.foreground': colors.white,
'editorWidget.resizeBorder': colors.dark4,
'editorWidget.background': colors.background2,
'editorWidget.foreground': colors.foreground,
'editorWidget.resizeBorder': colors.foreground2,
// 'editorSuggestWidget.selectedIconForeground': colors.green,
// 'editorSuggestWidget.selectedForeground': colors.green,

'editorLightBulb.foreground': colors.yellow,
'editorLightBulbAutoFix.foreground': colors.yellow,
Expand All @@ -141,43 +148,49 @@ module.exports = function createTheme({ name, colors }) {
// https://code.visualstudio.com/api/references/theme-color#editor-colors
'editor.background': colors.background1,
'editor.foreground': colors.syntax.fg,
'editorLineNumber.foreground': colors.dark4,
'editorLineNumber.activeForeground': colors.blue,
// "editorCursor.background": colors.red,
// "editorCursor.foreground": colors.red,
'editorLineNumber.foreground': colors.foregroundInactive,
'editorLineNumber.activeForeground': colors.foreground,
'editor.selectionBackground': colors.blue25,
// editor.inactiveSelectionBackground: Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations.
// editor.selectionHighlightBackground: Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.
// editor.selectionHighlightBorder: Border color for regions with the same content as the selection.

// Colors for list and trees like the File Explorer
// https://code.visualstudio.com/api/references/theme-color#lists-and-trees
'list.hoverForeground': colors.white,
'list.inactiveSelectionForeground': colors.foreground,
'list.activeSelectionForeground': colors.white,
'list.hoverBackground': colors.blue25,
'list.inactiveSelectionBackground': colors.blue15,
'list.activeSelectionBackground': colors.blue15,
'list.inactiveFocusBackground': '#1d2d3e',
'list.focusBackground': colors.blue25,
'list.focusForeground': colors.white,

'notificationCenterHeader.background': colors.black2,
// 'list.hoverForeground': colors.foreground,
// 'list.inactiveSelectionForeground': colors.foreground,
// 'list.activeSelectionForeground': colors.foreground,
// 'list.hoverBackground': colors.backgroundHover,
// 'list.inactiveSelectionBackground': colors.blue15,
// 'list.activeSelectionBackground': colors.blue15,
'list.focusBackground': colors.backgroundHover,
'list.focusForeground': colors.foreground,

'notificationCenterHeader.background': colors.background2,
'notificationCenterHeader.foreground': colors.white,
'notifications.background': colors.dark4,
'notifications.border': colors.dark4,
'notificationToast.border': colors.dark4,
'notificationLink.foreground': colors.blue,
'notificationsErrorIcon.foreground': colors.redBright,
'notificationsWarningIcon.foreground': colors.yellowBright,
'notifications.background': colors.background2,
'notifications.border': colors.background2,
'notificationToast.border': colors.background2,
'notificationLink.foreground': colors.accent,
'notificationsErrorIcon.foreground': colors.red,
'notificationsWarningIcon.foreground': colors.yellow,
'notificationsInfoIcon.foreground': colors.white,

'pickerGroup.border': '#444d56',
'pickerGroup.foreground': colors.white,

// cmd + shift + p
'quickInput.background': colors.black2,
'pickerGroup.border': colors.background2,
'pickerGroup.foreground': colors.foreground,
'quickInput.background': colors.background2,
'quickInput.foreground': colors.white,
'quickInputList.focusBackground': colors.backgroundPopup,
'quickInputList.focusForeground': colors.foreground,
'quickInputList.focusIconForeground': colors.foreground,
'quickInputTitle.background': colors.red,
'keybindingLabel.background': colors.background2,
'keybindingLabel.foreground': colors.foreground,
'keybindingLabel.border': colors.background2,

'statusBar.foreground': colors.foreground2,
'statusBar.background': colors.background1,
Expand All @@ -186,24 +199,24 @@ module.exports = function createTheme({ name, colors }) {
'statusBar.debuggingBackground': colors.yellow,
'statusBar.debuggingForeground': colors.background1,

'searchEditor.textInputBorder': colors.black1,
'searchEditor.textInputBorder': colors.background1,

// Breadcrumbs
'breadcrumb.foreground': colors.foreground2,
'breadcrumb.focusForeground': colors.white,
'breadcrumb.background': colors.black2,
'breadcrumb.activeSelectionForeground': colors.white,
'breadcrumbPicker.background': colors.black2,
'breadcrumb.focusForeground': colors.foreground,
'breadcrumb.background': colors.background1,
'breadcrumb.activeSelectionForeground': colors.foreground,
'breadcrumbPicker.background': colors.background2,

'diffEditor.insertedTextBorder': colors.added,
'diffEditor.removedTextBorder': colors.deleted,

'scrollbar.shadow': colors.dark4_25,
'scrollbarSlider.background': colors.dark4_25,
'scrollbarSlider.hoverBackground': colors.dark4_50,
'scrollbarSlider.activeBackground': colors.dark4,
'scrollbar.shadow': colors.border,
'scrollbarSlider.background': colors.foregroundSubtle,
'scrollbarSlider.hoverBackground': colors.foreground2,
'scrollbarSlider.activeBackground': colors.foreground2,

'editorOverviewRuler.border': colors.black1,
'editorOverviewRuler.border': colors.background1,

'panel.background': colors.background1,
'panel.border': colors.border,
Expand All @@ -213,7 +226,7 @@ module.exports = function createTheme({ name, colors }) {

'panelInput.border': '#2f363d',
'terminal.foreground': colors.foreground,
'terminal.ansiBlack': colors.black1,
'terminal.ansiBlack': colors.black,
'terminal.ansiBlue': colors.blue,
'terminal.ansiBrightBlack': colors.dark4,
'terminal.ansiBrightBlue': colors.blueBright,
Expand Down Expand Up @@ -241,9 +254,6 @@ module.exports = function createTheme({ name, colors }) {
'gitDecoration.conflictingResourceForeground': colors.conflict,
'gitDecoration.submoduleResourceForeground': colors.foreground,

'debugToolBar.background': colors.black1,
'debugToolBar.border': colors.black1,

'settings.headerForeground': colors.white,
'settings.modifiedItemIndicator': colors.modified,

Expand Down Expand Up @@ -402,7 +412,8 @@ module.exports = function createTheme({ name, colors }) {
},
{
name: 'Components, tags',
scope: 'support.class.component, entity.name.tag',
scope:
'support.class.component, entity.name.tag, meta.property-name.scss',
settings: {
foreground: colors.syntax.components,
},
Expand Down

0 comments on commit d835680

Please sign in to comment.