pop-n-lock-theme-vscode

Pop N' Lock Theme by Luxcium ✨

About

Your favourite streamlined code editor is getting more bright and radiant, optimized to work in the Full-fledged Integrated Development Environment or in Text Editor sized mode. The colours have been handpicked with great care to be the most intuitive possible and to use extensively all capacity of your favourite IDE and text editor. This powerful theme of colour is always evolving. Colourful features are added and more languages will be included soon. This theme is STRONGLY OPINIONATED so make sure to request any changes you want by filling an issue if you want to be influencing the opinion.

This theme is based on the designs of Hedinne's Popping And Locking a theme with vivid colours, they capture your attention but are easy on your eyes. His theme originally based on VS Dark+, Gruvbox Dark and One Dark has changed a lot since. It is designed with TypeScript grammar and web languages syntax in mind like HTML & CSS (Also includes support for JavaScript, JSON, YAML, React's JSX/TSX and more to come).

🐲 Perfectly balanced TypeScript theme with vivid colours

If you like this theme take one minute to make a 5-star review on VS Code marketplace and if you think something can be improved make sure to fill an issue on our GitHub page it's easy and will help us make Pop N' Lock the best theme available

Please feel free to ask any question, to let us know about any problems that should be resolved and any improvement you would like to see by filing an issue on our GitHub page.

You will be impressed how intutive it is when you will discover how each colour has its purpose

(v3.18)

This theme includes other extensions† (you can enable or disable them as you wish) :
(v3.18)

• better-comments
• bracket-pair-colorizer-2
• material-icon-theme

TypeScript

(v3.18) TypeScript Screenshot

(v3.18) TypeScript Screenshot

(v3.18.2) TypeScript Screenshot

JavaScript

(v3.18) JavaScript Screenshot

JSON

(v3.18) JSON Screen shot

YAML

(v3.18) YAML Screen shot

TSX/JSX

(v3.18) JSX & TSX Screenshot

CSS

<img width="80%" alt="[CSS]" src="https://raw.githubusercontent.com/luxcium/pop-n-lock-theme-vscode/master/images/v3.12.0/visual-studio-code-theme-CSS-2.png)
(v3.12.0) CSS Screen shot

BASH and SHELL Scripting

(v3.18)

FUNCTION RETURN TYPE

(v3.18) Colorfull function return type highlight

VARIABLE HIGHLIGHT

red on writing side / blue on the reading side

(v3.18) Usefull variable highlight

Decorator support

(v3.18) Typescript decorator support

Latest TypeScript / Javascript Grammar

Promise functions highlight

When using Latest Typescipt Grammar

(v3.18) When using Latest Typescipt Grammar Promise dot all and promise resolve and catch highlight

Console highlight

When using Latest Typescipt Grammar

(v3.18) When using Latest Typescipt Grammar support console.log / conso.error etc. highlight

IMPORTS

When using appropriate font the italics are treated as cursive

Fira Code iScript

Fira Code

Will fall back to usig italic if the font doese not include support
(v3.18)

For better results use apropriate fonts and icons theme

Material Icon Theme

Options and settings

Set highlightModifiedTabs to true in your settings.json "workbench.editor.highlightModifiedTabs": true

Set the editor.rulers: [80, 120, 121] in vscode settings

(v3.9.5) editor.rulers setting Screenshot

Suggested extensions

• Alphabetical Sorter (not included anymore)
• Better Comments†
• Bracket Pair Colorizer 2†
• ErrorLens
• Material Icon Theme†
• Prettier - Code formatter
• Statusbar error
• TSLint

†Included as an Extension Pack with this theme

Make sure to set encoding of your config file to utf8

{
  "workbench.colorTheme": "Pop N' Lock Theme by Luxcium ✨",

  "files.encoding": "utf8",
  "files.autoGuessEncoding": false,

  "workbench.editor.highlightModifiedTabs": true,

  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.showReloadMessage": true,
  "editor.fontFamily": "Fira Code iScript, Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.suggestFontSize": 16
}

The name of the theme contain emoticon and encoding must be set to "utf8"

Adjust these settings to your pleasing :

{
  "workbench.colorTheme": "Pop N' Lock Theme by Luxcium ✨",

  "files.encoding": "utf8",
  "files.autoGuessEncoding": false,

  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.showReloadMessage": true,
  "editor.fontFamily": "Fira Code iScript, LigaFantasqueSansMono",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.suggestFontSize": 16,

  "editor.rulers": [80, 120, 121],
  "editor.wordWrapColumn": 80,
  "html.format.wrapLineLength": 120,

  "editor.showFoldingControls": "mouseover",
  "editor.renderControlCharacters": true,
  "editor.renderWhitespace": "boundary",
  "workbench.activityBar.visible": true,
  "breadcrumbs.enabled": true,
  "editor.minimap.enabled": true,
  "workbench.statusBar.visible": true,
  "workbench.editor.showTabs": true,
  "workbench.sideBar.location": "left",
  "explorer.openEditors.visible": 5,
  "explorer.sortOrder": "type",

  "terminal.integrated.fontFamily": "TerminessTTF NF,MesloLGL Nerd Font,CQ Mono",
  "terminal.integrated.letterSpacing": 1,
  "terminal.integrated.fontSize": 18,
  "terminal.integrated.cursorStyle": "block",
  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,
  "editor.scrollBeyondLastColumn": 2,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "prettier.tslintIntegration": true,
  "prettier.requireConfig": true,
  "git.enableSmartCommit": true,
  "window.newWindowDimensions": "inherit",
  "window.zoomLevel": 0,
  "editor.glyphMargin": true,
  "git.autofetch": true
}

JS/TS Each section of code have a specific colour signature (v3.15.5)

(v3.15.5) JS/TS Each section of code have a specific colour signature

(v3.11.1) TypeScript Screenshot

Originally based on:

• Hedinne's Popping And Locking (VSCode Theme)
  • Morhetz's Gruvbox
  • Jdinhlife's Gruvbox (VSCode Theme)

---

The Luxcium Owl logo is a trademark of NeB_401.Corp LTEE (all right reserved)