readme: add tips to customize current active theme

README.md

@@ -9,6 +9,7 @@ Opensource Git GUI client.
 * Fast
 * English/简体中文/繁體中文
 * Built-in light/dark themes
+* Customize theme
 * Visual commit graph
 * Supports SSH access with each remote
 * GIT commands with GUI
@@ -24,6 +25,8 @@ Opensource Git GUI client.
   * File histories
   * Blame
   * Revision Diffs
+  * Branch Diff
+  * Image Diff
 * GitFlow support
 
 > **Linux** only tested on **Ubuntu 22.04** on **X11**.
@@ -87,6 +90,47 @@ This app supports open repository in external tools listed in the table below.
 
 ![Theme Light](./screenshots/theme_light.png)
 
+## How to Customize Theme
+
+1. Create a new json file, and provide your favorite colors with follow keys:
+
+| Key | Description |
+| --- | --- |
+| Color.Window | Window background color |
+| Color.TitleBar | Title bar background color |
+| Color.ToolBar | Tool bar background color |
+| Color.Popup | Popup panel background color |
+| Color.Contents | Background color used in inputs, data grids, file content viewer, change lists, text diff viewer, etc. |
+| Color.Badage | Badage background color |
+| Color.Conflict | Conflict panel background color |
+| Color.ConflictForeground | Conflict panel foreground color |
+| Color.Border0 | Border color used in some controls, like Window, Tab, Toolbar, etc. |
+| Color.Border1 | Border color used in inputs, like TextBox, ComboBox, etc. |
+| Color.Border2 | Border color used in visual lines, like seperators, Rectange, etc. |
+| Color.FlatButton.Background | Flat button background color, like `Cancel`, `Commit & Push` button |
+| Color.FlatButton.BackgroundHovered | Flat button background color when hovered, like `Cancel` button |
+| Color.FlatButton.PrimaryBackground | Primary flat button background color, like `Ok`, `Commit` button |
+| Color.FlatButton.PrimaryBackgroundHovered | Primary flat button background color when hovered, like `Ok`, `Commit` button |
+| Color.FG1 | Primary foreground color for all text elements |
+| Color.FG2 | Secondary foreground color for all text elements |
+| Color.Diff.EmptyBG | Background color used in empty lines in diff viewer |
+| Color.Diff.AddedBG | Background color used in added lines in diff viewer |
+| Color.Diff.DeletedBG | Background color used in deleted lines in diff viewer |
+| Color.Diff.AddedHighlight | Background color used for changed words in added lines in diff viewer |
+| Color.Diff.DeletedHighlight | Background color used for changed words in deleted lines in diff viewer |
+
+For example:
+
+```json
+{
+  "Color.Window": "#FFFF6059"
+}
+```
+
+2. Open `Preference` -> `Appearance`, choose the json file you just created in `Custom Color Schema`.
+
+> **NOTE**: The `Custom Color Schema` will override the colors with same keys in current active theme.
+
 ## Contributing
 
 Thanks to all the people who contribute.

src/Resources/Themes.axaml

@@ -14,17 +14,16 @@
       <Color x:Key="Color.Decorator">#FF6F6F6F</Color>
       <Color x:Key="Color.DecoratorIcon">#FFF8F8F8</Color>
       <Color x:Key="Color.Conflict">#FF836C2E</Color>
+      <Color x:Key="Color.ConflictForeground">#FFFFFFFF</Color>
       <Color x:Key="Color.Border0">#FFCFCFCF</Color>
       <Color x:Key="Color.Border1">#FF898989</Color>
       <Color x:Key="Color.Border2">#FFCFCFCF</Color>
-      <Color x:Key="Color.Border3">#FFEFEFEF</Color>
       <Color x:Key="Color.FlatButton.Background">#FFF8F8F8</Color>
       <Color x:Key="Color.FlatButton.BackgroundHovered">White</Color>
       <Color x:Key="Color.FlatButton.PrimaryBackground">#FF4295FF</Color>
       <Color x:Key="Color.FlatButton.PrimaryBackgroundHovered">#FF529DFB</Color>
       <Color x:Key="Color.FG1">#FF1F1F1F</Color>
       <Color x:Key="Color.FG2">#FF6F6F6F</Color>
-      <Color x:Key="Color.FG3">#FFFFFFFF</Color>
       <Color x:Key="Color.Diff.EmptyBG">#3C000000</Color>
       <Color x:Key="Color.Diff.AddedBG">#3C00FF00</Color>
       <Color x:Key="Color.Diff.DeletedBG">#3CFF0000</Color>
@@ -45,17 +44,16 @@
       <Color x:Key="Color.Decorator">#FF505050</Color>
       <Color x:Key="Color.DecoratorIcon">#FFF8F8F8</Color>
       <Color x:Key="Color.Conflict">#FFFAFAD2</Color>
