Last active
October 9, 2025 02:06
-
-
Save lamnguyenx/b79b5b47d1dee7b730e86dd9696e4a98 to your computer and use it in GitHub Desktop.
Custom CSS for VSCode - Color-coded Git Changes & UI Enhancements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| A personalized VSCode theme focused on: | |
| - Consistent typography (Consolas) | |
| - Better visual hierarchy in Git/Source Control | |
| - Custom styling for buttons and UI elements | |
| - Enhanced visibility for submodules and embedded content | |
| Works with both VSCode and Coder/code-server | |
| */ | |
| .linux, .mac { | |
| font-family: Consolas !important; | |
| } | |
| .folder-icon { | |
| font-weight: bold !important; | |
| } | |
| .monaco-inputbox { | |
| width: 100% !important; | |
| } | |
| .explorer-folders-view { | |
| font-family: Consolas; | |
| font-size: 14px; | |
| } | |
| .monaco-button { | |
| background-color: #f000 !important; | |
| border: solid 1px #ffffff4f !important; | |
| } | |
| .monaco-button-dropdown-separator { | |
| background-color: #ffffff4f !important; | |
| } | |
| .monaco-button-dropdown-separator>div { | |
| opacity: 0; | |
| } | |
| .monaco-list-row[aria-label='Staged Changes'] .monaco-tl-contents { | |
| background-color: #74916b !important; | |
| color: black !important; | |
| } | |
| .monaco-list-row[aria-label='Changes'] .monaco-tl-contents { | |
| background-color: #7b7857 !important; | |
| color: black !important; | |
| } | |
| .output img { | |
| background-color: white !important; | |
| } | |
| .__submodules__-name-dir-icon, | |
| .__submodules__-name-dir-icon, | |
| .__submodules_heavy__-name-dir-icon, | |
| .__submodules_heavy__-name-dir-icon { | |
| color: white !important; | |
| background: rgba(100, 185, 9, .33) !important | |
| } | |
| .__submodules__-name-dir-icon:after, | |
| .__submodules__-name-dir-icon:after, | |
| .__submodules_heavy__-name-dir-icon:after, | |
| .__submodules_heavy__-name-dir-icon:after { | |
| color: white !important; | |
| } | |
| iframe * { color : red !important;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment