From 27982e3419c7ef1aea8220c65276a335e4452e01 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 27 Nov 2025 18:53:50 +0000
Subject: [PATCH 1/2] feat: add cyberpunk and retro themes

Adds two new themes, "cyberpunk" and "retro", to the frontend application.

- Defines the color schemes for the new themes in `globals.css`.
- Updates the `ThemeProvider` to recognize the new themes.
- Adds the new themes to the `ThemeToggle` component.
---
 devussy-web/src/app/globals.css               | 46 ++++++++++++++++++-
 .../src/components/theme/ThemeProvider.tsx    |  4 +-
 .../src/components/theme/ThemeToggle.tsx      |  4 +-
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/devussy-web/src/app/globals.css b/devussy-web/src/app/globals.css
index c11fe88..3323a7d 100644
--- a/devussy-web/src/app/globals.css
+++ b/devussy-web/src/app/globals.css
@@ -575,4 +575,48 @@
 [data-theme="bliss"] *:focus-visible {
   outline: 1px dotted #000000;
   outline-offset: 2px;
-}
\ No newline at end of file
+}
+
+/* Theme: Cyberpunk */
+[data-theme="cyberpunk"] {
+  --background: #0d0221;
+  --foreground: #00f0ff;
+  --card: rgba(1, 22, 39, 0.8);
+  --card-foreground: #f0f;
+  --popover: #011627;
+  --popover-foreground: #00f0ff;
+  --primary: #f0f;
+  --primary-foreground: #0d0221;
+  --secondary: #00f0ff;
+  --secondary-foreground: #0d0221;
+  --muted: #011627;
+  --muted-foreground: #00f0ff;
+  --accent: #f0f;
+  --accent-foreground: #0d0221;
+  --destructive: #ff3333;
+  --border: #f0f;
+  --input: #011627;
+  --ring: #f0f;
+}
+
+/* Theme: Retro */
+[data-theme="retro"] {
+  --background: #f1f1f1;
+  --foreground: #333;
+  --card: #fff;
+  --card-foreground: #333;
+  --popover: #fff;
+  --popover-foreground: #333;
+  --primary: #ff5722;
+  --primary-foreground: #fff;
+  --secondary: #ffc107;
+  --secondary-foreground: #333;
+  --muted: #eee;
+  --muted-foreground: #666;
+  --accent: #ff9800;
+  --accent-foreground: #fff;
+  --destructive: #f44336;
+  --border: #ccc;
+  --input: #fff;
+  --ring: #ff5722;
+}
diff --git a/devussy-web/src/components/theme/ThemeProvider.tsx b/devussy-web/src/components/theme/ThemeProvider.tsx
index f457409..0cfa539 100644
--- a/devussy-web/src/components/theme/ThemeProvider.tsx
+++ b/devussy-web/src/components/theme/ThemeProvider.tsx
@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-export type Theme = 'default' | 'terminal' | 'bliss';
+export type Theme = 'default' | 'terminal' | 'bliss' | 'cyberpunk' | 'retro';
 
 interface ThemeContextType {
     theme: Theme;
@@ -19,7 +19,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         setMounted(true);
         // Load theme from localStorage
         const savedTheme = localStorage.getItem('devussy-theme') as Theme;
-        if (savedTheme && ['default', 'terminal', 'bliss'].includes(savedTheme)) {
+        if (savedTheme && ['default', 'terminal', 'bliss', 'cyberpunk', 'retro'].includes(savedTheme)) {
             setThemeState(savedTheme);
             document.documentElement.setAttribute('data-theme', savedTheme);
         }
diff --git a/devussy-web/src/components/theme/ThemeToggle.tsx b/devussy-web/src/components/theme/ThemeToggle.tsx
index 022feb5..1a389e7 100644
--- a/devussy-web/src/components/theme/ThemeToggle.tsx
+++ b/devussy-web/src/components/theme/ThemeToggle.tsx
@@ -1,12 +1,14 @@
 'use client';
 
 import { useTheme, Theme } from './ThemeProvider';
-import { Monitor, Terminal, Image } from 'lucide-react';
+import { Monitor, Terminal, Image, Cpu, Ghost } from 'lucide-react';
 
 const themes: { value: Theme; label: string; icon: React.ReactNode }[] = [
     { value: 'default', label: 'Default', icon: <Monitor className="w-4 h-4" /> },
     { value: 'terminal', label: 'Terminal', icon: <Terminal className="w-4 h-4" /> },
     { value: 'bliss', label: 'Bliss', icon: <Image className="w-4 h-4" /> },
+    { value: 'cyberpunk', label: 'Cyberpunk', icon: <Cpu className="w-4 h-4" /> },
+    { value: 'retro', label: 'Retro', icon: <Ghost className="w-4 h-4" /> },
 ];
 
 export function ThemeToggle() {

From 9e99155f62f12beaeafbd4c969a3dea8a9b4d3fa Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 27 Nov 2025 19:04:35 +0000
Subject: [PATCH 2/2] feat: add cyberpunk and retro themes

Adds two new themes, "cyberpunk" and "retro", to the frontend application.

- Defines the color schemes for the new themes in `globals.css`.
- Updates the `ThemeProvider` to recognize the new themes.
- Adds the new themes to the `ThemeToggle` component.