update: theme color

assets/theme-template.ron

@@ -1,99 +1,124 @@
+/// Usually, those with 'bg' indicate background color, while those without it typically indicate foreground color.
+///
+/// Kind Enum: Light | Dark
+/// Color Enum:
+/// - Tailwind(RED, C700): https://tailwindcss.com/docs/customizing-colors
+/// - Rgb(10, 20, 255)   : Rgb(u8, u8, u8), u8: 0 ~ 255
+/// - Hex("ffffff")      : Rgb color in radix-16, in the format: 0xRRGGBB
+/// - Default            : Depend on terminal background & foreground
+/// - Fallback           : Fallback to Light | Dark kind defined color
+/// - Black              : ANSI Color: Black. Foreground: 30, Background: 40
+/// - Red                : ANSI Color: Red. Foreground: 31, Background: 41
+/// - Green              : ANSI Color: Green. Foreground: 32, Background: 42
+/// - Yellow             : ANSI Color: Yellow. Foreground: 33, Background: 43
+/// - Blue               : ANSI Color: Blue. Foreground: 34, Background: 44
+/// - Magenta            : ANSI Color: Magenta. Foreground: 35, Background: 45
+/// - Cyan               : ANSI Color: Cyan. Foreground: 36, Background: 46
+/// - Gray               : ANSI Color: White. Foreground: 37, Background: 47
+/// - DarkGray           : ANSI Color: Bright Black. Foreground: 90, Background: 100
+/// - LightRed           : ANSI Color: Bright Red. Foreground: 91, Background: 101
+/// - LightGreen         : ANSI Color: Bright Green. Foreground: 92, Background: 102
+/// - LightYellow        : ANSI Color: Bright Yellow. Foreground: 93, Background: 103
+/// - LightBlue          : ANSI Color: Bright Blue. Foreground: 94, Background: 104
+/// - LightMagenta       : ANSI Color: Bright Magenta. Foreground: 95, Background: 105
+/// - LightCyan          : ANSI Color: Bright Cyan. Foreground: 96, Background: 106
+/// - White              : ANSI Color: Bright White. Foreground: 97, Background: 107
 (
-    name: "",
-    kind: Dark, // Dark | Light
+    name: "ratisui-dark",
+    kind: Dark,
     context: (
-        fps_fg: Fallback, // Tailwind(RED, C700) | Rgb(10, 20, 255) | Hex("ffffff") | Default | Fallback
-        icon_bg: Fallback,
+        fps: Tailwind(GRAY, C500),
+        key_bg: Tailwind(YELLOW, C700),
     ),
     server: (
-        highlight: Fallback,
-        name: Fallback,
-        location: Fallback,
-        db: Fallback,
-        username: Fallback,
-        tls: Fallback,
-        protocol: Fallback,
+        highlight: Default,
+        name: Tailwind(AMBER, C400),
+        location: Tailwind(CYAN, C500),
+        db: Tailwind(BLUE, C600),
+        username: Tailwind(AMBER, C400),
+        tls: Tailwind(ROSE, C600),
+        protocol: Tailwind(EMERALD, C600),
     ),
     table: (
-        buffer_bg: Fallback,
-        header_bg: Fallback,
-        header_fg: Fallback,
-        row_fg: Fallback,
-        normal_row_color: Fallback,
-        alt_row_color: Fallback,
+        bg: Default,
+        header_bg: Tailwind(GRAY, C900),
+        header: Tailwind(GRAY, C200),
+        row: Tailwind(GRAY, C200),
+        odd_row_bg: Default,
+        even_row_bg: Tailwind(GRAY, C950),
     ),
     raw: (
-        string: Fallback,
-        boolean: Fallback,
-        keyword: Fallback,
-        constant: Fallback,
-        null: Fallback,
-        property: Fallback,
-        comment: Fallback,
-        number: Fallback,
+        string: Tailwind(AMBER, C400),
+        boolean: Tailwind(ROSE, C600),
+        keyword: Tailwind(ROSE, C600),
+        constant: Tailwind(ROSE, C600),
+        null: Tailwind(ROSE, C600),
+        property: Tailwind(FUCHSIA, C700),
+        comment: Tailwind(CYAN, C500),
+        number: Tailwind(BLUE, C600),
     ),
     border: (
-        highlight: Fallback,
-        default: Fallback,
+        highlight: Tailwind(GRAY, C300),
+        default: Tailwind(GRAY, C600),
     ),
     editor: (
-        editing: Fallback,
-        warning: Fallback,
+        editing: Tailwind(SKY, C700),
+        warning: Tailwind(RED, C700),
     ),
     tab: (
-        title_fg: Fallback,
+        title: Tailwind(SLATE, C200),
         explorer: (
-            accent: Fallback,
-            highlight: Fallback,
+            accent: Tailwind(ROSE, C900),
+            highlight: Tailwind(ROSE, C700),
             tree: (
-                highlight: Fallback,
+                highlight: Tailwind(ROSE, C700),
             ),
             key_type: (
-                hash: Fallback,
-                list: Fallback,
-                set: Fallback,
-                zset: Fallback,
-                string: Fallback,
-                json: Fallback,
-                stream: Fallback,
-                unknown: Fallback,
+                hash: Tailwind(BLUE, C700),
+                list: Tailwind(GREEN, C700),
+                set: Tailwind(ORANGE, C700),
+                zset: Tailwind(PINK, C700),
+                string: Tailwind(PURPLE, C700),
+                json: Tailwind(GRAY, C700),
+                stream: Tailwind(YELLOW, C700),
+                unknown: Tailwind(SLATE, C500),
             ),
         ),
         cli: (
-            accent: Fallback,
-            highlight: Fallback,
+            accent: Tailwind(GREEN, C900),
+            highlight: Tailwind(GREEN, C700),
             console: (
-                cmd: Fallback,
-                out: Fallback,
-                err: Fallback,
+                cmd: Tailwind(EMERALD, C700),
+                out: Default,
+                err: Tailwind(ROSE, C700),
             ),
             menu: (
-                bg: Fallback,
-                highlight: Fallback,
-                info: Fallback,
-                desc_bg: Fallback,
-                input: Fallback,
+                bg: Tailwind(NEUTRAL, C800),
+                highlight: Tailwind(ZINC, C900),
+                info_bg: Tailwind(STONE, C900),
+                input: Tailwind(AMBER, C500),
             ),
             doc: (
-                command: Fallback,
-                attribute: Fallback,
+                bg: Tailwind(NEUTRAL, C800),
+                command: Tailwind(AMBER, C400),
+                attribute: Tailwind(PINK, C800),
             ),
         ),
         logger: (
-            accent: Fallback,
-            highlight: Fallback,
+            accent: Tailwind(AMBER, C900),
+            highlight: Tailwind(AMBER, C700),
             level: (
-                error: Fallback,
-                warn: Fallback,
-                info: Fallback,
-                debug: Fallback,
-                trace: Fallback,
+                error: Tailwind(ROSE, C700),
+                warn: Tailwind(AMBER, C700),
+                info: Tailwind(CYAN, C700),
+                debug: Tailwind(EMERALD, C700),
+                trace: Tailwind(VIOLET, C700),
             ),
         ),
     ),
     toast: (
-        info: Fallback,
-        warn: Fallback,
-        error: Fallback,
+        info: Tailwind(GREEN, C700),
+        warn: Tailwind(YELLOW, C700),
+        error: Tailwind(RED, C700),
     ),
 )

