[WIP] Implement color themes - closes #28

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- support for color themes and light mode([#28](https://github.com/extrawurst/gitui/issues/28))
 
 ## [0.2.6] - 2020-05-18
 ### Fixed

Cargo.toml

@@ -31,8 +31,10 @@ scopeguard = "1.1"
 bitflags = "1.2"
 chrono = "0.4"
 backtrace = { version = "0.3" }
+ron = "0.5.1"
 scopetime = { path = "./scopetime", version = "0.1" }
 asyncgit = { path = "./asyncgit", version = "0.2" }
+serde = "1.0.110"
 
 [features]
 default=[]
@@ -45,6 +47,6 @@ members=[
 ]
 
 [profile.release]
-lto = true 
+lto = true
 opt-level = 'z'  # Optimize for size.
 codegen-units = 1

README.md

@@ -80,6 +80,19 @@ this will log to:
 * `$XDG_CACHE_HOME/gitui/gitui.log` (linux using `XDG`) 
 * `$HOME/.cache/gitui/gitui.log` (linux)
 
+# color theme
+
+two different color themes are supported for light and dark mode. to change the colors you have to modify files in 
+[Ron format](https://github.com/ron-rs/ron) located at git config path (same as log paths). the list of valid 
+colors can be found in [ColorDef](./src/ui/style.rs#ColorDef) struct. note that rgb colors might not be available 
+on some platforms.
+
+to enable light mode:
+```
+GITUI_LIGHT=true gitui
+```
+
+
 # inspiration
 
 * https://github.com/jesseduffield/lazygit

assets/themes/dark.ron

@@ -0,0 +1,12 @@
+(
+    selected_tab: Yellow,
+    command_background: Rgb(0,0,100),
+    command_disabled: Gray,
+    diff_line_add: Green,
+    diff_line_delete: Red,
+    diff_file_added: LightGreen,
+    diff_file_removed: LightRed,
+    diff_file_moved: LightMagenta,
+    diff_file_modified: Yellow,
+    table_colors: (Magenta, Blue, Green),
+)

assets/themes/light.ron

@@ -0,0 +1,12 @@
+(
+    selected_tab: Yellow,
+    command_background: LightBlue,
+    command_disabled: Gray,
+    diff_line_add: Green,
+    diff_line_delete: Red,
+    diff_file_added: LightGreen,
+    diff_file_removed: LightRed,
+    diff_file_moved: LightMagenta,
+    diff_file_modified: Yellow,
+    table_colors: (Magenta, Blue, Green),
+)

src/app.rs

@@ -1,3 +1,4 @@
+use crate::ui::style::{Mode, Theme};
 use crate::{
     accessors,
     components::{
@@ -17,10 +18,11 @@ use itertools::Itertools;
 use log::trace;
 use std::borrow::Cow;
 use strings::commands;
+use tui::style::Style;
 use tui::{
     backend::Backend,
     layout::{Alignment, Constraint, Direction, Layout, Rect},
-    style::{Color, Modifier, Style},
+    style::Modifier,
     widgets::{Block, Borders, Paragraph, Tabs, Text},
     Frame,
 };
@@ -37,24 +39,32 @@ pub struct App {
     revlog: Revlog,
     status_tab: Status,
     queue: Queue,
+    pub theme: Theme,
 }
 
 // public interface
 impl App {
     ///
-    pub fn new(sender: &Sender<AsyncNotification>) -> Self {
+    pub fn new(
+        sender: &Sender<AsyncNotification>,
+        mode: Mode,
+    ) -> Self {
         let queue = Queue::default();
+
+        let theme = Theme::init(mode);
+
         Self {
-            reset: ResetComponent::new(queue.clone()),
-            commit: CommitComponent::new(queue.clone()),
+            reset: ResetComponent::new(queue.clone(), theme),
+            commit: CommitComponent::new(queue.clone(), theme),
             do_quit: false,
             current_commands: Vec::new(),
-            help: HelpComponent::default(),
-            msg: MsgComponent::default(),
+            help: HelpComponent::new(theme),
+            msg: MsgComponent::new(),
             tab: 0,
-            revlog: Revlog::new(&sender),
-            status_tab: Status::new(&sender, &queue),
+            revlog: Revlog::new(&sender, theme),
+            status_tab: Status::new(&sender, &queue, theme),
             queue,
+            theme,
         }
     }
 
@@ -84,6 +94,7 @@ impl App {
             f,
             chunks_main[2],
             self.current_commands.as_slice(),
+            self.theme,
         );
 
         self.draw_popups(f);
@@ -320,10 +331,9 @@ impl App {
             Tabs::default()
                 .block(Block::default().borders(Borders::BOTTOM))
                 .titles(&[strings::TAB_STATUS, strings::TAB_LOG])
-                .style(Style::default().fg(Color::White))
                 .highlight_style(
-                    Style::default()
-                        .fg(Color::Yellow)
+                    self.theme
+                        .tab(true)
                         .modifier(Modifier::UNDERLINED),
                 )
                 .divider(strings::TAB_DIVIDER)
@@ -336,28 +346,20 @@ impl App {
         f: &mut Frame<B>,
         r: Rect,
         cmds: &[CommandInfo],
+        theme: Theme,
     ) {
         let splitter = Text::Styled(
             Cow::from(strings::CMD_SPLITTER),
             Style::default(),
         );
 
-        let style_enabled =
-            Style::default().fg(Color::White).bg(Color::Blue);
-
-        let style_disabled =
-            Style::default().fg(Color::DarkGray).bg(Color::Blue);
         let texts = cmds
             .iter()
             .filter_map(|c| {
                 if c.show_in_quickbar() {
                     Some(Text::Styled(
                         Cow::from(c.text.name),
-                        if c.enabled {
-                            style_enabled
-                        } else {
-                            style_disabled
-                        },
+                        theme.toolbar(c.enabled),
                     ))
                 } else {
                     None