Implement color themes #65 (closes #28)

Author: Mehran Kordi

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.lock

@@ -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

Cargo.toml

@@ -80,6 +80,13 @@ this will log to:
 * `$XDG_CACHE_HOME/gitui/gitui.log` (linux using `XDG`) 
 * `$HOME/.cache/gitui/gitui.log` (linux)
 
+# color theme
+
+to change the colors of the program you have to modify `theme.ron` file
+[Ron format](https://github.com/ron-rs/ron) located at 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.
+
 # inspiration
 
 * https://github.com/jesseduffield/lazygit

README.md

@@ -1,3 +1,4 @@
+use crate::ui::style::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,29 @@ pub struct App {
     revlog: Revlog,
     status_tab: Status,
     queue: Queue,
+    theme: Theme,
 }
 
 // public interface
 impl App {
     ///
     pub fn new(sender: &Sender<AsyncNotification>) -> Self {
         let queue = Queue::default();
+
+        let theme = Theme::init();
+
         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(),
+            help: HelpComponent::new(theme),
             msg: MsgComponent::default(),
             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 +91,7 @@ impl App {
             f,
             chunks_main[2],
             self.current_commands.as_slice(),
+            self.theme,
         );
 
         self.draw_popups(f);
@@ -320,10 +328,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 +343,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

src/app.rs

@@ -3,6 +3,7 @@ use super::{
     statustree::{MoveSelection, StatusTree},
     CommandBlocking, DrawableComponent,
 };
+use crate::ui::style::Theme;
 use crate::{
     components::{CommandInfo, Component},
     keys,
@@ -13,13 +14,7 @@ use asyncgit::{hash, sync, StatusItem, StatusItemType, CWD};
 use crossterm::event::Event;
 use std::{borrow::Cow, convert::From, path::Path};
 use strings::commands;
-use tui::{
-    backend::Backend,
-    layout::Rect,
-    style::{Color, Style},
-    widgets::Text,
-    Frame,
-};
+use tui::{backend::Backend, layout::Rect, widgets::Text, Frame};
 
 ///
 pub struct ChangesComponent {
@@ -30,6 +25,7 @@ pub struct ChangesComponent {
     show_selection: bool,
     is_working_dir: bool,
     queue: Queue,
+    theme: Theme,
 }
 
 impl ChangesComponent {
@@ -39,6 +35,7 @@ impl ChangesComponent {
         focus: bool,
         is_working_dir: bool,
         queue: Queue,
+        theme: Theme,
     ) -> Self {
         Self {
             title: title.to_string(),
@@ -48,6 +45,7 @@ impl ChangesComponent {
             show_selection: focus,
             is_working_dir,
             queue,
+            theme,
         }
     }
 
@@ -154,9 +152,8 @@ impl ChangesComponent {
         item: &FileTreeItem,
         width: u16,
         selected: bool,
+        theme: Theme,
     ) -> Option<Text> {
-        let select_color = Color::Rgb(0, 0, 100);
-
         let indent_str = if item.info.indent == 0 {
             String::from("")
         } else {
@@ -189,18 +186,14 @@ impl ChangesComponent {
                     format!("{} {}{}", status_char, indent_str, file)
                 };
 
-                let mut style =
-                    Style::default().fg(Self::item_color(
-                        status_item
-                            .status
-                            .unwrap_or(StatusItemType::Modified),
-                    ));
+                let status = status_item
+                    .status
+                    .unwrap_or(StatusItemType::Modified);
 
-                if selected {
-                    style = style.bg(select_color);
-                }
-
-                Some(Text::Styled(Cow::from(txt), style))
+                Some(Text::Styled(
+                    Cow::from(txt),
+                    theme.item(status, selected),
+                ))
             }
 
             FileTreeItemKind::Path(path_collapsed) => {
@@ -222,27 +215,14 @@ impl ChangesComponent {
                     )
                 };
 
-                let mut style = Style::default();
-
-                if selected {
-                    style = style.bg(select_color);
-                }
-
-                Some(Text::Styled(Cow::from(txt), style))
+                Some(Text::Styled(
+                    Cow::from(txt),
+                    theme.text(true, selected),
+                ))
             }
         }
     }
 
-    fn item_color(item_type: StatusItemType) -> Color {
-        match item_type {
-            StatusItemType::Modified => Color::LightYellow,
-            StatusItemType::New => Color::LightGreen,
-            StatusItemType::Deleted => Color::LightRed,
-            StatusItemType::Renamed => Color::LightMagenta,
-            _ => Color::White,
-        }
-    }
-
     fn item_status_char(item_type: Option<StatusItemType>) -> char {
         if let Some(item_type) = item_type {
             match item_type {
@@ -287,6 +267,7 @@ impl DrawableComponent for ChangesComponent {
                                 .tree
                                 .selection
                                 .map_or(false, |e| e == idx),
+                        self.theme,
                     )
                 },
             );
@@ -298,6 +279,7 @@ impl DrawableComponent for ChangesComponent {
             items,
             self.tree.selection.map(|idx| idx - selection_offset),
             self.focused,
+            self.theme,
         );
     }
 }