piousdeer/vscode-adwaita

VS Code theme for the GNOME desktop

Adwaita theme for VS Code

Dark and light themes based on GNOME's new Adwaita look and GNOME Builder's syntax highlighting.

Extra theme variants are included for those who prefer a colorful status bar and/or default syntax highlighting:

Fonts shown: JetBrains Mono, SF Pro Text.

Installation

Get it on VS Marketplace or Open VSX.

Suggested settings

Open the Command Palette and find "Open Settings (JSON)". Here are the recommended settings:

"window.titleBarStyle": "custom",
"window.commandCenter": true,
"window.autoDetectColorScheme": true,
"workbench.preferredDarkColorTheme": "Adwaita Dark",
"workbench.preferredLightColorTheme": "Adwaita Light",
"workbench.productIconTheme": "adwaita",
"editor.renderLineHighlight": "none",
"workbench.iconTheme": null,
"workbench.tree.indent": 12,

Rounded Window Corners GNOME extension can be used to get rounded corners on all windows.

Related projects

• wroyca/vscode-libadwaita contains custom CSS that brings VS Code even closer to looking like a libadwaita app:

Contributing

See CONTRIBUTING.md.

---

This project is not affiliated with GNOME Foundation.

vscode-adwaita's Issues

None BOLD keyword option

Hi,

Thank you for making this awesome theme! Is there any option to turn bold keywords off?

Thanks!

GNOME 45/Libadwaita 1.4 headerbars

Edit coloration of top bar on light theme to a white, as opposed to light grey, in line with updated Libadwaita

consider removing the `window.activeBorder` color

it might be just me but the border around the whole window looks really out of place (active windows from other applications have a heavier drop shadow, not a border around them)

what's worse is that borders defined by the theme can't be removed in the settings, only recolored, so i currently have to modify the theme after installing it 😒

apart from that i love it though, thank you!

Respect Titlebar Window Actions side settings

With the theme installed on vscode, the titlebar buttons go back to the right side:

While I have them set to the left side, example on firefox:

This is kinda triggering me for now. I love the theme and what it has to offer, but this is such a deal breaker for me. Please fix it.

Publish it on OpenVSX

Don't know if you have the time, but would be very good to publish it on the OpenVSX store as well, it is the store for VSCidum, the non microsoft binaries of vscode.

Link to the store: https://open-vsx.org/

LaTeX Syntax Highlighting

Currently, the theme provides very little syntax highlighting for LaTeX documents.

Adwaita Highlighting:

Default Highlighting:

Port GtkSourceView style schemes

Adwaita comes with a few default style schemes available at:

https://github.com/GNOME/gtksourceview/tree/master/data/styles

It'd make sense to support them in the near future:

Update libadwaita colors

The Libadwaita color scheme has been updated, resulting in most of the colors being inaccurate
e.g. with tabs:

before

after

Inconsistent color, size and gap, and rectangle artifact on normal, hover and active state of titlebar button

In this example, I'll be taking the minimize button, which is similar to both maximize and close button for GTK4 app. For VSCode (with adwaita plugin) , close button on hover and active state shows the color red, which is inaccurate. Also, there is a box outside, which listens to the click event, when it should be the button icons which should react. There's also gap and sizing inconsistency.

GTK4 app

