[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-5":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},5,"vscode-dark-islands","bwya77\u002Fvscode-dark-islands","bwya77","VSCode theme based off the easemate IDE and Jetbrains islands theme",null,"https:\u002F\u002Fgithub.com\u002Fbwya77\u002Fvscode-dark-islands","PowerShell",8576,274,15,11,0,23,164,38.32,false,"main",[23,24,25,26,27],"jetbrains","vscode","vscode-theme","visual-studio-code","easemate","2026-06-12 02:00:06","# Islands Dark\n\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fbwya77\" style=\"margin-right: 10px;\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBuy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbwya77\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fsponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA\" \u002F>\n\u003C\u002Fa>\n\n\nA dark color theme for Visual Studio Code inspired by the easemate IDE. Features floating glass-like panels, rounded corners, smooth animations, and a deeply refined UI.\n\n- [easemate](https:\u002F\u002Fx.com\u002Feasemate)\n- [easemate Nav](https:\u002F\u002Fx.com\u002FJakubantalik\u002Fstatus\u002F1952672176450215944)\n- [easemate effects](https:\u002F\u002Fx.com\u002Faaroniker\u002Fstatus\u002F1989727838992539655)\n\n\n![Islands Dark Screenshot](assets\u002FCleanShot%202026-02-19%20at%2019.37.59@2x.png)\n\n## Features\n\n- Deep dark canvas (`#131217`) with floating panels\n- Glass-effect borders with directional light simulation (brighter top\u002Fleft, subtle bottom\u002Fright)\n- Rounded corners on all panels, notifications, command palette, and sidebars\n- Pill-shaped activity bar with glass selection indicators\n- Breadcrumb bar and status bar that dim when not hovered\n- Tab close buttons that fade in on hover\n- Smooth transitions on sidebar selections, scrollbars, and status bar\n- Pill-shaped scrollbar thumbs\n- Color-matched icon glow effect (works best with [Seti Folder](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=l-igh-t.vscode-theme-seti-folder) icon theme)\n- Warm syntax highlighting with comprehensive language support (JS\u002FTS, Python, Go, Rust, HTML\u002FCSS, JSON, YAML, Markdown)\n- IBM Plex Mono in the editor, FiraCode Nerd Font Mono in the terminal\n\n![Islands Dark Screenshot UI](assets\u002FCleanShot%202026-02-14%20at%2021.45.00@2x.png)\n\n## Installation\n\nThis theme has two parts: a **color theme** and **CSS customizations** that create the floating glass panel look.\n\n### One-Liner Install (Recommended)\n\nThe fastest way to install:\n\n#### macOS\u002FLinux\n\n```bash\ncurl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002Fbwya77\u002Fvscode-dark-islands\u002Fmain\u002Fbootstrap.sh | bash\n```\n\n#### Windows\n\n```powershell\nirm https:\u002F\u002Fraw.githubusercontent.com\u002Fbwya77\u002Fvscode-dark-islands\u002Fmain\u002Fbootstrap.ps1 | iex\n```\n\n### Manual Clone Install\n\nIf you prefer to clone first:\n\n#### macOS\u002FLinux\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fbwya77\u002Fvscode-dark-islands.git islands-dark\ncd islands-dark\n.\u002Finstall.sh\n```\n\n#### Windows\n\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fbwya77\u002Fvscode-dark-islands.git islands-dark\ncd islands-dark\n.\\install.ps1\n```\n\nThe scripts will automatically:\n- ✅ Install the Islands Dark theme extension\n- ✅ Install the Custom UI Style extension\n- ✅ Install Bear Sans UI fonts\n- ✅ Back up your existing settings and apply Islands Dark settings\n- ✅ Enable Custom UI Style and reload VS Code\n\n> **Note:** IBM Plex Mono and FiraCode Nerd Font Mono must be installed separately (the script will remind you).\n\n### Nix Flake Install\n\nIf you use Nix, you can run a pre-configured instance of VS Code (or VSCodium) with the theme, extensions, and fonts already bundled.\n\nTo run it directly without installing:\n\n```bash\n# Run VS Code\nnix run github:bwya77\u002Fvscode-dark-islands#vscode\n\n# Or run VSCodium\nnix run github:bwya77\u002Fvscode-dark-islands#vscodium\n```\n\nTo use it in your NixOS or Home Manager configuration, add it to your flake inputs:\n\n```nix\n{\n  inputs.islands-dark.url = \"github:bwya77\u002Fvscode-dark-islands\";\n\n  outputs = { self, nixpkgs, islands-dark, ... }: {\n    # Then you can add and use it:\n    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscode\n    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscodium\n  };\n}\n```\n\n> **Note:** The Nix flake automatically includes the **Custom UI Style** extension, **Seti Folder** icon theme, and all required fonts (**Bear Sans UI**, **IBM Plex Mono**, and **FiraCode Nerd Font**). It will also copy the recommended `settings.json` on the first run.\n\n### Manual Installation\n\nIf you prefer to install manually, follow these steps:\n\n#### Step 1: Install the theme\n\nClone this repo and copy the extension files:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fbwya77\u002Fvscode-dark-islands.git islands-dark\ncd islands-dark\nmkdir -p ~\u002F.vscode\u002Fextensions\u002Fbwya77.islands-dark-1.0.0\ncp package.json ~\u002F.vscode\u002Fextensions\u002Fbwya77.islands-dark-1.0.0\u002F\ncp -r themes ~\u002F.vscode\u002Fextensions\u002Fbwya77.islands-dark-1.0.0\u002F\n```\n\nOn Windows (PowerShell):\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fbwya77\u002Fvscode-dark-islands.git islands-dark\ncd islands-dark\n$ext = \"$env:USERPROFILE\\.vscode\\extensions\\bwya77.islands-dark-1.0.0\"\nNew-Item -ItemType Directory -Path $ext -Force\nCopy-Item package.json $ext\\\nCopy-Item themes $ext\\themes -Recurse\n```\n\n#### Step 2: Install the Custom UI Style extension\n\nThe floating panels, rounded corners, glass borders, and animations are powered by the **Custom UI Style** extension.\n\n1. Open **Extensions** in VS Code: (`Cmd+Shift+X` \u002F `Ctrl+Shift+X`)\n2. Search for **Custom UI Style** (by `subframe7536`)\n3. Click **Install**\n\n#### Step 3: Install recommended icon theme\n\nFor the best experience with the color-matched icon glow effect, install the **Seti Folder** icon theme:\n\n1. Open **Extensions** in VS Code (`Cmd+Shift+X` \u002F `Ctrl+Shift+X`)\n2. Search for **[Seti Folder](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=l-igh-t.vscode-theme-seti-folder)** (by `l-igh-t`)\n3. Click **Install**\n4. Set it as your icon theme: **Command Palette** > **Preferences: File Icon Theme** > **Seti Folder**\n\n#### Step 5: Install fonts\n\nThis theme uses two fonts:\n\n- **IBM Plex Mono** — used in the editor\n- **FiraCode Nerd Font Mono** — used in the terminal\n- **Bear Sans UI** — used in the sidebar, tabs, command center, and status bar (included in `fonts\u002F` folder)\n\nTo install Bear Sans UI:\n1. Open the `fonts\u002F` folder in this repo\n2. Select all `.otf` files and double-click to open in Font Book (macOS) or right-click > Install (Windows)\n\nIf you prefer different fonts, update the `editor.fontFamily`, `terminal.integrated.fontFamily`, and `font-family` values in the settings.\n\n#### Step 6: Apply the settings\n\nCopy the contents of `settings.json` from this repo into your VS Code: settings:\n\n1. Open **Command Palette** (`Cmd+Shift+P` \u002F `Ctrl+Shift+P`)\n2. Search for **Preferences: Open User Settings (JSON)**\n3. Merge the contents of this repo's `settings.json` into your settings file\n\n> **Note:** If you already have existing settings, merge carefully. The key settings are `workbench.colorTheme`, `custom-ui-style.stylesheet`, and the font\u002Findent preferences.\n\n#### Step 7: Enable Custom UI Style\n\n1. Open **Command Palette** (`Cmd+Shift+P` \u002F `Ctrl+Shift+P`)\n2. Run **Custom UI Style: Enable**\n3. VS Code will reload\n\n> **Note:** You may see a \"corrupt installation\" warning after enabling. This is expected since Custom UI Style injects CSS into VS Code. Click the gear icon on the warning and select **Don't Show Again**.\n\n## What the CSS customizations do\n\n| **Element** | **Effect** |\n|-------------|------------|\n| **Canvas** | Deep dark background (`--islands-bg-canvas`) behind all panels |\n| **Sidebar** | Floating with rounded corners (`--islands-panel-radius`), glass borders, drop shadow |\n| **Editor** | Floating with rounded corners (`--islands-panel-radius`), glass borders, browser-tab effect |\n| **Activity bar** | Pill-shaped with glass inset shadows, circular selection indicator |\n| **Command center** | Pill-shaped with glass effect |\n| **Bottom panel** | Floating with rounded corners (`--islands-panel-radius`), glass borders |\n| **Right sidebar** | Floating with rounded corners (`--islands-panel-radius`), glass borders |\n| **Notifications** | Rounded corners (`--islands-widget-radius`), glass borders, deep drop shadow |\n| **Command palette** | Rounded corners (`--islands-widget-radius`), glass borders, rounded list rows |\n| **Scrollbars** | Pill-shaped thumbs with fade transition |\n| **Tabs** | Browser-tab style (active tab open at bottom), close button fades in on hover |\n| **Breadcrumbs** | Hidden until hover with smooth fade transition |\n| **Status bar** | Dimmed text that brightens on hover |\n| **File icons** | Color-matched glow via drop-shadow (best with Seti Folder icon theme) |\n\n## Customization\n\nAll key visual properties are controlled by CSS custom properties defined at the top of the `custom-ui-style.stylesheet` in `settings.json`. Edit the variables on `.monaco-workbench` to quickly adjust the look:\n\n```json\n\".monaco-workbench\": {\n    \"--islands-panel-radius\": \"24px\",\n    \"--islands-widget-radius\": \"14px\",\n    \"--islands-input-radius\": \"12px\",\n    \"--islands-item-radius\": \"6px\",\n    \"--islands-panel-gap\": \"8px\",\n    \"--islands-panel-top\": \"8px\",\n    \"--islands-bg-canvas\": \"#121216\",\n    \"--islands-bg-surface\": \"#181a1d\",\n    \"background-color\": \"var(--islands-bg-canvas) !important\"\n}\n```\n\n### Colors\n\n| **Variable** | **Default** | **Applies to** |\n|--------------|-------------|----------------|\n| `--islands-bg-canvas` | `#121216` | Deep background behind all panels (workbench, title bar, status bar, activity bar) |\n| `--islands-bg-surface` | `#181a1d` | Panel\u002Fsurface background (chat input, editor widgets) |\n\nThese two colors define the theme's depth. The canvas is the darker base layer visible between panels, while the surface is the slightly lighter color used for interactive elements. To override the theme's panel colors (sidebar, editor, terminal backgrounds), use VS Code's `workbench.colorCustomizations` in your settings.\n\n### Border Radius\n\n| **Variable** | **Default** | **Applies to** |\n|--------------|-------------|----------------|\n| `--islands-panel-radius` | `24px` | Sidebar, editor, terminal\u002Fbottom panel, auxiliary bar |\n| `--islands-widget-radius` | `14px` | Notifications, chat input, command palette |\n| `--islands-input-radius` | `12px` | Search bars, SCM commit input, buttons, hover tooltips |\n| `--islands-item-radius` | `6px` | List rows, tabs, pane headers, terminal tabs |\n\nFor example, to make everything sharper, set all values to `8px`. For a fully rounded look, try `32px` \u002F `20px` \u002F `16px` \u002F `8px`. Pill-shaped elements (activity bar, scrollbar thumbs, command center, badges) are not affected by these variables.\n\n### Panel Spacing\n\n| **Variable** | **Default** | **Applies to** |\n|--------------|-------------|----------------|\n| `--islands-panel-gap` | `8px` | Horizontal spacing between sidebar, editor, chat\u002Fauxiliary bar, terminal, and notifications |\n| `--islands-panel-top` | `8px` | Top margin of panels (space below the title bar) |\n\nIncrease to `12px` or `16px` for a more spaced-out layout, or reduce to `4px` for a tighter look.\n\n## Troubleshooting\n\n### Changes aren't taking effect\nTry disabling and re-enabling Custom UI Style:\n1. **Command Palette** > **Custom UI Style: Disable**\n2. Reload VS Code\n3. **Command Palette** > **Custom UI Style: Enable**\n4. Reload VS Code\n\n### \"Corrupt installation\" warning\nThis is expected after enabling Custom UI Style. Dismiss it or select **Don't Show Again**.\n\n### Previously used \"Custom CSS and JS Loader\" extension\nIf you previously used the **Custom CSS and JS Loader** extension (`be5invis.vscode-custom-css`), it may have injected CSS directly into VS Code's `workbench.html` that persists even after disabling. If styles conflict, reinstall VS Code to get a clean `workbench.html`, then use only **Custom UI Style**.\n\n## Uninstalling\n\nRun the uninstall script to restore your VS Code to its previous state:\n\n**macOS\u002FLinux:**\n```bash\n# If you still have the repo cloned:\ncd islands-dark\n.\u002Funinstall.sh\n\n# Or download and run directly:\ncurl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002Fbwya77\u002Fvscode-dark-islands\u002Fmain\u002Funinstall.sh | bash\n```\n\n**Windows (PowerShell):**\n```powershell\n# If you still have the repo cloned:\ncd islands-dark\n.\\uninstall.ps1\n\n# Or download and run directly:\nirm https:\u002F\u002Fraw.githubusercontent.com\u002Fbwya77\u002Fvscode-dark-islands\u002Fmain\u002Funinstall.ps1 | iex\n```\n\nThe uninstall script will:\n- Restore your previous settings from the `settings.json.pre-islands-dark` backup\n- Remove the Islands Dark theme extension\n- Unregister the extension from VS Code\n\nAfter running the script, you'll need to:\n1. Open **Command Palette** (`Cmd+Shift+P` \u002F `Ctrl+Shift+P`) and run **Custom UI Style: Disable**\n2. Open **Command Palette** and search **Preferences: Color Theme** to select a new theme\n3. Reload VS Code\n\n## Credits\n\nInspired by the [JetBrains Islands Dark](https:\u002F\u002Fwww.jetbrains.com\u002F) UI theme.\n\n## License\n\nMIT\n","Islands Dark 是一个为 Visual Studio Code 设计的深色主题，灵感来源于 easemate IDE 和 JetBrains 的岛屿主题。其核心功能包括浮动玻璃效果面板、圆角设计、平滑动画以及深度优化的用户界面。技术特点涵盖模拟方向光的玻璃边框、活动栏和状态栏的智能亮度调节、以及与多种编程语言兼容的温暖语法高亮。该主题适用于追求美观且高效编码环境的开发者，特别适合长时间使用 VSCode 进行开发工作的场景。",2,"2026-06-11 02:30:25","trending"]