https://github.com/rakibdev/material-code

Material You | Dynamic theme for Visual Studio Code.
https://github.com/rakibdev/material-code

dark-theme material-3 material-design-3 material-theme material-you material3 theme vscode vscode-extension

Last synced: 3 months ago
JSON representation

Material You | Dynamic theme for Visual Studio Code.

• Host: GitHub
• URL: https://github.com/rakibdev/material-code
• Owner: rakibdev
• Created: 2022-01-22T19:41:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T00:03:41.000Z (10 months ago)
• Last Synced: 2024-08-02T15:29:55.322Z (6 months ago)
• Topics: dark-theme, material-3, material-design-3, material-theme, material-you, material3, theme, vscode, vscode-extension
• Language: JavaScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=rakib13332.material-code
• Size: 968 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
![Material Code Editor](https://raw.githubusercontent.com/rakibdev/material-code/main/screenshots/editor.png)

![Material Code Settings](https://raw.githubusercontent.com/rakibdev/material-code/main/screenshots/settings.png)

![Material Code Settings](https://raw.githubusercontent.com/rakibdev/material-code/main/screenshots/light-theme.png)

## Features

- Material You (Dark & Light).

- Rounded corners.

- Click ripple effect.

- Modular syntax theme.

- Inject custom code (CSS, JavaScript, HTML) via inline text, local file path, or URL.

- Follow system theme e.g. [Mutagen](https://github.com/InioX/matugen), [Pywal](https://github.com/dylanaraps/pywal).

Let me know your suggestions, issues on [Github](https://github.com/rakibdev/material-code/issues)

## Usage

Material You theming works straight away.

Other features requires running **Material Code: Apply styles** from command palette, which injects code into vscode installation file **workbench.html**. Therefore extension may ask for administrative privileges if needed.

After applying vscode will warn "Installation corrupted". This can be safely ignored. Click notification gear icon > **Don't show again**.

And to revert run **Material Code: Remove styles**.

### Follow system theme

Material Code's installation directory (e.g. `~/.vscode-insiders/extensions/rakib13332.material-code.../build/theme.js`). The **theme.js** file exports functions to control theme programmatically outside VS Code. So call these whenever your system theme changes. I use shell scripts to apply system-wide GTK and VS Code theme at once, see [vscode.js](https://github.com/rakibdev/dotfiles/blob/main/home/rakib/Downloads/apps-script/theme/vscode.js). Edit according to your system before using.

## Help

### Revert original files manually

In rare cases like [this](https://github.com/rakibdev/material-code/issues/2) where "Material Code: Remove styles" not working. Generally updating vscode version will revert itself including the styles but if you need fix urgent:

- Open **workbench.html** file located in vscode installation folder.

  In my case (Linux) it's `/opt/visual-studio-code-insiders/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html`

- Remove all code inside `<--material-code-->` block and save.

- To fix "Installation corrupted" warning, use [Fix VSCode Checksums](https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums) extension.

### Custom CSS

**Change VS Code font**


```css

.mac,

.windows,

.linux {

  font-family: Google Sans;

}

```

**Change rounded corner radius**


```css

body {

  --radius: 8px;

}

```

** Change background **


// todo:

### Settings you might like

```json

"editor.semanticHighlighting.enabled": true,

"window.dialogStyle": "custom",

"window.menuBarVisibility": "hidden" // I'm using command palette instead.

```

My [settings.json](https://github.com/rakibdev/dotfiles/blob/main/home/rakib/.config/Code%20-%20Insiders/User/settings.json)