feat(style): add system theme using basic ANSI colors

Add a "system" theme that uses the terminal's own colors instead of
overriding them with 256-color palette values. This respects users'
custom terminal color schemes.

Changes:
- Add fg_ansi_code/bg_ansi_code helpers in Style: colors 0-15 render
  as basic ANSI codes (30-37/90-97 fg, 40-47/100-107 bg) which use the
  terminal's configured colors. Colors 16+ use 256-color codes as before.
- Update to_ansi_prefix, Widgets.fg/bg, apply_bg_fill, and
  apply_themed_foreground to use the new helpers.
- Add "system" builtin theme: no explicit text/background colors
  (transparent), basic ANSI accents, attributes for emphasis.
- Add system theme to style_system demo (key 4).

Author: mathiasbourgoin

example/demos/style_system/page.ml

@@ -17,15 +17,17 @@ module Inner = struct
   module Theme = Miaou_style.Theme
   module Theme_loader = Miaou_style.Theme_loader
   module W = Miaou_widgets_display.Widgets
+  module Builtin_themes = Miaou_style.Builtin_themes
 
-  type theme_choice = Dark | Light | High_contrast
+  type theme_choice = Dark | Light | High_contrast | System
 
   type loaded_theme = {theme : Theme.t; error : string option}
 
   type themes = {
     dark : loaded_theme;
     light : loaded_theme;
     high_contrast : loaded_theme;
+    system : loaded_theme;
   }
 
   type state = {
@@ -39,13 +41,14 @@ module Inner = struct
 
   let load_theme ~label blob =
     match Theme_loader.of_json_string blob with
-    | Ok t -> {theme = t; error = None}
+    | Ok t -> {theme = Theme.merge ~base:Theme.default ~overlay:t; error = None}
     | Error e -> {theme = Theme.default; error = Some (label ^ ": " ^ e)}
 
   let load_theme_file ~label path ~fallback =
     if Sys.file_exists path then
       match Theme_loader.load_file path with
-      | Ok t -> {theme = t; error = None}
+      | Ok t ->
+          {theme = Theme.merge ~base:Theme.default ~overlay:t; error = None}
       | Error e ->
           {
             theme = fallback;
@@ -65,22 +68,30 @@ module Inner = struct
     let high_contrast =
       load_theme ~label:"high-contrast" [%blob "themes/high-contrast.json"]
     in
-    {dark; light; high_contrast}
+    let system =
+      match Builtin_themes.get_builtin "system" with
+      | Some t -> {theme = t; error = None}
+      | None ->
+          {theme = Theme.default; error = Some "system: builtin not found"}
+    in
+    {dark; light; high_contrast; system}
 
   let init () = {themes; choice = Dark; cursor = 0; next_page = None}
 
   let theme_name = function
     | Dark -> "dark"
     | Light -> "light"
     | High_contrast -> "high-contrast"
+    | System -> "system"
 
   let current_theme s =
     match s.choice with
     | Dark -> s.themes.dark
     | Light -> s.themes.light
     | High_contrast -> s.themes.high_contrast
+    | System -> s.themes.system
 
-  let clamp_idx i = if i < 0 then 0 else if i > 3 then 3 else i
+  let clamp_idx i = if i < 0 then 0 else if i > 4 then 4 else i
 
   let render_tile ~index ~cursor ~title ~size =
     let focused = index = cursor in
@@ -136,11 +147,14 @@ module Inner = struct
 
   let view s ~focus:_ ~size =
     let current = current_theme s in
+    (* Update the driver-level theme so apply_themed_background/foreground
+       use the selected theme, not just the page content rendering. *)
+    Style_context.set_theme current.theme ;
     Style_context.with_theme current.theme (fun () ->
         let header = W.themed_emphasis "Style System Demo" in
         let sub =
           W.themed_muted
-            "1/2/3 switch theme · Left/Right move focus · Esc returns"
+            "1/2/3/4 switch theme · Left/Right move focus · Esc returns"
         in
         let theme_line =
           W.themed_text
@@ -175,6 +189,7 @@ module Inner = struct
     | "1" -> {s with choice = Dark}
     | "2" -> {s with choice = Light}
     | "3" -> {s with choice = High_contrast}
+    | "4" -> {s with choice = System}
     | "Left" | "h" -> {s with cursor = clamp_idx (s.cursor - 1)}
     | "Right" | "l" -> {s with cursor = clamp_idx (s.cursor + 1)}
     | _ -> (

src/miaou_driver_matrix/matrix_ansi_writer.ml

@@ -48,12 +48,20 @@ let style_to_sgr style =
   (* Reverse *)
   if style.reverse then Buffer.add_string buf ";7" ;
 
-  (* Foreground color *)
-  if style.fg >= 0 && style.fg <= 255 then
+  (* Foreground color: 0-15 use basic ANSI, 16-255 use 256-color *)
+  if style.fg >= 0 && style.fg <= 7 then
+    Buffer.add_string buf (Printf.sprintf ";%d" (30 + style.fg))
+  else if style.fg >= 8 && style.fg <= 15 then
+    Buffer.add_string buf (Printf.sprintf ";%d" (90 + style.fg - 8))
+  else if style.fg >= 16 && style.fg <= 255 then
     Buffer.add_string buf (Printf.sprintf ";38;5;%d" style.fg) ;
 
-  (* Background color *)
-  if style.bg >= 0 && style.bg <= 255 then
+  (* Background color: same logic *)
+  if style.bg >= 0 && style.bg <= 7 then
+    Buffer.add_string buf (Printf.sprintf ";%d" (40 + style.bg))
+  else if style.bg >= 8 && style.bg <= 15 then
+    Buffer.add_string buf (Printf.sprintf ";%d" (100 + style.bg - 8))
+  else if style.bg >= 16 && style.bg <= 255 then
     Buffer.add_string buf (Printf.sprintf ";48;5;%d" style.bg) ;
 
   Buffer.add_char buf 'm' ;

src/miaou_style/builtin_themes.ml

@@ -107,6 +107,14 @@ let all_themes =
       dark_mode = false;
       borderless = false;
     };
+    (* System theme *)
+    {
+      id = "system";
+      name = "System";
+      description = "Uses terminal's own colors and background";
+      dark_mode = true;
+      borderless = false;
+    };
   ]
 
 (** List all available built-in themes *)
@@ -386,6 +394,32 @@ let oled_json =
   "rules": {}
 }|}
 
+(* System theme - uses terminal's own colors via basic ANSI codes (0-15).
+   No explicit background or text color: inherits from the terminal. *)
+let system_json =
+  {|{
+  "name": "System",
+  "dark_mode": true,
+  "primary": { "fg": { "Fixed": 12 }, "bold": true },
+  "secondary": { "fg": { "Fixed": 8 } },
+  "accent": { "fg": { "Fixed": 13 } },
+  "error": { "fg": { "Fixed": 1 }, "bold": true },
+  "warning": { "fg": { "Fixed": 3 }, "bold": true },
+  "success": { "fg": { "Fixed": 2 } },
+  "info": { "fg": { "Fixed": 6 } },
+  "text": { "fg": { "Fixed": -1 } },
+  "text_muted": { "fg": { "Fixed": -1 }, "dim": true },
+  "text_emphasized": { "fg": { "Fixed": -1 }, "bold": true },
+  "background": { "bg": { "Fixed": -1 } },
+  "background_secondary": { "bg": { "Fixed": -1 } },
+  "border": { "fg": { "Fixed": -1 }, "dim": true },
+  "border_focused": { "fg": { "Fixed": 12 }, "bold": true },
+  "border_dim": { "fg": { "Fixed": -1 }, "dim": true },
+  "selection": { "fg": { "Fixed": -1 }, "bg": { "Fixed": -1 }, "reverse": true },
+  "default_border_style": "Rounded",
+  "rules": {}
+}|}
+
 (** Get the JSON string for a built-in theme *)
 let get_json id =
   match id with
@@ -400,6 +434,7 @@ let get_json id =
   | "tokyonight-day" -> Some tokyonight_day_json
   | "opencode" -> Some opencode_json
   | "oled" -> Some oled_json
+  | "system" -> Some system_json
   | _ -> None
 
 (** Load a built-in theme by ID *)

src/miaou_style/style.ml

