Flattered

👋 A VS Code extension that makes your editor look flat, tidy, modern, and minimal. This is not a theme, but a "theme overrider" or "theme flattener" so to speak. If you’ve ever liked a color theme's look in the editor but wished for a cleaner, flatter overall look — Flattered has you covered.

⚠︎ ️Important Warnings ⚠︎

1. This extension touches your workbench.colorCustomizations

Flattered works by applying overrides to VS Code’s workbench.colorCustomizations setting.

• If you have custom tweaks or commented-out properties in this section of the settings, they may be lost.
• Please back up your settings before installing Flattered.

If you don’t mess with workbench.customizations, you’re safe to ignore this.

2. Themes may look "weird" with Flattered enabled

When Flattered is active, previewing out other themes (e.g. Preferences: Color Theme) might not look as expected because overrides are still applied. To see a theme in its original form, use the Flattered: Reset then Select Theme command to remove overrides first. Unfortunately, there isn't a VS Code API/event to hook into the Preferences: Color Theme command. Hopefully in the future.

Quick How-To Use

By default, Flattered will not auto apply.

• Select a your favorite theme.
• Run command Flattered: Apply to Current Theme
• Profit! :)

NOTE AGAIN: If you're previewing color themes with Flattered already applied, you might only see the text change colors as the overrides for the backgrounds are still active. Reset the theme first to remove the overrides if you want to preview the color themes' original look before previewing. Command: Flattered: Reset Current Theme. Conveniently, you can also use the command Flattered: Reset then Select Theme instead of Preferences: Color Theme to basically reset Flattered then select themes.

• Play around the settings. You can toggle different parts to use the current theme's background color for sidebar, minimap, terminal, titlebar, etc. You can also use the title bar's background color instead of the editor's background color as the source, or even provide a custom hex value. You can also auto apply if you already get the hang of it.

Features

• Apply a flat and minimal style override to any theme.
• Works with your favorite color themes without replacing them.
• Toggle and reset easily from the command palette.
• Use the title bar, editor, or a custom hex color as a source.
• Toggleable parts on which you can apply to override the color.
• Auto apply after switching color themes.

Preview

Before Flattered

After Flattered

After more minimal customizations

Requirements

No additional dependencies — just VS Code.

Extension Settings

This extension contributes the following setting:

• flattered.enabled Enable Flattered.
• flattered.autoApply Enable automatic apply Flattered on theme change, workbench.colorCustomizations, or Flatter setting change.
• flattered.customColor Custom color (hex) to use. Leave blank to use editor background color.
• flattered.applyTo.titleBar Apply Flattered color to title bar
• flattered.applyTo.tabs Apply Flattered color to editor tabs
• flattered.applyTo.activityBar Apply Flattered color to activity bar"
• flattered.applyTo.sideBar Apply Flattered color to sidebar
• flattered.applyTo.panel Apply Flattered color to bottom panel
• flattered.applyTo.terminal Apply Flattered color to integrated terminal
• flattered.applyTo.statusBar Apply Flattered color to status bar
• flattered.applyTo.borders Also apply on related borders
• flattered.backupColorCustomizations This isn't a setting per se, but a storage of previous workbench color customizations that Flattered have overriden, used later when Reset Current Theme command is invoked.
• many more.. please check VS Code Settings > Extensions > Flattered Themes

Commands

• To manually apply Flattered to your current theme: Flattered: Apply to Current Theme
• To reset Flattered at any time via the Command Palette: Flattered: Reset Current Theme
• To select a different theme via the Command Palette: Flattered: Reset and Select Theme NOTE: This is a convenience command. It basically runs Flattered: Reset Current Theme then Preferences: Color Theme commands.

Known Issues

• Manual user's overrides in workbench.colorCustomizations may get wiped out once overrides are applied.

Release Notes

1.2.1

• New Command: Flattered: Reset then Select Theme. A convenience command to properly preview the original themes without the overrides. It first resets Flattered, then calling Preferences: Color Theme command.

1.1.1

• Fix some themes doesn't get read properly. They should be working now.

1.1.0

• Support for title bar background color as source color
• Support for applying to
  • sidebar section header background
  • minimap background
• Change setting for Auto Apply to
  • false
  • true (Always when color theme or a Flattered setting has been changed)
  • "ask"

1.0.2

• Compressed flattered-made setting.

1.0.1

• Fix an issue where the configuration is being mistakenly backed up leading to failed reset 🤦🏼

1.0.0

• Initial release of Flattered 🎉
• Adds flat overrides to your current theme.
• Includes reset command for safely reverting changes.

For An Even More Minimal Look (bias)

• Hide the Activity Bar, much faster to use keyboard shortcuts "workbench.activityBar.location": "hidden"
• Hide the Command Center, there's already the command pallete "window.commandCenter": false
• Hide the Tab Bar, much faster to use ctrl+tab "workbench.editor.showTabs": "none"
• Hide the Bread Crumbs, much faster to use cmd+o to go to identifiers "breadcrumbs.enabled": false
• Show line numbers at intervals instead of each line, less distraction, ctrl+G to go to specific line "editor.lineNumbers": "interval"
• Play around find fonts, ligatures and alt sets, and line heights, for better readability. My gotos are
  • LigaSrc Pro
  • Red Hat Mono (I ligaturized one)
  • Consolas
  • Cascadia
  • Jet Brains Mono
  • Fira Code
  • Ligconsolata
  • Anonymous Pro
  • "editor.letterSpacing": -0.1
  • "editor.fontSize": 13
  • "editor.lineHeight": 1.8

Roadmap

• More commands
  • Change each of the Flattered setting

I hope you enjoy a flatter VS Code!

-Wil, wagulo at gmail