Feature/themes

.gitignore

@@ -36,6 +36,10 @@ CHAT_DATA/
 node_modules/
 fable_modules/
 
+# IDE and build artifacts
+.claude
+.vscode/settings.json
+
 src/**/*.fs.js
 src/Client/public/
 test/e2e/Chrome

src/Client/App/State.fs

@@ -4,6 +4,26 @@ open Elmish
 open Elmish.Navigation
 open Router
 open Types
+open Browser.Dom
+open Browser.WebStorage
+
+let private setThemeClass theme =
+    let className = "theme-" + theme
+    document.documentElement.className <- className
+
+let private loadThemeFromStorage () =
+    try
+        localStorage.getItem("selected-theme")
+        |> Option.ofObj
+        |> Option.defaultValue "mass-effect"
+    with
+    | _ -> "mass-effect"
+
+let private saveThemeToStorage theme =
+    try
+        localStorage.setItem("selected-theme", theme)
+    with
+    | _ -> ()
 
 let urlUpdate (result: Option<Route>) model =
     match result with
@@ -15,7 +35,9 @@ let urlUpdate (result: Option<Route>) model =
 
 let init result =
     let connModel, connCmd = Connection.State.init()
-    let model, cmd = urlUpdate result { currentPage = Overview; chatPage = connModel }
+    let savedTheme = loadThemeFromStorage()
+    setThemeClass savedTheme
+    let model, cmd = urlUpdate result { currentPage = Overview; chatPage = connModel; selectedTheme = savedTheme }
     model, Cmd.batch [
         cmd
         Cmd.map ChatDataMsg connCmd
@@ -25,4 +47,8 @@ let update msg model =
     match msg with
     | ChatDataMsg msg ->
         let (chinfo, chinfoCmd) = Connection.State.update msg model.chatPage
-        { model with chatPage = chinfo }, Cmd.map ChatDataMsg chinfoCmd
+        { model with chatPage = chinfo }, Cmd.map ChatDataMsg chinfoCmd
+    | SetTheme theme ->
+        setThemeClass theme
+        saveThemeToStorage theme
+        { model with selectedTheme = theme }, Cmd.none

src/Client/App/Types.fs

@@ -2,8 +2,10 @@ module App.Types
 
 type Msg =
   | ChatDataMsg of Connection.Types.Msg
+  | SetTheme of string
 
 type Model = {
     currentPage: Router.Route
     chatPage: Connection.Types.Model
+    selectedTheme: string
   }

src/Client/App/View.fs

@@ -33,7 +33,7 @@ let root model dispatch =
       [ ClassName "container" ]
       [ div
           [ ClassName "col-md-4 fs-menu" ]
-          (NavMenu.View.menu model.chatPage model.currentPage (ApplicationMsg >> ChatDataMsg >> dispatch))
+          (NavMenu.View.menu model.chatPage model.currentPage model.selectedTheme (SetTheme >> dispatch) (ApplicationMsg >> ChatDataMsg >> dispatch))
         div
           [ ClassName "col-xs-12 col-md-8 fs-chat" ]
           (mainAreaView model.currentPage) ]

src/Client/NavMenu/View.fs

@@ -27,7 +27,31 @@ let menuItemChannelJoin dispatch =
     fun (ch: ChannelInfo) ->
       menuItem (OnClick <| join ch.Id) ch.Name ch.Topic false
 
-let menu (chatData: Model) currentPage dispatch =
+let themeSelector currentTheme themeDispatch =
+    let themeOptions = [
+        ("mass-effect", "Mass Effect")
+        ("cyberpunk", "Cyberpunk")
+        ("forest", "Forest")
+        ("ocean", "Ocean")
+        ("sunset", "Sunset")
+        ("monochrome", "Monochrome")
+    ]
+
+    div [ ClassName "fs-theme-selector" ]
+        [ h4 [] [ str "Theme" ]
+          select 
+            [ Value currentTheme
+              OnChange (fun ev ->
+                let themeValue = !!ev.target?value
+                themeDispatch themeValue) ]
+            [ for (themeValue, name) in themeOptions ->
+                option 
+                  [ Value themeValue ]
+                  [ str name ]
+            ]
+        ]
+
+let menu (chatData: Connection.Types.Model) currentPage currentTheme themeDispatch dispatch =
     match chatData with
     | NotConnected ->
       [ div [] [str "not connected"] ]
@@ -74,4 +98,5 @@ let menu (chatData: Model) currentPage dispatch =
         for (chid, ch) in channelList |> Map.toSeq do
             if not(channels |> Map.containsKey chid) then
                 yield menuItemChannelJoin dispatch ch
+        yield themeSelector currentTheme themeDispatch
       ]

src/Client/UserAvatar/View.fs

@@ -6,7 +6,8 @@ open Fable.React.Props
 let root  =
   function
   | None | Some "" ->
-      div [ ClassName "fs-avatar" ] []
+      div [ ClassName "fs-avatar" ] 
+          [ i [ ClassName "mdi mdi-account" ] [] ]
 
   | Some url ->
       div

src/Client/sass/app.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use './themes/index';
 @use './variables' as *;
 @use './chat';
 @use './menu';