@@ -171,6 +171,18 @@ let to_resolved ?(dark_mode = true) style =
     r_strikethrough = Option.value ~default:false resolved.strikethrough;
   }
 
+let fg_ansi_code n =
+  if n >= 0 && n <= 7 then string_of_int (30 + n)
+  else if n >= 8 && n <= 15 then string_of_int (90 + n - 8)
+  else if n >= 16 then "38;5;" ^ string_of_int n
+  else ""
+
+let bg_ansi_code n =
+  if n >= 0 && n <= 7 then string_of_int (40 + n)
+  else if n >= 8 && n <= 15 then string_of_int (100 + n - 8)
+  else if n >= 16 then "48;5;" ^ string_of_int n
+  else ""
+
 let to_ansi_prefix r =
   let buf = Buffer.create 32 in
   let add_code code =
@@ -184,10 +196,13 @@ let to_ansi_prefix r =
   if r.r_underline then add_code "4" ;
   if r.r_reverse then add_code "7" ;
   if r.r_strikethrough then add_code "9" ;
-  (* Foreground color *)
-  if r.r_fg >= 0 then add_code ("38;5;" ^ string_of_int r.r_fg) ;
-  (* Background color *)
-  if r.r_bg >= 0 then add_code ("48;5;" ^ string_of_int r.r_bg) ;
+  (* Foreground color: 0-15 use basic ANSI codes (terminal-configurable),
+     16-255 use 256-color extended codes *)
+  let fg_code = fg_ansi_code r.r_fg in
+  if fg_code <> "" then add_code fg_code ;
+  (* Background color: same logic *)
+  let bg_code = bg_ansi_code r.r_bg in
+  if bg_code <> "" then add_code bg_code ;
   (* Build escape sequence *)
   if Buffer.length buf > 0 then "\027[" ^ Buffer.contents buf ^ "m" else ""
 

src/miaou_style/style.mli

@@ -128,6 +128,15 @@ val resolve_color : ?dark_mode:bool -> color -> int
 (** Resolve style to concrete values *)
 val to_resolved : ?dark_mode:bool -> t -> resolved
 
+(** ANSI escape code fragment for a foreground color index.
+    Colors 0-15 use basic ANSI codes (respects terminal color scheme).
+    Colors 16-255 use 256-color extended codes.
+    Returns [""] for negative values (no color). *)
+val fg_ansi_code : int -> string
+
+(** Same as {!fg_ansi_code} but for background colors. *)
+val bg_ansi_code : int -> string
+
 (** Convert resolved style to ANSI escape sequence prefix *)
 val to_ansi_prefix : resolved -> string
 

src/miaou_widgets_display/widgets.ml

@@ -35,9 +35,13 @@ let bold s = ansi "1" s
 
 let dim s = ansi "2" s
 
-let fg n s = ansi ("38;5;" ^ string_of_int n) s
+let fg n s =
+  let code = Miaou_style.Style.fg_ansi_code n in
+  if code = "" then s else ansi code s
 
-let bg n s = ansi ("48;5;" ^ string_of_int n) s
+let bg n s =
+  let code = Miaou_style.Style.bg_ansi_code n in
+  if code = "" then s else ansi code s
 
 let green s = ansi "32" s
 
@@ -132,7 +136,7 @@ let themed_background_alt s = styled (Style_context.background_secondary ()) s
 let themed_contextual s = Style_context.styled s
 
 let apply_bg_fill ~bg s =
-  let prefix = "\027[48;5;" ^ string_of_int bg ^ "m" in
+  let prefix = "\027[" ^ Miaou_style.Style.bg_ansi_code bg ^ "m" in
   let reset = Style.ansi_reset in
   let len_s = String.length s in
   let len_reset = String.length reset in
@@ -173,7 +177,7 @@ let apply_themed_foreground content =
   let fg = resolved.Style.r_fg in
   if fg < 0 then content (* No text color in theme *)
   else
-    let fg_prefix = Printf.sprintf "\027[38;5;%dm" fg in
+    let fg_prefix = "\027[" ^ Style.fg_ansi_code fg ^ "m" in
     let reset_fg = "\027[39m" in
     (* Regex to match ANSI escape sequences *)
     let ansi_re = Str.regexp "\027\\[[0-9;]*m" in