A Visual Studio Code theme based on color combinations from Oceanic Next replaced and customized with Tailwind CSS color palette.
Almost every color you find is using a Tailwind color, except some rare cases, I couldn't test and may appear default VSCode color.
I did my best for providing good contrast in almost all combinations possible, fulfilling AA contrast ratio requirements.
- Choose Extensions from menu
- Search
Oceanic Wind - Click install
- Code -> Preferences -> Color Theme -> Oceanic Wind
I like the default font family Consolas used in Windows with a font size of 16. Another combination I also like is Cascadia Code with ligatures. Font family is a personal decision, use whatever you are used to:
"workbench.colorCustomizations": {
"[Oceanic Wind]": {
"editor.bracketPairColorization.enabled": true,
"editor.fontLigatures": true,
"editor.fontFamily": "Cascadia Code, Consolas, 'Courier New', monospace",
"editor.lineHeight": 1.5,
"editor.fontSize": 15,
"editor.letterSpacing": 0.2,
"editor.fontWeight": "normal"
}
You can overwrite colors for a given theme in VSCode settings. I have created different set of colors to provide accent color to VSCode, if you would like to try another color instead of blue for the accent of your IDE, you can use these different combinations:
If you want to use an accent color, but the selection color is too powerful, you can use a neutral color:
"workbench.colorCustomizations": {
"[Oceanic Wind]": {
"editor.selectionBackground": "#334155"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Cool]": {
"editor.selectionBackground": "#334155"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Warm]": {
"editor.selectionBackground": "#334155"
}
}
Sidebar, tabs, and editor have the same background, if you would like to try with darker color for sidebar and tabs you can try these combinations:
"workbench.colorCustomizations": {
"[Oceanic Wind]": {
"editorGroupHeader.tabsBackground": "#18181b",
"tab.inactiveBackground": "#18181b",
"tab.unfocusedInactiveBackground": "#18181b",
"sideBar.background": "#18181b",
"activityBar.background": "#27272a"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Cool]": {
"editorGroupHeader.tabsBackground": "#0f172a",
"tab.inactiveBackground": "#0f172a",
"tab.unfocusedInactiveBackground": "#0f172a",
"sideBar.background": "#0f172a",
"activityBar.background": "#1e293b"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Warm]": {
"editorGroupHeader.tabsBackground": "#1c1917",
"tab.inactiveBackground": "#1c1917",
"tab.unfocusedInactiveBackground": "#1c1917",
"sideBar.background": "#1c1917",
"activityBar.background": "#292524"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind]": {
"editor.background": "#18181b",
"editorGutter.background": "#18181b"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Cool]": {
"editor.background": "#0f172a",
"editorGutter.background": "#0f172a"
}
}
"workbench.colorCustomizations": {
"[Oceanic Wind Warm]": {
"editor.background": "#1c1917",
"editorGutter.background": "#1c1917"
}
}
I have tested this theme focused on my day-to-day workflow, with HTML, CSS, Javascript, Typescript and developing with frameworks such as Angular, Vue and React. Furthermore, I have tried with files you can find in demo folder (thanks to Wes Bos and Sarah Drasner).
If you find something amiss, you have any suggestion or improvement, please feel free to open and issue. I'm sure there are things I missed.
I am not a designer, so any help or feedback would be really appreciated.
- Sarah Drasner, I picked up some ideas from her blog post about creating themes. I also copied files from her demo folder on Night Owl theme.
- Wes Bos, I grabbed some demo examples from his Cobalt2 theme.
- Tailwind CSS team, I used their beautiful color palette to choose every color in this theme.