✨ Add cream theme (#117)

* ✨ Add `cream` theme
* 📝 Update agents
* 📝 Update readme screenshots
* 📝 Update readme gif
* 📝 Update readme imports

Author: carloscuesta

AGENTS.md

@@ -8,7 +8,7 @@ This document provides a comprehensive overview of the Sprinkles VSCode theme pr
 
 ### Key Features
 
-- Dark and light theme variants
+- Dark, light and cream theme variants
 - Comprehensive syntax highlighting for multiple languages
 - Carefully designed UI colors for VSCode interface elements
 - Terminal color customization
@@ -23,11 +23,13 @@ sprinkles-vscode/
 ├── src/                    # Source code
 │   ├── colors/            # Color palette definitions
 │   │   ├── index.ts      # Color loader/selector
+│   │   ├── cream.ts      # Cream theme color palette
 │   │   ├── dark.ts       # Dark theme color palette
 │   │   └── light.ts      # Light theme color palette
 │   ├── theme.ts           # Theme generator (main logic)
 │   └── index.ts           # Build script entry point
 ├── themes/                # Generated theme JSON files (output)
+│   ├── sprinkles-cream.json
 │   ├── sprinkles-dark.json
 │   └── sprinkles-light.json
 ├── images/                # Extension assets (icon)
@@ -65,7 +67,7 @@ sprinkles-vscode/
 
 - Entry point for theme generation
 - Creates `themes/` directory if it doesn't exist
-- Generates both dark and light theme JSON files
+- Generates dark, light and cream theme JSON files
 - Writes formatted JSON output with proper error handling
 
 #### 2. **src/theme.ts**
@@ -84,6 +86,7 @@ sprinkles-vscode/
 - `index.ts`: Exports color getter function based on variant
 - `dark.ts`: Dark theme color definitions
 - `light.ts`: Light theme color definitions
+- `cream.ts`: Cream theme color definitions
 - Color structure includes:
   - Canvas colors (UI elements)
   - Editor colors (code editor specific)
@@ -143,8 +146,6 @@ Uses nodemon to watch `src/` directory and rebuild on changes.
 
 ### Testing the Theme
 
-#### Method 1: Debug Mode
-
 1. Open project in VSCode
 2. Press `F5` or go to Run & Debug panel
 3. Select "Extension" configuration
@@ -154,13 +155,6 @@ Uses nodemon to watch `src/` directory and rebuild on changes.
 7. Select "Preferences: Color Theme"
 8. Choose "Sprinkles Dark" or "Sprinkles Light"
 
-#### Method 2: Local Installation
-
-```bash
-npm run publish:vsce -- --no-publish
-code --install-extension sprinkles-vscode-*.vsix
-```
-
 ### Code Quality
 
 ```bash
@@ -218,6 +212,7 @@ npx prettier --write .
 1. Edit color palettes:
    - Dark: `src/colors/dark.ts`
    - Light: `src/colors/light.ts`
+   - Cream: `src/colors/cream.ts`
 
 2. Rebuild:
 

README.md

@@ -9,7 +9,7 @@
 
 </div>
 
-<img src="https://res.cloudinary.com/carloscuesta/image/upload/v1747600526/sprinkles-vscode_axuznh.gif" alt="sprinkles-vscode" width="1600">
+<img src="https://res.cloudinary.com/carloscuesta/image/upload/v1766532574/sprinkles-vscode/sprinkles-vscode.gif" alt="sprinkles-vscode" width="1600">
 
 ## Install
 
@@ -40,17 +40,22 @@ You can import the theme anywhere by installing it as a dependency:
 ```js
 import dark from "sprinkles-vscode/themes/sprinkles-dark.json";
 import light from "sprinkles-vscode/themes/sprinkles-light.json";
+import cream from "sprinkles-vscode/themes/sprinkles-cream.json";
 ```
 
 ## Screenshots
 
 ### Dark
 
-<img width="1512" alt="Sprinkles Theme VSCode Dark" src="https://res.cloudinary.com/carloscuesta/image/upload/v1747600141/sprinkles-dark_xhjgjh.png">
+<img width="1512" alt="Sprinkles Theme VSCode Dark" src="https://res.cloudinary.com/carloscuesta/image/upload/v1766531729/sprinkles-vscode/dark.png">
 
 ### Light
 
-<img width="1512" alt="Sprinkles Theme VSCode Light" src="https://res.cloudinary.com/carloscuesta/image/upload/v1747600141/sprinkles-light_ojcoxw.png">
+<img width="1512" alt="Sprinkles Theme VSCode Light" src="https://res.cloudinary.com/carloscuesta/image/upload/v1766531729/sprinkles-vscode/light.png">
+
+## Cream
+
+<img width="1512" alt="Sprinkles Theme VSCode Cream" src="https://res.cloudinary.com/carloscuesta/image/upload/v1766531728/sprinkles-vscode/cream.png">
 
 ## Colors
 

package.json

@@ -33,6 +33,11 @@
         "label": "Sprinkles Light",
         "uiTheme": "vs",
         "path": "./themes/sprinkles-light.json"
+      },
+      {
+        "label": "Sprinkles Cream",
+        "uiTheme": "vs",
+        "path": "./themes/sprinkles-cream.json"
       }
     ]
   },

src/colors/cream.ts

@@ -0,0 +1,87 @@
+export default {
+  canvas: {
+    background: {
+      default: "#f5f1e8",
+      defaultHover: "#ebe7de",
+      defaultActive: "#ebe7de",
+      overlay: "#f5f1e8",
+    },
+    foreground: {
+      default: "#24292f",
+      muted: "#9DA5AE",
+      opacity: "#9DA5AE46",
+      highlight: "#097ADA",
+    },
+    invisible: "#f7f4ec00",
+    border: {
+      default: "#c8c4bb",
+      inset: "#dedad1",
+      overlay: "#dedad1",
+      sidebar: "#42A5F5",
+    },
+    badge: {
+      background: "#FF5252",
+      foreground: "#f5f1e8",
+    },
+    input: {
+      background: "#f5f1e8",
+    },
+    inputOption: {
+      default: "#42A5F5",
+    },
+    notifications: {
+      error: "#FF443E",
+      info: "#42A5F5",
+      warning: "#FFC135",
+    },
+    button: {
+      primary: {
+        background: "#f5f1e8",
+        hover: "#ebe7de",
+      },
+    },
+  },
+  editor: {
+    activeLineBackground: "#ebe7de",
+    background: "#f5f1e8",
+    foreground: "#1B1F23",
+    cursor: "#24292f",
+    error: "#CF222E",
+    lineNumbers: "#c4bcb0",
+    whiteSpace: "#dcd8cf",
+    ruler: "#dedad1",
+    warning: "#9A6700",
+    tokens: {
+      red: "#DC3838",
+      pink: "#DE2972",
+      green: "#8c9c00",
+      amber: "#a66c00",
+      default: "#24292f",
+      teal: "#637C74",
+      cyan: "#009fb1",
+      blue: "#107CC0",
+      gray: "#69788C",
+      darkGray: "#9ea8b4",
+      softGreen: "#C3E88D",
+      softRed: "#D73B5B",
+      softViolet: "#9B59C9",
+    },
+    gutter: {
+      added: "#4ac26b",
+      deleted: "#ff8182",
+      modified: "#eac54f",
+    },
+  },
+  terminal: {
+    background: "#f5f1e8",
+    black: "#252525",
+    blue: "#42A5F5",
+    cyan: "#00ACC1",
+    foreground: "#B0BDC4",
+    green: "#C3D82C",
+    magenta: "#D81B60",
+    red: "#FF443E",
+    white: "#faf8f3",
+    yellow: "#FFC135",
+  },
+} as const;

src/colors/index.ts

@@ -1,16 +1,19 @@
 import dark from "./dark";
 import light from "./light";
+import cream from "./cream";
 
-export type Variant = "dark" | "light";
+export type Variant = "dark" | "light" | "cream";
 
-type Colors = typeof dark | typeof light;
+type Colors = typeof dark | typeof light | typeof cream;
 
 const getColors = (theme: Variant): Colors => {
   switch (theme) {
     case "dark":
       return dark;
     case "light":
       return light;
+    case "cream":
+      return cream;
     default:
       throw Error(`Colors missing for variant: ${theme}`);
   }

src/index.ts

@@ -27,6 +27,7 @@ import theme from "./theme";
 
     await writeTheme("sprinkles-dark", theme("dark"));
     await writeTheme("sprinkles-light", theme("light"));
+    await writeTheme("sprinkles-cream", theme("cream"));
   } catch (error) {
     if (error instanceof Error) {
       throw Error(error.message);