Skip to content

Commit

Permalink
Add env var ${vscode:user} for Code/User directory (#436)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Katsute
Katsute authored Dec 27, 2024
1 parent 9ccede0 commit f6e7186
Show file tree
Hide file tree
Showing 8 changed files with 296 additions and 263 deletions.
30 changes: 9 additions & 21 deletions HELP.md
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,36 @@
# Common Issues
## Common Issues

### Code installation is corrupt
#### Code installation is corrupt

This warning may appear after running the uninstall command, reopen VSCode for this to disappear.

If this warning still appears after an uninstall, reinstall [VSCode](https://code.visualstudio.com/download).

### VSCode stopped working [#46](https://github.com/KatsuteDev/Background/issues/46)
#### VSCode stopped working

This extension modifies an internal file to make backgrounds work, if VSCode stops working replace `%LocalAppData%\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js` with `workbench.desktop.main-backup.js`.

This extension also modifies `%LocalAppData%\Programs\Microsoft VS Code\resources\app\product.json`, replace with `product-backup.json` if VSCode stops working.

##  

### Backgrounds are missing on workspace

The workspace setting will use whatever settings are set for that workspace, it does not fallback to the global setting.

### Opacity is inverted

As of 3.0.0, opacity has been switched from 0 visible and 1 invisible to 1 visible and 0 invisible, use the **useInvertedOpacity** option if you want the old behavior.

### Disable/uninstall doesn't remove background
#### Disable/uninstall doesn't remove background

Backgrounds are not removed on extension disable or uninstall, you must run the **Background: Uninstall** command to remove backgrounds.
Backgrounds are not removed on extension disable or uninstall, you must run the <kbd>Background: Uninstall</kbd> command to remove backgrounds.

### Background doesn't work on window buttons (minimize/maximize/close) [#178](https://github.com/KatsuteDev/Background/issues/178)
#### Background doesn't work on window buttons (minimize/maximize/close)

These buttons are controlled by the system and not VSCode; and can not be modified by this extension.

## &nbsp;

### (Windows) Doesn't work on WSL [#27](https://github.com/KatsuteDev/Background/issues/27#issuecomment-1233610914)
#### (Windows) Doesn't work on WSL

Backgrounds can not be changed while running this extension in a remote WSL window. Backgrounds must be changed by making changes in the main VSCode window, then opening the remote WSL window.

### (Mac) read-only file system [#76](https://github.com/KatsuteDev/Background/issues/76)
#### (Mac) read-only file system

This extension doesn't natively support Mac, write permissions must be granted to the VSCode application:

1. Move `Visual Studio Code.app` from `Download` to the `Application` directory.
2. Run `sudo chmod -R a+rwx '/Applications/Visual Studio Code.app'` to grant write permissions.

### (Linux) snap: read-only file system [#140](https://github.com/KatsuteDev/Background/issues/140#issuecomment-1503820398)
#### (Linux) snap: read-only file system

Applications installed using [snap](https://snapcraft.io/) are inherently read-only, install VSCode using [deb](https://code.visualstudio.com/download) or [rpm](https://code.visualstudio.com/download).
128 changes: 57 additions & 71 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
</a>
<h3>Background</h3>
<h4>The most advanced background image extension for VSCode</h4>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="rating" src="https://img.shields.io/visual-studio-marketplace/stars/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="installs" src="https://img.shields.io/visual-studio-marketplace/i/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="downloads" src="https://img.shields.io/visual-studio-marketplace/d/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF"></a>
<h5>Windows + Mac + Linux</h5>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="rating" src="https://img.shields.io/visual-studio-marketplace/stars/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF&label=Rating"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="installs" src="https://img.shields.io/visual-studio-marketplace/i/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF&label=Installs"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=katsute.code-background"><img alt="downloads" src="https://img.shields.io/visual-studio-marketplace/d/katsute.code-background?style=for-the-badge&logo=visualstudiocode&labelColor=252526&color=0098FF&label=Downloads"></a>
</div>

<br>
Expand All @@ -23,12 +24,9 @@ Add multiple background images for the window, editors, sidebars, or the panel.
- Install from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=katsute.code-background).
- Install directly from VSCode using the id [`katsute.code-background`](https://marketplace.visualstudio.com/items?itemName=katsute.code-background).

#### Usage
Customize using the <kbd>Background: Configuration</kbd> command or press the **Background** button in the bottom right to access the configuration menu.

1. Type `Background: Configuration` in the command pallette or press the **Background** tab in the statusbar.
2. Select where you want to add a background (Window, Editor, Sidebar, Panel).
3. Add backgrounds and change how it should be displayed.
4. Use `Background: Install` or press the install button.
Install using the <kbd>Background: Install</kbd> command or press the **Install** button in the configuration menu to install the background.

## Features

Expand All @@ -38,106 +36,94 @@ Add background images for the whole window, editors, sidebars, or the panel. Tra

<div align="center">
<h6>Full Window</h6>
<img alt="window background" src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/window.gif">
<br>
<img src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/window.gif">
</div>
<br>
<div align="center">
<h6>Editor, Sidebar, and Terminal</h6>
<img alt="editor background" src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/editor.gif">
<br>
<img src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/editor.gif">
</div>
<br>
<div align="center">
<h6>Slideshow</h6>
<img alt="multiple backgrounds" src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/transition.gif">
<img src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/transition.gif">
</div>

#### Configuration Menu

Type `Background: Configuration` in the command pallette or press the **Background** tab in the statusbar to access the configuration menu.
Use the <kbd>Background: Configuration</kbd> command or press the **Background** button in the bottom right to access the configuration menu.

<div align="center">
<img alt="configuration menu" src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/configuration.gif">
<img src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/configuration.gif">
</div>

#### Glob, URL, and Environment Variable Support

Add background images by file, folder, [glob](https://github.com/isaacs/node-glob#glob-primer), or URL.

> ⚠️ **Use only `/` for directories**
>
> [node-glob](https://github.com/isaacs/node-glob#windows) only accepts `/` as path separators, `\` is reserved for escape characters.
Add background images by file, folder, or URL. Supports [glob](https://github.com/isaacs/node-glob#glob-primer) and [environment variables](#environment-variables).

<div align="center">
<img alt="file menu" src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/glob.gif">
<img src="https://raw.githubusercontent.com/KatsuteDev/Background/main/assets/glob.gif">
</div>

<div align="right"><a href="#top"><code>▲</code></a></div>

## Commands

| Command | Description |
|---|---|
|`Background: Install`|Installs and enables the background.|
|`Background: Uninstall`|Uninstalls and disables the background.|
|`Background: Reload`|Randomizes the backgrounds. Background must already be installed.|
|`Background: Configuration`|Opens the configuration menu.|
|`Background: Changelog`|Opens changelog.|
|:--|:--|
|<kbd>Background: Install</kbd>|Installs and enables the background|
|<kbd>Background: Uninstall</kbd>|Uninstalls and disables the background|
|<kbd>Background: Reload</kbd>|Randomizes the current background|
|<kbd>Background: Configuration</kbd>|Opens the configuration menu|
|<kbd>Background: Changelog</kbd>|Opens the changelog|

<div align="right"><a href="#top"><code>▲</code></a></div>

## Configuration

Use the `Background: Configuration` command to access the configuration menu.

Background properties are saved as arrays so you can have different options for different UI elements.

The order settings are saved in is:

0. Window
1. Editor
2. Sidebar
3. Panel

| Background | Type | Description |
|---|:-:|---|
|`background.windowBackgrounds`|`string[]`|The list of files or globs to use for the window background image.|
|`background.editorBackgrounds`|`string[]`|The list of files or globs to use for editor background images.|
|`background.sidebarBackgrounds`|`string[]`|The list of files or globs to use for the sidebar background images.|
|`background.panelBackgrounds`|`string[]`|The list of files or globs to use for the panel background image.|

<br>

| Property | Type | Description |
|---|:-:|---|
|`background.backgroundAlignment`|`enum[4]`|The alignment of the background image.|
|`background.backgroundAlignmentValue`|`string[4]`|If the background image alignment is set to `Manual`, this is the literal value for the `background-position` css property. Only accepts a [css \<position>](https://developer.mozilla.org/en-US/docs/Web/CSS/position_value).|
|`background.backgroundBlur`|`string[4]`|Background image blur. Only accepts a [css \<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length).|
|`background.backgroundOpacity`|`number[4]`|The UI opacity. 1 is fully visible and 0 is invisible.|
|`background.backgroundRepeat`|`enum[4]`|The background image repeat.|
|`background.backgroundSize`|`enum[4]`|The background image size.|
|`background.backgroundSizeValue`|`string[4]`|If the background image size is set to `Manual`, this is the literal value for the `background-size` css property. Only accepts a [css \<position>](https://developer.mozilla.org/en-US/docs/Web/CSS/position_value).|
|`background.backgroundChangeTime`|`number[4]`|How long in seconds before the background should automatically change. Set to 0 to always use the same image.|

<br>

| Advanced | Type | Description |
|---|:-:|---|
|`background.autoInstall`|`boolean`|Automatically installs backgrounds and reloads the window on startup if changes are detected or VSCode updates.<br>This option is disabled when you run the uninstall command.|
|`background.renderContentAboveBackground`|`boolean`|Render content like images, PDFs, and markdown previews above the background.|
|`background.useInvertedOpacity`|`boolean`|Use an inverted opacity, so 0 is fully visible and 1 is invisible.|
|`background.smoothImageRendering`|`boolean`|Use smooth image rendering rather than pixelated rendering when resizing images.|
|`background.settingScope`|`Global` \| `Workspace`|Where to save background settings. This does not automatically update the background on workspace change, you need to also turn on `autoInstall`.|
|`background.CSS`|`string`|Apply raw CSS to VSCode.|
Use the <kbd>Background: Configuration</kbd> command or press the **Background** button in the bottom right to access the configuration menu.

|Background|Description|
|:--|:--|
|Window Backgrounds|The list of files or globs to use for the window background image|
|Editor Backgrounds|The list of files or globs to use for editor background images|
|Sidebar Backgrounds|The list of files or globs to use for the sidebar background images|
|Panel Backgrounds|The list of files or globs to use for the panel background image|
|||
|**Style Option**|**Description**|
|Alignment|Background alignment|
|Alignment Value|Background alignment (CSS)|
|Blur|Background blur (CSS)|
|Opacity|Background opacity, 1 is fully visible and 0 is invisible|
|Repeat|Background repeat|
|Size|Background size|
|Size Value|Background size (CSS)|
|Change Time|How often to change the background image in seconds, set to 0 to never change|
|||
|**Advanced Option**|**Description**|
|Auto Install|Automatically install backgrounds on startup|
|Render Content Above Background|Show images, PDFs, and markdown previews on top of the background|
|Use Inverted Opacity|Use an inverted opacity, so 0 is visible and 1 is invisible|
|Smooth Image Rendering|Use smooth image rendering when resizing images instead of pixelated|
|Setting Scope|Where to save background settings - Global or Workspace|
|CSS|Custom CSS|

<div align="right"><a href="#top"><code>▲</code></a></div>

## Environment Variables

| Variable | Description |
|---|---|
|Variable|Description|
|:--|:--|
|`${vscode:workspace}`|Current VSCode project folder|
|`${vscode:user}`|VSCode user directory, either `Code/User` or `data/user-data/User`|
|`${user:home}`|Current user's home directory|
|`${...}`|System environment variable|

<div align="right"><a href="#top"><code>▲</code></a></div>

## API
## &nbsp;

### API

Add this extension to your `package.json`.

Expand Down
Loading

0 comments on commit f6e7186

Please sign in to comment.