Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>OCMS ThemeNew to Visual Studio Code? Get it now.
OCMS Theme

OCMS Theme

Brenno Fruhauf

|
327 installs
| (3) | Free
One color, many shades theme collection for Visual Studio Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

OCMS Theme OCMS Theme

Your VS Code with your favorite color.

Table of Contents

  • OCMS Theme
    • Color Themes
    • Previews
    • Add Your Custom Theme
    • Installation
    • Configuration Suggestion
    • Feedback

Color Themes

Theme Name Color HEX
OCMS Pink Sherbet #f68d9b #F68D9B
OCMS Red #ff0000 #FF0000
OCMS Electric Crimson #ff0040 #FF0040
OCMS Vivid Raspberry #ff0073 #FF0073
OCMS Vivid Violet #9d00ff #9D00FF
OCMS Electric Indigo #6200ff #6200FF
OCMS Blue #0800ff #0800FF
OCMS Brandeis Blue #006aff #006AFF
OCMS Vivid Sky Blue #00ccff #00CCFF
OCMS Sea Green (Crayola) #00ffd0 #00FFD0
OCMS Medium Spring Green #00ff99 #00FF99
OCMS Guppie Green #00ff73 #00FF73
OCMS Electric Green #00ff04 #00FF04
OCMS Spring Bud #aaff00 #AAFF00
OCMS Lemon Glacier #f2ff00 #F2FF00
OCMS Cyber Yellow #ffd000 #FFD000
OCMS Orange Peel #ff9d00 #FF9D00
OCMS Blaze Orange #ff6a00 #FF6A00
OCMS Orange (Aerospace) #ff4d00 #FF4D00
OCMS Conquelicot #ff3700 #FF3700

Previews

OCMS Pink Sherbet

OCMS Red

OCMS Electric Crimson

OCMS Vivid Raspberry

OCMS Vivid Violet

OCMS Electric Indigo

OCMS Blue

OCMS Brandeis Blue

OCMS Vivid Sky Blue

OCMS Sea Green (Crayola)

OCMS Medium Spring Green

OCMS Guppie Green

OCMS Electric Green

OCMS Spring Bud

OCMS Lemon Glacier

OCMS Cyber Yellow

OCMS Orange Peel

OCMS Blaze Orange

OCMS Orange (Aerospace)

OCMS Conquelicot

Add Your Custom Theme

  1. Clone the repository to your local machine:
git clone https://github.com/BrennoFruhauf/ocms-theme.git
  1. Open themes.ts and configure your theme. Example:
const schemes: Theme[] = [
  {
    // Name of your theme.
    name: 'your-theme-name', 

    // Your favorite color.
    color: '#FFF000',

    // "light" or "dark" scheme.
    scheme: "dark",

    // (Optional) Background Color. Default value is [#131313](https://github.com/brennofruhauf/ocms-theme/issues/131313).
    background: '#292200',

    // (Optional) Overwrite properties. Use Hex Alpha color or Color Object.
    override: {}
  }
]
  1. Run the npm run build script to create your JSON.
  2. To debug, add your theme to package.json and press F5:
"contributes": {
  "themes": [
    {
      // Name of your theme.
      "label": "Your Theme Name",

      // "vs", "vs-dark", "hc-black" or "hc-light".
      "uiTheme": "vs-dark",

      // Path of your JSON file.
      "path": "./themes/${scheme}/${your-theme-name}.json"
    }
  ]
}

If you want me to add it to the collection, please open a request with the generated theme data.

Installation

  1. Click Ctrl + Shift + X or ⌘ + Shift + X to Open Extensions sidebar panel in Visual Studio Code.
  2. Search for OCMS Theme
  3. Click Install.
  4. Click Ctrl + Shift + P or ⌘ + Shift + P to Show Command Palette.
  5. Type theme and choose Preferences: Color Theme.
  6. Choose your favorite color theme.

Configuration Suggestion

  1. Click Ctrl + Shift + P or ⌘ + Shift + P and Open Preferences: Open User Settings (JSON).
  2. Download and install Fira Code Font.
"editor.tabSize": 2,
"editor.fontSize": 13,
"editor.lineHeight": 1.8,
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  1. Install Symbols Extension.
"workbench.iconTheme": "symbols",
"symbols.hidesExplorerArrows": false,
  1. Install Fluent Icons Extension.
"workbench.productIconTheme": "fluent-icons",
  1. Install APC Customize UI++ Extension.
"apc.header": {
  "height": 36
},
"apc.listRow": {
  "height": 26
},
"apc.electron": {
  "frame": false,
  "titleBarStyle": "hidden"
},
"apc.stylesheet": {
  ".pane-header": "padding: 0 8px;",
  ".title-label > h2": "display: none",
  ".monaco-list-row": "border-radius: 4px;",
  ".nosidebar .inline-tabs-placeholder": "width: 75px;",
  ".monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center": "display: none !important;",
},
  1. The following properties don't require any extensions.
"workbench.tree.indent": 8,
"breadcrumbs.enabled": false,
"workbench.sideBar.location": "right",
"workbench.editor.labelFormat": "short",
"workbench.startupEditor": "newUntitledFile",

"editor.rulers": [80, 120],
"editor.insertSpaces": false,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.cursorBlinking": "expand",
"editor.scrollbar.vertical": "hidden",
"editor.renderLineHighlight": "gutter",
"editor.scrollbar.horizontal": "hidden",
"editor.cursorSmoothCaretAnimation": "on",
"editor.semanticHighlighting.enabled": false,
"editor.guides.bracketPairsHorizontal": false,
"editor.bracketPairColorization.enabled": false,

"explorer.compactFolders": false,
"explorer.fileNesting.enabled": true,
"explorer.confirmDragAndDrop": false,
"explorer.sortOrder": "foldersNestsFiles",
"explorer.fileNesting.patterns": {
  ".env": ".env*",
  ".env.local": ".env*",
  "tailwind.config*": "tailwind.config*, postcss.config*",
  "package.json": ".eslint*, prettier*, tsconfig*, vite*, pnpm-lock*, bun.lockb, nest*, package-lock*",
},

Feedback

If you have suggestions, please open an issue or better yet, a pull request.


Divider

Created with ❤️ by Brenno Fruhauf.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft