📋 Table of Contents
✨ Features
- 🎨 Beautiful dark theme inspired by Lilo's brand colors
- 👀 Optimized for long coding sessions
- 🖥️ Supports all major programming languages
- 🎯 Perfect for Lilo developers
- 🌙 Two variants: Standard and Soft
Description
This is the non-official Lilo Theme for Visual Studio Code, inspired by the Lilo brand colors.
🎨 Preview
Base Theme
Soft Variant
🎨 Color Palette
This theme uses a teal/cyan primary palette and neutral gray secondary palette derived from the Lilo brand:
| Role |
Color |
Hex |
Preview |
| Background |
Near Black |
#161618 |
 |
| Foreground |
Off White |
#eff0f2 |
 |
| Selection |
Teal Selection |
#009a9c3d |
 |
| Comments |
Muted Gray |
#676a6a |
 |
| Cyan |
Cyan Highlight |
#3de5e8 |
 |
| Green |
Deep Teal |
#007670 |
 |
| Orange |
Warm Gold |
#E89B4C |
 |
| Pink |
Magenta |
#D06B9F |
 |
| Purple |
Soft Violet |
#9B8AE0 |
 |
| Red |
Error Red |
#E85757 |
 |
| Yellow |
Mint Tint |
#b2f5f3 |
 |
UI Variants
| Variable |
Hex |
Purpose |
| BGDarker |
#0c0c0d |
Darkest |
| BGDark |
#161618 |
Near Black |
| BG |
#161618 |
Main editor background |
| BGLight |
#363838 |
Light panels |
| BGLighter |
#545656 |
Hover states |
ANSI Terminal Colors
| ANSI |
Name |
Hex |
Bright Hex |
| 0/8 |
Black |
#161618 |
#676a6a |
| 1/9 |
Red |
#E85757 |
#F07070 |
| 2/10 |
Green |
#00afb4 |
#00c5ce |
| 3/11 |
Yellow |
#E8C857 |
#F0D870 |
| 4/12 |
Blue |
#9B8AE0 |
#B0A0F0 |
| 5/13 |
Magenta |
#D06B9F |
#E080B0 |
| 6/14 |
Cyan |
#3de5e8 |
#7beeee |
| 7/15 |
White |
#eff0f2 |
#f1f3f5 |
🚀 Installation
VS Code Marketplace
Open VSX Registry
🎨 Using the Theme
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P)
- Type "Preferences: Color Theme" and press Enter
- Search for "Lilo Theme"
- Select either "Lilo Theme" or "Lilo Theme (Soft)" from the list
Recommended Settings
For the best experience, add these to your settings.json:
{
"workbench.colorTheme": "Lilo Theme",
"editor.fontFamily": "'Victor Mono', Monaco, Menlo, 'Courier New', monospace",
"editor.fontSize": 16,
"editor.lineHeight": 1.5,
"editor.fontWeight": "600",
"editor.wordWrap": "on",
}
🎨 Theme Variants
- Lilo Theme - Vibrant, high-contrast version with the full Lilo color experience
- Lilo Theme (Soft) - Muted, desaturated version for reduced eye strain during long coding sessions
🛠 Development
Prerequisites
Setup
# Install dependencies
pnpm install
# Build the theme
pnpm run build
# Package the extension
pnpm run package
Project Structure
├── src/
│ └── lilo.yml # Theme source file (YAML)
├── theme/
│ ├── lilo.json # Generated theme
│ └── lilo-soft.json
├── scripts/
│ ├── build.js # Build script
│ └── generate.js # Theme generator
└── images/
└── icon.png # Extension icon
🤝 Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to:
- Open an issue
- Submit a pull request
- Share your feedback
📬 Stay Updated
For updates, star this repository and follow me on GitHub.
💖 Credits
- Inspired by the beautiful Lilo brand colors and design
- Special thanks to the VS Code community for their amazing theming support
- This theme is based on the Dracula Theme schema, with colors adapted from the Lilo brand palette featuring tropical/beach aesthetics.
- Thanks to all contributors who help improve this theme
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