Normal state (#484848)

Hover state (#4F4F4F)

Active state (#6D6D6D)

VSCode, with Adwaita plugin

Normal state (#363636)

Hover state (#535353)

Active state (#535353)

Inconsistent size and gap.

Load colors from gtk.css (libadwaita theming/recoloring)

Theming GNOME apps via ~/.config/gtk-4.0/gtk.css is gaining popularity with projects such as adw-gtk3 bringing GTK 3 support, adw-colors listing user-made themes, and Material You Color Theming automatically generating themes from your wallpapers.

VS Code themes are just static JSON files. From a quick look, there aren't APIs extensions can use to dynamically alter the current theme, but they can modify either settings.json or the theme files themselves. Bloating the user's settings file is too barbaric, but we could go with the second way. Related: vscode-dynamic-theme, vscode-wal-theme

New Adwaita Styled Tabs

It would be amazing if the newer adwaita styled tabs can be added.

Clojure syntax highlighting

Currently this extension has no support for clojure syntax highlighting, possibly other lisps as well. The following will be completely uncolored (unless you select the default syntax highlighting version of the theme):

;; foo.clj
(defn foo [])

too language-specific coloring

With current configuration only several languages are really colored, with rest being just dichromatic, having almost everything colored in the default and a bit in keywordish. For example, Haskell looks like this:

I understand that the goal of this theme is to be as similar to Gnome Builder as possible, and any language support could be ruled out the same way as it did happen with YAML and Rust, but VS Code is environment of countless languages, you cannot handle them all.

Therefore, I think you should consider dropping language-specific rules where possible, potentially losing compatibility with Gnome Builder in some cases: I think it is better to have one color more in one language, than one color less in the rest, as it is easier for the user to make small changes, aimed at specific target. It is a design decision though.

Besides, I am really grateful for that theme, it feels really great overall!

Product icon theme

Now that the Command Center, a command/search/navigation bar in the custom title bar, has been introduced, it makes more sense to use that instead of the native title bar.

Unfortunately, the custom title bar comes with Windows-styled window buttons. It'd be great if we could ship a product icon theme that'd replace just these three icons first, then it could potentially be expanded to replace more icons across the app.

Plugin does not respect GNOME Tweaks settings

The titlebar buttons are not consistent with the settings specified at GNOME Tweaks.

GNOME Tweak settings:

GTK4 app

VSCode with Adwaita plugin

Expected behaviour

The minimize and maximize button should be hidden.

Default status bar will not show correctly the Remote SSH extension

Hi, just as the title says. If you install the Remote SSH extension and you have the default status bar selected as theme option, the extension is not visible (like if it has white font). With the colorful status bar the extension is visible.

Just two images to show the problem:

• extension showed:
  
• extension not showed:
  

Thanks in advance for your help.

Change colors of bracket pairs

Currently, bracket pairs are of the exact same colors as the default theme, which does look really out of place.

Proposal: CSS and JS instead of token colorization

VS Code Adwaita is currently limited by token colorization and is unable to properly represent libadwaita design guidelines. These restrictions can be overcome by injecting CSS and JS, as is demonstrated by vscode-fluent-ui, which would be a good step forward.

vscode-fluent-ui, customized (rounded) elements

Mismatched title bar

despite installing adw-gtk3 VSCode still can't implement adwaita theme on title bar

(base) joseph@localhost:~> ls /usr/share/themes/
Adwaita  Adwaita-dark  adw-gtk3  adw-gtk3-dark  Default  Emacs  HighContrast  Raleigh

my settings.json file

{
    "java.configuration.runtimes": [],
    "java.home": "/home/joseph/Downloads/OpenJDK11U-jdk_x64_linux_hotspot_11.0.7_10/jdk-11.0.7+10",
    "notebook.consolidatedRunButton": true,
    "notebook.lineNumbers": "on",
    "jupyter.askForKernelRestart": false,
    "workbench.preferredDarkColorTheme": "Adwaita Dark",
    "workbench.preferredLightColorTheme": "Adwaita Light",
    "window.titleBarStyle": "native",
    "window.menuBarVisibility": "toggle", // Menu bar will be hidden until you press Alt
    "breadcrumbs.enabled": false,
    "editor.renderLineHighlight": "none",
    "workbench.iconTheme": null,
    "workbench.tree.indent": 12,
    "workbench.colorTheme": "Adwaita Dark & colorful status bar",
}

YAML syntax highlighting is useless

In YAML, with this theme's syntax colors, YAML keys and values are almost the same color, making the highlighting pretty much useless

For comparsion, here's how the default colors look:

If you could change the key color to the one used in JSON that'd be great