@@ -81,7 +82,6 @@ html, body {
 		text-align: center;
 
 		color: white;
-		background-color: $color-avatar-bg;
 
 		font-size: 24px;
 		line-height: 40px;

src/Client/sass/chat.scss

@@ -178,7 +178,9 @@
 		content: ' ';
 
 		border-radius: 25px 25px 0 0;
-		background-color: #f7f5fb;
+		background-color: $color-chat-bg;
+
+
 	}
 
 	> div:not(.fs-avatar) {
@@ -191,6 +193,7 @@
 			margin: 0;
 			padding: 0;
 
+			color: $color-msg-text;
 			line-height: 20px;
 		}
 
@@ -199,6 +202,7 @@
 			margin: 0;
 			padding: 0;
 
+			color: $color-msg-text;
 			font-size: $font-size-sm;
 			line-height: 20px;
 
@@ -225,7 +229,7 @@
 	}
 
 	&.user {
-		color: white;
+		color: $color-user-msg-text;
 
 		&::before {
 			right: 15px;
@@ -237,6 +241,14 @@
 			padding: 10px 30px 5px 10px;
 
 			background-color: $color-user-msg-bg;
+
+			p {
+				color: $color-user-msg-text;
+			}
+
+			h5 {
+				color: $color-user-msg-text;
+			}
 		}
 
 		.fs-avatar {

src/Client/sass/menu.scss

@@ -2,8 +2,9 @@
 @use './variables' as *;
 
 .fs-menu {
+	position: relative;
 	height: 100%;
-	padding: 0;
+	padding: 0 0 80px 0;
 
 	background-color: $color-menu-bg;
 }
@@ -167,7 +168,7 @@
 	}
 
 	&.selected {
-		color: $color-menu-bg;
+		color: $color-menu-selected;
 		background-color: $color-chat-bg;
 
 		&::after {
@@ -219,7 +220,7 @@
 
 	color: white;
 	border: none;
-	background-color: color.adjust($color-menu-bg, $lightness: 5%);
+	background-color: var(--background-secondary, rgba(65, 66, 111, 0.9));
 
 	line-height: 0;
 
@@ -236,7 +237,7 @@
 
 		&:focus {
 			outline: none;
-			background-color: color.adjust($color-menu-bg, $lightness: 15%);
+			background-color: var(--background-primary, rgba(65, 66, 111, 1));
 		}
 	}
 }
@@ -250,12 +251,53 @@
 	height: 50px;
 
 	color: white;
-	background-color: color.adjust($color-menu-bg, $lightness: 10%);
+	background-color: var(--background-secondary, rgba(75, 76, 131, 1));
 	border: none;
 
 	font-size: 18px;
 
 	&:hover {
-		background-color: color.adjust($color-menu-bg, $lightness: 20%);
+		background-color: var(--background-primary, rgba(85, 86, 151, 1));
+	}
+}
+
+.fs-theme-selector {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 15px;
+	border-top: 1px solid rgba(#000, .2);
+	background-color: $color-menu-bg;
+
+	h4 {
+		margin: 0 0 10px 0;
+		color: $color-menu-fg;
+		font-size: $font-size-sm;
+		font-weight: normal;
+		text-transform: uppercase;
+		opacity: .8;
+	}
+
+	select {
+		width: 100%;
+		padding: 8px 12px;
+		background-color: var(--background-secondary, rgba(75, 76, 131, 1));
+		border: 1px solid var(--color-accent, rgba(105, 106, 171, 1));
+		border-radius: $border-radius;
+		color: $color-menu-fg;
+		font-size: $font-size-sm;
+		cursor: pointer;
+
+		&:focus {
+			outline: none;
+			border-color: var(--color-accent, rgba(135, 136, 201, 1));
+			background-color: var(--background-primary, rgba(95, 96, 151, 1));
+		}
+
+		option {
+			background-color: $color-menu-bg;
+			color: $color-menu-fg;
+		}
 	}
 }

src/Client/sass/themes/_cyberpunk.scss

@@ -0,0 +1,45 @@
+// Cyberpunk Theme - Neon and dark aesthetic
+:root.theme-cyberpunk {
+  // Avatar colors
+  --color-avatar-bg: #FF0080;
+
+  // Menu colors
+  --color-menu-fg: #00FF41;
+  --color-menu-bg: #0A0A0A;
+  --color-menu-selected: #00FF41;
+
+  // Text colors
+  --color-text: #E5E5E5;
+
+  // Chat colors
+  --color-chat-bg: #1A1A1A;
+
+  // Message colors
+  --color-msg-bg: #2D2D2D;
+  --color-msg-text: #E5E5E5;
+  --color-user-msg-bg: #FF0080;
+  --color-user-msg-text: #000000;
+
+  // UI elements
+  --border-radius: 0px;
+
+  // Typography
+  --font-size-sm: 12px;
+  --font-size: 14px;
+  --font-size-lg: 16px;
+
+  // Cyberpunk specific colors
+  --color-accent: #00FF41;
+  --color-warning: #FFFF00;
+  --color-success: #00FF41;
+  --color-danger: #FF0080;
+
+  // Neon backgrounds
+  --background-primary: linear-gradient(135deg, #0A0A0A 0%, #1A0033 100%);
+  --background-secondary: rgba(10, 10, 10, 0.95);
+
+  // Neon glowing effects
+  --glow-primary: 0 0 20px rgba(0, 255, 65, 0.5);
+  --glow-secondary: 0 0 15px rgba(255, 0, 128, 0.4);
+  --glow-text: 0 0 5px currentColor;
+}