examples/theme.rs

@@ -1,10 +1,9 @@
 use anyhow::{Context, Result};
+use ron::ser::PrettyConfig;
 use ratisui::theme::{Color, Tab, Theme};
 
 fn main() -> Result<()> {
-    let mut theme = Theme::default();
-    let mut tab = Tab::default();
-    theme.tab = tab;
+    println!("{}", ron::ser::to_string_pretty(&Theme::dark(), PrettyConfig::default())?);
 
     let r_color = Color::hex("ffffff").to_color().context("")?;
     assert!(matches!(r_color, ratatui::style::Color::Rgb(255,255,255)));

src/components/hash_table.rs

@@ -145,8 +145,8 @@ impl HashValue {
         let mut selected_height = 5;
         let rows = self.items.iter().enumerate().map(|(i, data)| {
             let color = match i % 2 {
-                0 => self.colors.normal_row_color,
-                _ => self.colors.alt_row_color,
+                0 => self.colors.normal_row,
+                _ => self.colors.alt_row,
             };
             let item;
             let height: u16;
@@ -198,7 +198,7 @@ impl HashValue {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(highlight_symbol)
-            .bg(self.colors.buffer_bg)
+            .bg(self.colors.bg)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.state);
     }

src/components/list_table.rs

@@ -140,8 +140,8 @@ impl ListValue {
         let mut selected_height = 5;
         let rows = self.items.iter().enumerate().map(|(i, data)| {
             let color = match i % 2 {
-                0 => self.colors.normal_row_color,
-                _ => self.colors.alt_row_color,
+                0 => self.colors.normal_row,
+                _ => self.colors.alt_row,
             };
             let item;
             let height: u16;
@@ -192,7 +192,7 @@ impl ListValue {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(highlight_symbol)
-            .bg(self.colors.buffer_bg)
+            .bg(self.colors.bg)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.state);
     }

src/components/mod.rs

@@ -18,23 +18,29 @@ pub mod raw_paragraph;
 pub mod stream_view;
 
 struct TableColors {
-    buffer_bg: Color,
+    // table background
+    bg: Color,
+    // header background
     header_bg: Color,
+    // header foreground
     header_fg: Color,
+    // row foreground
     row_fg: Color,
-    normal_row_color: Color,
-    alt_row_color: Color,
+    // odd-numbered row
+    normal_row: Color,
+    // even-numbered row
+    alt_row: Color,
 }
 
 impl TableColors {
     fn new() -> Self {
         Self {
-            buffer_bg: get_color(|t| &t.table.buffer_bg),
+            bg: get_color(|t| &t.table.bg),
             header_bg: get_color(|t| &t.table.header_bg),
-            header_fg: get_color(|t| &t.table.header_fg),
-            row_fg: get_color(|t| &t.table.row_fg),
-            normal_row_color: get_color(|t| &t.table.normal_row_color),
-            alt_row_color: get_color(|t| &t.table.alt_row_color),
+            header_fg: get_color(|t| &t.table.header),
+            row_fg: get_color(|t| &t.table.row),
+            normal_row: get_color(|t| &t.table.odd_row_bg),
+            alt_row: get_color(|t| &t.table.even_row_bg),
         }
     }
 }

src/components/redis_cli.rs

@@ -297,7 +297,7 @@ impl RedisCli<'_> {
     fn render_menu_footer(&mut self, frame: &mut Frame, area: Rect) {
         let horizontal = Layout::horizontal([Fill(1), Length(7)]).split(area);
         let selected = self.table_state.selected().unwrap_or(0);
-        let style = Style::default().bg(get_color(|t| &t.tab.cli.menu.info)).italic();
+        let style = Style::default().bg(get_color(|t| &t.tab.cli.menu.info_bg)).italic();
         let info = Line::raw("↑/↓ Tab").style(style);
         let item_count = Line::raw(format!("{}:{}", selected.saturating_add(1), self.completion_items.len()))
             .alignment(Alignment::Right)
@@ -315,7 +315,7 @@ impl RedisCli<'_> {
         let paragraph = Paragraph::new(highlight_doc(&doc))
             .wrap(Wrap { trim: false })
             .block(Block::default().border_set(symbols::border::EMPTY).borders(Borders::from_bits_retain(0b1010)))
-            .style(Style::default().bg(get_color(|t| &t.tab.cli.menu.desc_bg)))
+            .style(Style::default().bg(get_color(|t| &t.tab.cli.doc.bg)))
             ;
         let line_count = paragraph.line_count(desc_width - 2); // block width 2
         let desc_height = cmp::min(line_count as u16, self.max_desc_height);

src/components/servers.rs

@@ -207,7 +207,7 @@ impl ServerList {
             .fg(self.colors.header_fg)
             .bg(self.colors.header_bg);
         let selected_style = Style::default()
-            .bg(self.colors.alt_row_color)
+            .bg(self.colors.alt_row)
             ;
 
         let header = ["", "Name", "Location", "DB", "Username", "TLS", "Protocol"]
@@ -248,7 +248,7 @@ impl ServerList {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(Text::raw(bar))
-            .bg(self.colors.buffer_bg)
+            .bg(self.colors.bg)
             .column_spacing(1)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.state);

src/components/set_table.rs

@@ -140,8 +140,8 @@ impl SetValue {
         let mut selected_height = 5;
         let rows = self.items.iter().enumerate().map(|(i, data)| {
             let color = match i % 2 {
-                0 => self.colors.normal_row_color,
-                _ => self.colors.alt_row_color,
+                0 => self.colors.normal_row,
+                _ => self.colors.alt_row,
             };
             let item;
             let height: u16;
@@ -192,7 +192,7 @@ impl SetValue {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(highlight_symbol)
-            .bg(self.colors.buffer_bg)
+            .bg(self.colors.bg)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.state);
     }

src/components/stream_view.rs

@@ -200,8 +200,8 @@ impl SteamView {
 
         let rows = self.items.iter().enumerate().map(|(i, data)| {
             let color = match i % 2 {
-                0 => self.id_table.colors.normal_row_color,
-                _ => self.id_table.colors.alt_row_color,
+                0 => self.id_table.colors.normal_row,
+                _ => self.id_table.colors.alt_row,
             };
             let item = [&data.key];
 
@@ -222,7 +222,7 @@ impl SteamView {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(highlight_symbol)
-            .bg(self.id_table.colors.buffer_bg)
+            .bg(self.id_table.colors.bg)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.id_table.state);
     }
@@ -273,8 +273,8 @@ impl SteamView {
         if let Some(data) = self.items.get(i) {
             let rows = data.value.iter().enumerate().map(|(i, (field, value))| {
                 let color = match i % 2 {
-                    0 => self.entry_table.colors.normal_row_color,
-                    _ => self.entry_table.colors.alt_row_color,
+                    0 => self.entry_table.colors.normal_row,
+                    _ => self.entry_table.colors.alt_row,
                 };
                 let item;
                 let height: u16;
@@ -326,7 +326,7 @@ impl SteamView {
                 .header(header)
                 .row_highlight_style(selected_style)
                 .highlight_symbol(highlight_symbol)
-                .bg(self.entry_table.colors.buffer_bg)
+                .bg(self.entry_table.colors.bg)
                 .highlight_spacing(HighlightSpacing::Always);
             frame.render_stateful_widget(t, area, &mut self.entry_table.state);
         }

src/components/zset_table.rs

@@ -149,8 +149,8 @@ impl ZSetValue {
         let mut selected_height = 5;
         let rows = self.items.iter().enumerate().map(|(i, data)| {
             let color = match i % 2 {
-                0 => self.colors.normal_row_color,
-                _ => self.colors.alt_row_color,
+                0 => self.colors.normal_row,
+                _ => self.colors.alt_row,
             };
             let item;
             let height: u16;
@@ -202,7 +202,7 @@ impl ZSetValue {
             .header(header)
             .row_highlight_style(selected_style)
             .highlight_symbol(highlight_symbol)
-            .bg(self.colors.buffer_bg)
+            .bg(self.colors.bg)
             .highlight_spacing(HighlightSpacing::Always);
         frame.render_stateful_widget(t, area, &mut self.state);
     }