feat: add new config system and update icon design

README.md

@@ -8,11 +8,11 @@
 
 <p align="center">
  <a href="https://github.com/hypernym-studio/vscode-icons">Repository</a>
- <span>+</span>
+ <span>✦</span>
  <a href="https://github.com/hypernym-studio/vscode-icons/releases">Releases</a>
- <span>+</span>
+ <span>✦</span>
  <a href="https://github.com/hypernym-studio/vscode-icons/discussions">Discussions</a>
- <span>+</span>
+ <span>✦</span>
  <a href="https://marketplace.visualstudio.com/items?itemName=hypernym-studio.hypernym-icons">Marketplace</a>
 </p>
 
@@ -22,25 +22,199 @@
 
 <br>
 
-## Extension
+## Features
 
-This icon theme is heavily inspired by the latest modern trends and follows an ultra-minimalistic style. Also, the project is built with TypeScript under the hood so it can be very easily extended in dev mode.
+- Adds minimalistic modern style
+- Dynamically infers colors based on state
+- Allows additional customization via options
+- Provides special commands
 
 ## Installation
 
 ### Marketplace
 
-Search for `Hypernym Icons` in the official VSCode Marketplace and install the extension.
+Install [Hypernym Icons](https://marketplace.visualstudio.com/items?itemName=hypernym-studio.hypernym-icons) extension from the official VSCode Marketplace.
 
 ### Manual
 
+If necessary, the extension can be installed manually (optional).
+
 1. Download the [latest version](https://github.com/hypernym-studio/vscode-icons/releases/latest) of the extension.
-2. Open the Command Palette dropdown (⇧⌘P).
+2. Open the **Command Palette** dropdown (**⇧⌘P**).
  - Run the `Extensions: Install from VSIX` command.
  - Select previously downloaded `.vsix` extension file.
 3. After installation, simply activate the extension.
 
-<sub>Read the official <a href="https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix">guide</a> to learn more about manual installation.</sub>
+<sub>Read the official VSCode <a href="https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix">guide</a> to learn more about manual installation.</sub>
+
+## Options
+
+Extension provides a configuration system that allows additional customization such as changing the color, opacity and size of icons.
+
+All options are optional and will fall back to defaults if not specified.
+
+<sub>See the official VSCode <a href="https://code.visualstudio.com/docs/getstarted/settings">settings</a> section for more info.</sub>
+
+### Explorer Arrows
+
+- Type: `boolean`
+- Default: `true`
+
+Specifies the visibility of the Explorer arrows.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.hidesExplorerArrows": true
+}
+```
+
+### Folder Color
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom color for folder icons. Accepts valid HEX color format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.folders.color": "#fff" // #fff, #ffffff, #ffffff66
+}
+```
+
+### Folder Opacity
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom opacity for folder icons. Accepts a percentage size format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.folders.opacity": "60%" // 0-100%
+}
+```
+
+### Folder Size
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom size for folder icons. Accepts a percentage size format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.folders.size": "130%"
+}
+```
+
+### Icon Color
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom color for all icons. Accepts valid HEX color format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.icons.color": "#fff" // #fff, #ffffff, #ffffff66
+}
+```
+
+### Icon Opacity
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom opacity for all icons. Accepts a percentage size format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.icons.opacity": "60%" // 0-100%
+}
+```
+
+### Icon Size
+
+- Type: `string`
+- Default: `undefined`
+
+Specifies a custom size for all icons. Accepts a percentage size format.
+
+```ts
+// settings.json
+
+{
+ "hypernym-icons.icons.size": "130%"
+}
+```
+
+## Commands
+
+Extension includes a set of specific `commands` that can simplify customization.
+
+1. Open the **Command Palette** dropdown (**⇧⌘P**).
+2. Type `Hypernym Icons` to see a list of all available commands.
+3. Run the selected command.
+
+<sub>See the official VSCode <a href="https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette">commands</a> section for more info.</sub>
+
+### Toggle Explorer Arrows
+
+- Command: `Hypernym Icons: Toggle Explorer Arrows`
+
+Specifies the visibility of the explorer arrows.
+
+### Set Folder Color
+
+- Command: `Hypernym Icons: Set Folder Color`
+
+Specifies a custom color for folder icons. Accepts valid HEX color format.
+
+### Set Folder Opacity
+
+- Command: `Hypernym Icons: Set Folder Opacity`
+
+Specifies a custom opacity for folder icons. Accepts a percentage size format.
+
+### Set Folder Size
+
+- Command: `Hypernym Icons: Set Folder Size`
+
+Specifies a custom size for folder icons. Accepts a percentage size format.
+
+### Set Icon Color
+
+- Command: `Hypernym Icons: Set Icon Color`
+
+Specifies a custom color for all icons. Accepts valid HEX color format.
+
+### Set Icon Opacity
+
+- Command: `Hypernym Icons: Set Icon Opacity`
+
+Specifies a custom opacity for all icons. Accepts a percentage size format.
+
+### Set Icon Size
+
+- Command: `Hypernym Icons: Set Icon Size`
+
+Specifies a custom size for all icons. Accepts a percentage size format.
+
+### Reset Commands
+
+It is also possible to reset settings via commands if they are input type. Simply select a command, type `default` and run it. This will reset the option to its default value.
 
 ## Community