By the end of this lesson, you will:
Definition: Advanced customization goes beyond pre-made themes. It's about crafting your unique visual identity that reflects your personality while maximizing productivity.
Different colors affect your brain differently:
Color | Effect | Best For |
---|---|---|
Blue | Focus, calm | Long coding sessions |
Green | Easy on eyes | Syntax highlighting |
Purple | Creativity | Design work |
Orange | Energy | Debugging |
Pink | Inspiration | Frontend/UI work |
Build your own theme from scratch:
// themes/your-vibe-theme.json
{
"name": "Your Vibe Theme",
"type": "dark",
"colors": {
"editor.background": "#0a0e1a",
"editor.foreground": "#ffffff",
"activityBar.background": "#1a1f3a",
"sideBar.background": "#151829",
"statusBar.background": "#2d3748",
"terminal.background": "#0a0e1a",
// Custom accent colors
"editorCursor.foreground": "#ff00ff",
"editor.selectionBackground": "#ff006630",
"editor.lineHighlightBackground": "#ffffff08",
// Syntax colors
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "comment",
"settings": {
"foreground": "#6A9955",
"fontStyle": "italic"
}
},
{
"scope": "keyword",
"settings": {
"foreground": "#C586C0",
"fontStyle": "bold"
}
}
]
}
}
}
Design your terminal colors:
# ~/.config/alacritty/alacritty.yml
colors:
primary:
background: '#0a0e1a'
foreground: '#ffffff'
cursor:
text: '#0a0e1a'
cursor: '#ff00ff'
normal:
black: '#1e2132'
red: '#ff6b83'
green: '#a3d977'
yellow: '#ffd93d'
blue: '#57c7ff'
magenta: '#ff84cd'
cyan: '#9ce5f4'
white: '#ffffff'
bright:
black: '#3c4260'
red: '#ff9fb3'
green: '#c3f097'
yellow: '#ffe66d'
blue: '#87d7ff'
magenta: '#ffb4ed'
cyan: '#bcf5ff'
white: '#ffffff'
Triadic Color Schemes:
Popular Dev Palettes:
Font ligatures combine characters into single glyphs for better readability:
// Without ligatures
if (x >= y && y <= z) {
return x => x + 1;
}
// With ligatures (visual representation)
if (x ≥ y && y ≤ z) {
return x → x + 1;
}
// VS Code settings.json
{
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.letterSpacing": 0.8,
"editor.fontWeight": "400",
// Font variants
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "comment",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "keyword.control",
"settings": {
"fontStyle": "bold"
}
}
]
}
}
# macOS - Install font family
brew tap homebrew/cask-fonts
brew install --cask font-jetbrains-mono
brew install --cask font-victor-mono
# Linux
wget -O JetBrainsMono.zip https://github.com/JetBrains/JetBrainsMono/releases/latest/download/JetBrainsMono.zip
unzip JetBrainsMono.zip -d ~/.local/share/fonts/
fc-cache -f -v
# Windows
# Download from GitHub releases and install via Font Settings
Create dynamic prompts with live data:
# Add to ~/.zshrc or ~/.bashrc
function animated_prompt() {
local colors=("31" "32" "33" "34" "35" "36")
local color=${colors[$RANDOM % ${#colors[@]}]}
# Animated git status
if git rev-parse --git-dir > /dev/null 2>&1; then
local branch=$(git branch --show-current)
local changes=$(git status --porcelain | wc -l)
echo -e "\033[${color}m⚡ ${branch} \033[0m($changes changes)"
fi
# System stats
local load=$(uptime | grep -o "load average.*" | cut -d' ' -f3)
local battery=$(pmset -g batt | grep -o '[0-9]*%' | head -1)
echo -e "\033[36m🔋 ${battery} 📊 ${load}\033[0m"
}
# Add to prompt
PS1="$(animated_prompt)\n$ "
Create the iconic Matrix effect:
#!/bin/bash
# matrix.sh - Add to your terminal startup
matrix() {
echo -e "\033[32m"
while true; do
echo $((RANDOM % 2))
sleep 0.1
done | while read i; do
if [[ $i == 1 ]]; then
echo -ne "\033[32m█"
else
echo -ne "\033[32m░"
fi
done
}
# Run in background
matrix &
Beautiful system stats in terminal:
# Install prerequisites
npm install -g vtop
brew install htop neofetch
# Custom neofetch config
neofetch --config ~/.config/neofetch/config.conf
Add particles to your typing:
// particles.js for terminal
const particles = [];
function createParticle(x, y) {
particles.push({
x: x,
y: y,
life: 20,
char: String.fromCharCode(Math.random() * 26 + 97)
});
}
function updateParticles() {
particles.forEach((particle, i) => {
particle.life--;
if (particle.life <= 0) {
particles.splice(i, 1);
}
});
}
Visual Effects:
{
"extensions": [
"RobbOwen.synthwave-vscode",
"hoovercj.vscode-power-mode",
"oderwat.indent-rainbow",
"CoenraadS.bracket-pair-colorizer-2",
"aaron-bond.better-comments",
"PKief.material-icon-theme",
"file-icons.file-icons"
]
}
Advanced Power Mode:
{
"powermode.enabled": true,
"powermode.presets": "particles",
"powermode.combo.counterEnabled": true,
"powermode.combo.timerEnabled": true,
"powermode.shake.enabled": false,
"powermode.explosions.size": 15,
"powermode.explosions.maxExplosions": 3,
"powermode.explosions.frequency": 2,
"powermode.explosions.explosionOrder": "random"
}
Enable custom CSS in VS Code:
/* custom-vscode.css */
.monaco-editor .cursor {
background: linear-gradient(45deg, #ff0066, #00ffff);
box-shadow: 0 0 20px #ff0066;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 20px #ff0066; }
50% { box-shadow: 0 0 30px #ff0066, 0 0 40px #00ffff; }
100% { box-shadow: 0 0 20px #ff0066; }
}
.monaco-editor .selected-text {
background: linear-gradient(45deg, #ff006650, #00ffff50);
border-radius: 3px;
}
.monaco-workbench {
background-image:
radial-gradient(circle at 20% 50%, #ff006610 0%, transparent 50%),
radial-gradient(circle at 80% 20%, #00ffff10 0%, transparent 50%);
}
{
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.decorationsEnabled": true,
"editor.minimap.showSlider": "always",
"workbench.colorCustomizations": {
"minimap.background": "#0a0e1a80",
"minimapSlider.activeBackground": "#ff006650",
"minimapSlider.hoverBackground": "#ff006630"
}
}
Sync terminal colors with audio:
# audio_terminal.py
import pyaudio
import numpy as np
import os
def get_audio_level():
chunk = 1024
p = pyaudio.PyAudio()
stream = p.open(format=pyaudio.paInt16, channels=1, rate=44100, input=True)
data = np.frombuffer(stream.read(chunk), dtype=np.int16)
level = np.sqrt(np.mean(data**2))
stream.stop_stream()
stream.close()
p.terminate()
return level
def set_terminal_color(level):
if level > 1000:
os.system('echo -e "\\033[31m"') # Red for high
elif level > 500:
os.system('echo -e "\\033[33m"') # Yellow for medium
else:
os.system('echo -e "\\033[32m"') # Green for low
# Run continuously
while True:
level = get_audio_level()
set_terminal_color(level)
time.sleep(0.1)
Sync VS Code themes with music:
// music-sync.js (VS Code extension)
const vscode = require('vscode');
const { exec } = require('child_process');
function getCurrentSong() {
exec('osascript -e "tell application \\"Spotify\\" to name of current track"',
(error, stdout) => {
if (!error) {
updateThemeBasedOnSong(stdout.trim());
}
});
}
function updateThemeBasedOnSong(song) {
const config = vscode.workspace.getConfiguration();
if (song.includes('chill') || song.includes('lofi')) {
config.update('workbench.colorTheme', 'Tokyo Night', true);
} else if (song.includes('electronic') || song.includes('synthwave')) {
config.update('workbench.colorTheme', 'Synthwave \'84', true);
}
}
{
"scenes": {
"main": {
"sources": [
{
"name": "VS Code",
"type": "window_capture",
"filters": [
"chroma_key",
"color_correction",
"sharpness"
]
},
{
"name": "Terminal Overlay",
"type": "window_capture",
"transform": {
"position": { "x": 1200, "y": 600 },
"scale": 0.7,
"opacity": 0.9
}
},
{
"name": "Webcam",
"type": "video_capture_device",
"transform": {
"position": { "x": 1500, "y": 50 },
"scale": 0.3
},
"filters": ["chroma_key", "blur"]
}
]
}
}
}
Create HTML overlays for streaming:
{/* coding-overlay.html */}
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
body {
font-family: 'JetBrains Mono', monospace;
background: transparent;
color: #ffffff;
margin: 0;
padding: 0;
}
.stats-overlay {
position: fixed;
top: 20px;
right: 20px;
background: rgba(10, 14, 26, 0.9);
border: 2px solid #ff0066;
border-radius: 10px;
padding: 20px;
backdrop-filter: blur(10px);
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 0 20px #ff0066; }
to { box-shadow: 0 0 30px #ff0066, 0 0 40px #00ffff; }
}
.stat-item {
display: flex;
justify-content: space-between;
margin: 10px 0;
font-size: 14px;
}
.stat-value {
color: #00ffff;
font-weight: bold;
}
.music-display {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(10, 14, 26, 0.9);
border: 2px solid #00ffff;
border-radius: 10px;
padding: 15px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 15px;
}
.equalizer {
display: flex;
align-items: end;
gap: 3px;
}
.bar {
width: 4px;
background: linear-gradient(to top, #ff0066, #00ffff);
animation: bounce 0.8s infinite;
border-radius: 2px;
}
@keyframes bounce {
0%, 100% { height: 10px; }
50% { height: 25px; }
}
</style>
</head>
<body>
<div class="stats-overlay">
<div class="stat-item">
<span>Lines Today:</span>
<span class="stat-value" id="lines">0</span>
</div>
<div class="stat-item">
<span>Commits:</span>
<span class="stat-value" id="commits">0</span>
</div>
<div class="stat-item">
<span>WPM:</span>
<span class="stat-value" id="wpm">0</span>
</div>
<div class="stat-item">
<span>Focus Time:</span>
<span class="stat-value" id="focus">0:00</span>
</div>
</div>
<div class="music-display">
<div class="equalizer">
<div class="bar" style="animation-delay: 0s;"></div>
<div class="bar" style="animation-delay: 0.1s;"></div>
<div class="bar" style="animation-delay: 0.2s;"></div>
<div class="bar" style="animation-delay: 0.3s;"></div>
<div class="bar" style="animation-delay: 0.4s;"></div>
</div>
<div>
<div style="font-size: 16px; color: #00ffff;">🎵 Now Playing</div>
<div id="song-title" style="font-size: 14px;">Lofi Hip Hop - Study Beats</div>
</div>
</div>
<script>
// Update stats dynamically
function updateStats() {
document.getElementById('lines').textContent = Math.floor(Math.random() * 1000);
document.getElementById('commits').textContent = Math.floor(Math.random() * 50);
document.getElementById('wpm').textContent = Math.floor(Math.random() * 100);
}
setInterval(updateStats, 5000);
</script>
</body>
</html>
# Create dotfiles repository
mkdir ~/dotfiles
cd ~/dotfiles
# Backup configurations
cp ~/.zshrc .
cp ~/.gitconfig .
cp ~/.vimrc .
cp -r ~/.config/alacritty .
# Version control
git init
git add .
git commit -m "💎 Initial dotfiles backup"
// VS Code keybindings.json
[
{
"key": "ctrl+shift+t",
"command": "workbench.action.terminal.new",
"when": "!terminalFocus"
},
{
"key": "ctrl+shift+p",
"command": "workbench.action.showCommands"
},
{
"key": "ctrl+shift+x",
"command": "workbench.view.extensions"
}
]
# ~/.zshrc aliases
alias gc="git commit -m"
alias gp="git push origin"
alias gl="git log --oneline --graph"
alias ll="ls -la"
alias ..="cd .."
alias ...="cd ../.."
alias code.="code ."
alias serve="python3 -m http.server 8000"
# Development environment
export EDITOR="code"
export BROWSER="chrome"
export TERMINAL="alacritty"
# Custom paths
export PATH="$HOME/.local/bin:$PATH"
export PATH="/usr/local/bin:$PATH"
# Development shortcuts
export PROJECTS="$HOME/Projects"
export DOTFILES="$HOME/.dotfiles"
Remember: Your setup should be:
The best setup is one that makes you excited to code while keeping you in flow state for hours.
Your development environment should be your digital sanctuary - a place where creativity and productivity flourish together!