├── README.md ├── codingphase-style.css ├── list-of-all-vs-code-extensions.md ├── settings.json └── thumb.png /README.md: -------------------------------------------------------------------------------- 1 | # CodingPhase VS Code Style 2 | ![enter image description here](https://github.com/codingphasedotcom/codingphase-style-vs-code/blob/main/thumb.png?raw=true) 3 | ## Why? 4 | I took my time to share my vs code settings because I always get asked what vs code theme you use? and my answer is always it's too long to explain... so now you guys can come here and have the exact same theme and settings I use. 5 | 6 | ## Credit 7 | CodingPhase Style is inspired and based on two different themes created by **[Codevars](https://github.com/codevars)** and **[thecodemonkey](https://github.com/thecodemonkey)**. My job here is to be the glue bring the best features of both themes and add my own styles. In the future I will be making this into it's own VS Code Theme and will continue to give credit to these great developers. 8 | 9 | ## Like it and want to support? 10 | Just Subscribe to [Youtube channel CodingPhase](https://www.youtube.com/codingphase) and visit the site [CodingPhase.com](https://codingphase.com) if you looking to learn to code. 11 | 12 | ## Instructions 13 | 14 | 1. Give this repo a star and also [outrun-meets-synthwave-repo](https://marketplace.visualstudio.com/items?itemName=codevars.outrun-meets-synthwave) + [synthwave-x-fluoromachine-epic-animations-repo](https://github.com/thecodemonkey/synthwave-x-fluoromachine-epic-animations) (If Not This Won't Work For You LOL Come On Guys it's free) 15 | 2. Install vs code extension [Outrun Meets Synthwave](https://marketplace.visualstudio.com/items?itemName=codevars.outrun-meets-synthwave) 16 | 3. Install vs code extension [Bearded Icons](https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedicons) 17 | 4. Install vs code extension [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) 18 | 5. Download Mononoki and Fira Code from [Nerd Fonts](https://www.nerdfonts.com/font-downloads)(mononki it's the one I use super clean) but if you want ligatures arrows then use Fira Code) 19 | 6. on vs code open up the user settings cmd + p then search for user settings and copy the settings on the settings.json file from this repo ( if you want it exactly like mines paste it at the bottom if you don't want to override your own settings then paste it at the top of file) 20 | 7. Replace the `vscode_custom_css.imports` depending your operative system, and add your user or file location in your VS Code `settings.json` 21 | ```js 22 | On Mac: 23 | 24 | { 25 | "vscode_custom_css.imports": [ 26 | "file:///Users/{your username}/.vscode/extensions/codevars.outrun-meets-synthwave-0.0.1/synthWaveStyles.css" 27 | ] 28 | } 29 | 30 | Windows: 31 | 32 | { 33 | "vscode_custom_css.imports": [ 34 | "file:///C:/Users/{your username}/.vscode/extensions/codevars.outrun-meets-synthwave-0.0.1/synthWaveStyles.css" 35 | ] 36 | } 37 | 38 | Linux: 39 | { 40 | "vscode_custom_css.imports": [ 41 | "file:///home/{your username}/.vscode/extensions/codevars.outrun-meets-synthwave-0.0.1/synthWaveStyles.css" 42 | ] 43 | } 44 | ``` 45 | 8. Copy and paste the css inside of the `codingphase-style.css` file and replace the styles inside the `synthWaveStyles.css` file 46 | 47 | -------------------------------------------------------------------------------- /codingphase-style.css: -------------------------------------------------------------------------------- 1 | 2 | /* SYNTH WAVE ORIGINAL STYLES */ 3 | 4 | /* Active dots */ 5 | .monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { 6 | background: linear-gradient(45deg,#fc28a8, #03edf9) !important; 7 | } 8 | 9 | /* Active tab */ 10 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active { 11 | box-shadow: inset 0 -5px 25px #09005d25; 12 | position: relative; 13 | } 14 | 15 | /* Active tab stripe */ 16 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -1px; 20 | left: 0; 21 | right: 0; 22 | height: 4px; 23 | background: linear-gradient(to right, #fc28a8, #03edf9) !important; 24 | opacity: 1; 25 | z-index: 6; 26 | } 27 | 28 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit::after { 29 | content: ''; 30 | position: absolute; 31 | bottom: -1px; 32 | left: 0; 33 | right: 0; 34 | height: 0px; 35 | transition: opacity 1s; 36 | opacity: 0; 37 | z-index: 6; 38 | } 39 | 40 | /* Active sidebar item */ 41 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked { 42 | box-shadow: inset 0 -5px 25px #09005d25; 43 | position: relative; 44 | } 45 | 46 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked::after { 47 | content: ''; 48 | position: absolute; 49 | bottom: 0px; 50 | top: 0px; 51 | left: 0px; 52 | width: 4px; 53 | background: linear-gradient(to bottom, #fc28a8, #03edf9) !important; 54 | opacity: 1; 55 | } 56 | 57 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item::after { 58 | content: ''; 59 | position: absolute; 60 | bottom: 0px; 61 | top: 0px; 62 | left: 0px; 63 | width: 0px; 64 | transition: opacity 1s; 65 | opacity: 0; 66 | } 67 | 68 | /* update lightbuld to be neon */ 69 | .lightbulb-glyph { 70 | background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important; 71 | filter: drop-shadow(0 0 5px #03edf9); 72 | } 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | /* CodingPhase settings */ 83 | .mtk3, .mtk6 { 84 | color: #687d97; 85 | text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633; 86 | } 87 | .mtk8, .mtk9 { 88 | font-style: italic; 89 | } 90 | 91 | .mtk7, .mtk10 { 92 | color: #fc199a; 93 | 94 | } 95 | .mtk7:hover, .mtk10:hover { 96 | color: #fc199a; 97 | text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a, 0 0 2px #fc199a; 98 | } 99 | 100 | 101 | .mtk10 { 102 | font-style: italic; 103 | } 104 | 105 | 106 | .editor-container { 107 | position: relative; 108 | overflow: hidden; 109 | } 110 | 111 | .editor-group-container:after{ 112 | content:''; 113 | height:300px; 114 | width:100%; 115 | display:block; 116 | background-image:linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px); 117 | background-position:bottom; 118 | background-repeat:repeat; 119 | background-size:20px 20px; 120 | left: -25px; 121 | position: absolute; 122 | pointer-events: none; 123 | bottom: 0; 124 | transform: perspective(100px) rotateX(60deg); 125 | z-index: 0; 126 | } 127 | .editor-group-container { 128 | position: relative; 129 | overflow: hidden; 130 | } 131 | 132 | /* .monaco-editor > .overflow-guard > .monaco-scrollable-element:before { */ 133 | .monaco-editor:before, .editor-group-container:before { 134 | background-image: repeating-linear-gradient(to bottom, transparent 0 ,transparent 2px, #FFF 2px, #FFF 4px); 135 | background-size: 100% 4px cover; 136 | transform-origin: 50% 50%; 137 | content: ''; 138 | opacity: 0.02; 139 | position: absolute; 140 | top: 0; 141 | left: 0; 142 | right: 0; 143 | bottom: 0; 144 | } 145 | 146 | /* .monaco-editor .overflow-guard .margin { 147 | background: #210A33; 148 | } */ 149 | 150 | canvas { 151 | z-index: 2; 152 | } 153 | 154 | .minimap-slider { 155 | z-index: 3; 156 | background: #fc199a33 !important; 157 | } 158 | 159 | .minimap.slider-mouseover { 160 | z-index: 1; 161 | } 162 | 163 | /* Sweet sunset dots */ 164 | .monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { 165 | background: linear-gradient(to bottom, #fff951 25%, #fc28a8); 166 | } 167 | 168 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit::after { 169 | content: ''; 170 | position: absolute; 171 | bottom: -1px; 172 | left: 0; 173 | right: 0; 174 | height: 0px; 175 | transition: opacity 1s; 176 | opacity: 0; 177 | } 178 | 179 | /* Active sidebar item */ 180 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked { 181 | box-shadow: inset 0 -5px 25px #fc28a825; 182 | position: relative; 183 | } 184 | 185 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked::after { 186 | content: ''; 187 | position: absolute; 188 | bottom: 0px; 189 | top: 0px; 190 | left: 0px; 191 | width: 4px; 192 | background: linear-gradient(to bottom, #fc28a8, #03edf9) !important; 193 | opacity: 1; 194 | } 195 | 196 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item::after { 197 | content: ''; 198 | position: absolute; 199 | bottom: 0px; 200 | top: 0px; 201 | left: 0px; 202 | width: 0px; 203 | transition: opacity 1s; 204 | opacity: 0; 205 | } 206 | 207 | /* Active tab neon */ 208 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active { 209 | position: relative; 210 | --tab-border-bottom-color: transparent !important; 211 | } 212 | 213 | /* Active tab stripe */ 214 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active::before { 215 | content: ''; 216 | position: absolute; 217 | bottom: -1px; 218 | left: 0; 219 | right: 0; 220 | height: 4px; 221 | background: linear-gradient(to right, #fc28a8, #03edf9) !important; 222 | } 223 | 224 | /* update lightbulb to be neon */ 225 | .lightbulb-glyph { 226 | background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important; 227 | filter: drop-shadow(0 0 5px #03edf9); 228 | } 229 | 230 | .monaco-editor .cursor { 231 | background: linear-gradient(to bottom, #8a2dc0, #fc28a8); 232 | box-shadow: 0 0 5px #fc199a; 233 | border-color: #8a2dc0; 234 | color: #241b2f; 235 | } 236 | 237 | .monaco-inputbox>.wrapper>textarea.input::selection { 238 | background-color:rgba(255,255,255,0.3); 239 | } 240 | 241 | .monaco-editor .line-numbers { 242 | color: #8a2dc066; 243 | text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #8a2dc066, 0 0 2px #8a2dc066; 244 | } 245 | 246 | .monaco-list .monaco-list-rows { 247 | background: rgba(36,27,47) !important; 248 | } 249 | 250 | .monaco-list-row.focused, .monaco-list-row.selected { 251 | background-color: #8a2dc033 !important; 252 | } 253 | 254 | .explorer-folders-view span[title~="emphasized"], .monaco-icon-label[title~="emphasized"]::after { 255 | color: #fc199a; 256 | } 257 | 258 | .explorer-folders-view span[title~="problems"], .monaco-icon-label[title~="problems"]::after { 259 | color: #ffcc00; 260 | } 261 | 262 | .vs-dark .monaco-scrollable-element>.scrollbar>.slider { 263 | background: rgb(153, 99, 255); 264 | opacity: 0.5; 265 | } 266 | 267 | 268 | /* EPIC 80s Transitions */ 269 | 270 | @import url('https://fonts.googleapis.com/css2?family=Tourney:ital,wght@1,100&display=swap'); 271 | 272 | 273 | /* hover flip specials */ 274 | 275 | 276 | .mtk8, .mtk9, .mtk3, .mtk6, .mtk7, .mtk10 { 277 | display: inline-block; 278 | 279 | transition: .4s transform; 280 | /* transform: rotateX(0); */ 281 | } 282 | 283 | 284 | .mtk8:hover, .mtk9:hover, .mtk3:hover, .mtk6:hover, .mtk7:hover, .mtk10:hover { 285 | text-shadow: 2 2 7px; 286 | transform: scale(1.08); 287 | } 288 | 289 | 290 | /* end of hover flip specials */ 291 | 292 | 293 | /* tooltips */ 294 | 295 | .monaco-editor .monaco-hover { 296 | background-color: #262335; 297 | display: block!important; 298 | padding: 20px; 299 | transition: opacity 1s !important; 300 | opacity: 1; 301 | animation: tooltippulse 4s infinite linear; 302 | } 303 | 304 | .monaco-editor .monaco-hover.hidden { 305 | opacity: 0; 306 | } 307 | 308 | @keyframes tooltippulse { 309 | 0% { 310 | box-shadow: 0 0 0 0 rgba(255, 0, 242, 0); 311 | } 312 | 50% { 313 | box-shadow: 0 0 85px 0 rgba(0, 217, 255, 0.5); 314 | } 315 | 100% { 316 | box-shadow: 0 0 0 0 rgba(255, 0, 242, 0); 317 | } 318 | } 319 | 320 | .monaco-editor .monaco-hover::after { 321 | content: ''; 322 | position: absolute; 323 | bottom: -1px; 324 | left: 0; 325 | right: 0; 326 | height: 4px; 327 | background-size: 200% 200%; 328 | width: 100%; 329 | background-image: linear-gradient(to right, #fc28a8, #03edf9, #fc28a8, #03edf9, #fc28a8); 330 | 331 | animation: neonline 2s infinite; 332 | } 333 | 334 | @keyframes neonline { 335 | 0% { 336 | background-position: 0% 50%; 337 | } 338 | 100% { 339 | background-position: 100% 50%; 340 | } 341 | } 342 | 343 | 344 | 345 | /* end of tooltips */ 346 | 347 | 348 | /* tabs */ 349 | 350 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active::before { 351 | 352 | animation: neonline2 2s infinite; 353 | background-size: 200% 200%!important; 354 | width: 100%; 355 | background-image: linear-gradient(to right, #fc28a8, #03edf9, #fc28a8, #03edf9, #fc28a8)!important; 356 | } 357 | 358 | @keyframes neonline2 { 359 | 0% { 360 | background-position: 0% 50%; 361 | } 362 | 100% { 363 | background-position: 100% 50%; 364 | } 365 | } 366 | 367 | /* end of tabs */ 368 | 369 | 370 | .monaco-editor .selected-text { 371 | background-color: #000000aa!important; 372 | box-shadow: 0 0 35px 5px #ff008d55; 373 | color: #fff!important; 374 | } 375 | 376 | 377 | .monaco-editor .cursor { 378 | box-shadow: 0 0 15px 2px #00c3ff; 379 | animation: cursor 2s infinite linear; 380 | } 381 | 382 | 383 | .editor-group-container:after { 384 | animation: flight 2s infinite linear; 385 | } 386 | 387 | .view-line .inline-folded:after { 388 | color:yellow; 389 | border-radius: 5px; 390 | animation: colapse .5s linear; 391 | } 392 | 393 | 394 | 395 | .monaco-editor .line-numbers.active-line-number { 396 | color: turquoise; 397 | text-shadow: 0 0 1px yellow!important; 398 | } 399 | 400 | 401 | 402 | 403 | /* canvas.minimap-decorations-layer { 404 | background-color: transparent !important; 405 | background-image: linear-gradient(to bottom, #200933 75%, #3d0b43); 406 | background-size: auto 100vh; 407 | background-position: top; 408 | background-repeat: no-repeat; 409 | } */ 410 | 411 | .monaco-editor .minimap-shadow-visible { 412 | box-shadow: none!important; 413 | } 414 | 415 | 416 | 417 | 418 | 419 | @keyframes colapse { 420 | 0% { 421 | background-color:yellow; 422 | box-shadow: 0 0 5px 0 yellow; 423 | } 424 | 70% { 425 | background-color: yellow; 426 | box-shadow: 0 0 35px 10px yellow; 427 | } 428 | 100% { 429 | background-color: transparent; 430 | } 431 | } 432 | 433 | @keyframes cursor { 434 | 0% { 435 | box-shadow: 0 0 5px 0 #00c3ff; 436 | } 437 | 100% { 438 | box-shadow: 0 0 35px 5px #00c3ff; 439 | } 440 | } 441 | 442 | @keyframes flight { 443 | 0% { 444 | transform: perspective(100px) rotateX(60deg) translateY(0px); 445 | } 446 | 100% { 447 | transform: perspective(100px) rotateX(60deg) translateY(20px); 448 | } 449 | } 450 | 451 | 452 | 453 | .editor-container::after { 454 | display: flex; 455 | align-items: center; 456 | align-content: center; 457 | justify-content: center; 458 | 459 | /* content: 'do epic shit...'; */ 460 | content: ' '; 461 | font-weight: bold; 462 | font-size: 5em; 463 | font-family: 'Tourney', cursive; 464 | 465 | color: #fc28a822; 466 | position: absolute; 467 | bottom: 40px; 468 | width: 100%; 469 | overflow-x: hidden; 470 | height: 120px; 471 | 472 | 473 | text-shadow: 0 0 30px #fc28a8; 474 | 475 | animation: cnt 10s infinite linear; 476 | 477 | 478 | 479 | } 480 | 481 | @keyframes cnt { 482 | 0% { 483 | bottom: 150px; 484 | font-size: 0.1em; 485 | color: #fc28a822; 486 | text-shadow: 0 0 5px #fc28a811; 487 | } 488 | 100% { 489 | bottom: -400px; 490 | font-size: 20em; 491 | color: #fc28a855; 492 | text-shadow: 0 0 30px #fc28a8; 493 | } 494 | } 495 | -------------------------------------------------------------------------------- /list-of-all-vs-code-extensions.md: -------------------------------------------------------------------------------- 1 | 2 | - aaronyoung.dark-synthwave-vscode-1.0.1 3 | - avarayr.synthwave-refined-0.0.4 4 | - avetis.tokyo-night-1.0.1 5 | - be5invis.vscode-custom-css-7.1.0 6 | - beardedbear.beardedicons-1.2.0 7 | - bmewburn.vscode-intelephense-client-1.8.2 8 | - bradlc.vscode-tailwindcss-0.9.1 9 | - christojohnsonv.dark-horizon-v1-0.0.1 10 | - cjhowe7.laravel-blade-1.1.2 11 | - codevars.outrun-meets-synthwave-0.0.1 12 | - dbaeumer.vscode-eslint-2.2.6 13 | - digitalstreamio.mjml-syntax-0.0.1 14 | - dracula-theme.theme-dracula-2.24.2 15 | - eliverlara.sweet-vscode-icons-0.0.1 16 | - enkia.tokyo-night-0.9.4 17 | - equinusocio.vsc-material-theme-icons-2.4.0 18 | - esbenp.prettier-vscode-9.9.0 19 | - file-icons.file-icons-1.0.29 20 | - graphql.vscode-graphql-0.8.1 21 | - graphql.vscode-graphql-execution-0.1.5 22 | - graphql.vscode-graphql-syntax-1.0.4 23 | - kokororin.vscode-phpfmt-1.0.31 24 | - mehedidracula.php-namespace-resolver-1.1.9 25 | - mjmlio.vscode-mjml-1.0.5 26 | - ms-vscode-remote.remote-containers-0.255.4 27 | - onecentlin.laravel-blade-1.32.0 28 | - phu1237.vs-browser-2.0.9 29 | - proxzima.sweetdracula-1.0.8 30 | - qinjia.seti-icons-0.1.3 31 | - rapidapi.vscode-rapidapi-client-1.6.0 32 | - ritwickdey.liveserver-5.7.9 33 | - robbowen.synthwave-vscode-0.1.14 34 | - shopify.polaris-for-vscode-0.2.0 35 | - shuffle-dev.shuffle-dev-1.0.4 36 | - sldobri.bunker-1.1.6 37 | - tal7aouy.icons-3.6.0 38 | - thecodemonkey.synthwave-x-fluoromachine-epic-animations-1.4.13 39 | - vscode-icons-team.vscode-icons-12.0.1 40 | - webrender.synthwave-x-fluoromachine-0.0.12 41 | - whizkydee.material-palenight-theme-2.0.2 42 | 43 | 44 | -------------------------------------------------------------------------------- /settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vscode_custom_css.imports": [ 3 | "file:///Users/codingphase/.vscode/extensions/codevars.outrun-meets-synthwave-0.0.1/synthWaveStyles.css", 4 | ], 5 | "editor.fontLigatures": true, 6 | "workbench.tree.indent": 20, 7 | "workbench.colorTheme": "Outrun Night Meets Synthwave", 8 | "editor.fontSize": 20, 9 | "editor.fontFamily": "\"Fira Code\",\"mononoki Nerd Font\", Menlo, Monaco, 'Courier New', monospace", 10 | "editor.cursorSmoothCaretAnimation": "on", 11 | "editor.cursorBlinking": "expand", 12 | "editor.lineHeight": 2.5, 13 | "editor.fontWeight": "normal", 14 | "editor.cursorStyle": "line-thin", 15 | "window.zoomLevel": 1, 16 | "terminal.external.linuxExec": "iterm", 17 | "terminal.integrated.fontSize": 20, 18 | "workbench.iconTheme": "aut-icons", 19 | "editor.wordWrap": "on", 20 | "editor.accessibilitySupport": "off", 21 | "editor.parameterHints.enabled": false, 22 | "editor.suggest.snippetsPreventQuickSuggestions": false, 23 | "html.suggest.html5": false, 24 | "editor.hover.enabled": false, 25 | "workbench.sideBar.location": "right", 26 | "terminal.integrated.env.osx": { 27 | "CW_NEW_SESSION": "1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingphasedotcom/codingphase-style-vs-code/d65f33e3eccefd37dac7f7d3c84c99030c6a0aac/thumb.png --------------------------------------------------------------------------------