+      <Color x:Key="Color.ConflictForeground">#FF252525</Color>
       <Color x:Key="Color.Border0">#FF181818</Color>
       <Color x:Key="Color.Border1">#FF7C7C7C</Color>
       <Color x:Key="Color.Border2">#FF404040</Color>
-      <Color x:Key="Color.Border3">#FF252525</Color>
       <Color x:Key="Color.FlatButton.Background">#FF303030</Color>
       <Color x:Key="Color.FlatButton.BackgroundHovered">#FF333333</Color>
       <Color x:Key="Color.FlatButton.PrimaryBackground">#FF3A3A3A</Color>
       <Color x:Key="Color.FlatButton.PrimaryBackgroundHovered">#FF404040</Color>
       <Color x:Key="Color.FG1">#FFDDDDDD</Color>
       <Color x:Key="Color.FG2">#40F1F1F1</Color>
-      <Color x:Key="Color.FG3">#FF252525</Color>
       <Color x:Key="Color.Diff.EmptyBG">#3C000000</Color>
       <Color x:Key="Color.Diff.AddedBG">#3C00FF00</Color>
       <Color x:Key="Color.Diff.DeletedBG">#3CFF0000</Color>
@@ -76,17 +74,16 @@
   <SolidColorBrush x:Key="Brush.Decorator" Color="{DynamicResource Color.Decorator}"/>
   <SolidColorBrush x:Key="Brush.DecoratorIcon" Color="{DynamicResource Color.DecoratorIcon}"/>
   <SolidColorBrush x:Key="Brush.Conflict" Color="{DynamicResource Color.Conflict}"/>
+  <SolidColorBrush x:Key="Brush.ConflictForeground" Color="{DynamicResource Color.ConflictForeground}"/>
   <SolidColorBrush x:Key="Brush.Border0" Color="{DynamicResource Color.Border0}"/>
   <SolidColorBrush x:Key="Brush.Border1" Color="{DynamicResource Color.Border1}"/>
   <SolidColorBrush x:Key="Brush.Border2" Color="{DynamicResource Color.Border2}"/>
-  <SolidColorBrush x:Key="Brush.Border3" Color="{DynamicResource Color.Border3}"/>
   <SolidColorBrush x:Key="Brush.FlatButton.Background" Color="{DynamicResource Color.FlatButton.Background}"/>
   <SolidColorBrush x:Key="Brush.FlatButton.BackgroundHovered" Color="{DynamicResource Color.FlatButton.BackgroundHovered}"/>
   <SolidColorBrush x:Key="Brush.FlatButton.PrimaryBackground" Color="{DynamicResource Color.FlatButton.PrimaryBackground}"/>
   <SolidColorBrush x:Key="Brush.FlatButton.PrimaryBackgroundHovered" Color="{DynamicResource Color.FlatButton.PrimaryBackgroundHovered}"/>
   <SolidColorBrush x:Key="Brush.FG1" Color="{DynamicResource Color.FG1}"/>
   <SolidColorBrush x:Key="Brush.FG2" Color="{DynamicResource Color.FG2}"/>
-  <SolidColorBrush x:Key="Brush.FG3" Color="{DynamicResource Color.FG3}"/>
   <SolidColorBrush x:Key="Brush.Accent" Color="{DynamicResource SystemAccentColor}"/>
   <SolidColorBrush x:Key="Brush.AccentHovered" Color="{DynamicResource SystemListLowColor}"/>
   <SolidColorBrush x:Key="Brush.Diff.EmptyBG" Color="{DynamicResource Color.Diff.EmptyBG}"/>

src/Views/Repository.axaml

@@ -615,19 +615,19 @@
           <ContentControl Grid.Column="0" Margin="8,0" Content="{Binding InProgressContext}">
             <ContentControl.DataTemplates>
               <DataTemplate DataType="vm:CherryPickInProgress">
-                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.FG3}" Text="{DynamicResource Text.InProgress.CherryPick}"/>
+                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.ConflictForeground}" Text="{DynamicResource Text.InProgress.CherryPick}"/>
               </DataTemplate>
 
               <DataTemplate DataType="vm:RebaseInProgress">
-                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.FG3}" Text="{DynamicResource Text.InProgress.Rebase}"/>
+                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.ConflictForeground}" Text="{DynamicResource Text.InProgress.Rebase}"/>
               </DataTemplate>
 
               <DataTemplate DataType="vm:RevertInProgress">
-                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.FG3}" Text="{DynamicResource Text.InProgress.Revert}"/>
+                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.ConflictForeground}" Text="{DynamicResource Text.InProgress.Revert}"/>
               </DataTemplate>
 
               <DataTemplate DataType="vm:MergeInProgress">
-                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.FG3}" Text="{DynamicResource Text.InProgress.Merge}"/>
+                <TextBlock FontWeight="Bold" Foreground="{DynamicResource Brush.ConflictForeground}" Text="{DynamicResource Text.InProgress.Merge}"/>
               </DataTemplate>
             </ContentControl.DataTemplates>
           </ContentControl>