DEV Community

ABDULLAH AL AZMI
ABDULLAH AL AZMI

Posted on • Edited on

Customize your VS Code/Code-OSS/VSCodium!!!

Installation Guide

Follow these steps to apply the settings to your VS Code, Code-OSS, or VSCodium:

1. Install Required Extensions

  • Open VS Code/Code-OSS/VSCodium and navigate to the Extensions view by pressing Ctrl + Shift + X.
  • Search and install the following extensions:
    • Ayu Theme: For the Ayu Dark theme.
    • Material Icon Theme: For modern file and folder icons.

2. Open User Settings

  • Open the Command Palette with Ctrl + Shift + P and type Preferences: Open User Settings (JSON).
  • This will open your settings file in JSON format.

3. Copy and Paste Settings

  • Copy the provided settings configuration and paste it into the JSON file, replacing any existing settings.

4. Save the Settings

  • Save the file by pressing Ctrl + S. The changes will be applied automatically.

5. Restart VS Code/Code-OSS/VSCodium

  • Restart your editor to ensure all settings and themes are correctly applied.

Troubleshooting

  • If the theme does not change, make sure the Ayu theme is correctly installed and selected in the settings via File > Preferences > Color Theme.
  • Ensure all extensions are up-to-date to avoid compatibility issues.

JSON File

Workbench Settings

{
    "workbench.colorTheme": "Ayu Dark",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "none",
    "workbench.tree.enableStickyScroll": false,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "git.autofetch": true,
    "tabnine.experimentalAutoImports": true,
    "workbench.activityBar.location": "top",
    "editor.language.colorizedBracketPairs": [],
    "workbench.preferredHighContrastColorTheme": "Ayu Dark Bordered",
    "workbench.preferredHighContrastLightColorTheme": "Ayu Light",
    "workbench.preferredLightColorTheme": "Ayu",
    "window.menuBarVisibility": "toggle",
    "workbench.editor.centeredLayoutFixedWidth": true,
    "editor.fontWeight": "500",
    "editor.fontVariations": false,
    "editor.tokenColorCustomizations": {
        "[Ayu Dark]": {}
    },
    "git.ignoreRebaseWarning": true,
    "go.toolsManagement.autoUpdate": true
}
Enter fullscreen mode Exit fullscreen mode

Terminal Settings

{
 "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.smoothScrolling": true,
  "terminal.integrated.cursorStyleInactive": "none",
  "terminal.integrated.fontFamily": "monospace",
  "terminal.integrated.fontWeight": "normal",
  "terminal.integrated.lineHeight": 1.1,
  "terminal.integrated.gpuAcceleration": "auto",
  "terminal.integrated.scrollback": 1000,
  "terminal.integrated.focusAfterRun": "terminal",
  "terminal.integrated.tabs.defaultColor": "terminal.ansiBlack",
  "terminal.integrated.tabs.title": "${sequence}",

  // ----------------------------------------------
  // Custom Colors and Theming
  // ----------------------------------------------
  "workbench.colorCustomizations": {
    "[Ayu Dark]": {
      "terminal.foreground": "#E6E1CF",
      "terminalCursor.foreground": "#FFA500",
      "terminalCursor.background": "#E6E1CF",
      "terminal.ansiBlack": "#3C3F58",
      "terminal.ansiBlue": "#39BAE6",
      "terminal.ansiCyan": "#95E6CB",
      "terminal.ansiGreen": "#a7ca71",
      "terminal.ansiMagenta": "#C792EA",
      "terminal.ansiRed": "#F07178",
      "terminal.ansiWhite": "#F8F8F2",
      "terminal.ansiYellow": "#FFCB6B",
      "terminal.ansiBrightBlack": "#5A5A76",
      "terminal.ansiBrightBlue": "#39BAE6",
      "terminal.ansiBrightCyan": "#95E6CB",
      "terminal.ansiBrightGreen": "#C3E88D",
      "terminal.ansiBrightMagenta": "#C792EA",
      "terminal.ansiBrightRed": "#F07178",
      "terminal.ansiBrightWhite": "#F8F8F2",
      "terminal.ansiBrightYellow": "#FFCB6B",
      "editorCursor.foreground": "#FF8C00",
      "editorCursor.background": "#E6E1CF"
    },
    "terminal.background": "#00000000"
  },
  "terminal.integrated.confirmOnKill": "editor",
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
md_jobair_86c38ca462dc9ec profile image
MD Jobair

cool customization!!!!