|
13 | 13 |
|
14 | 14 | ## Table of Contents
|
15 | 15 |
|
16 |
| -- [Install](#install) |
17 | 16 | - [About](#about)
|
| 17 | +- [Install](#install) |
18 | 18 | - [Usage](#usage)
|
19 | 19 | - [Maintainers](#maintainers)
|
20 |
| -- [Contributing](#contributing) |
21 | 20 | - [License](#license)
|
22 | 21 |
|
23 |
| -## Install |
| 22 | +## About |
24 | 23 |
|
25 |
| -```bash |
26 |
| -cargo add egui-aesthetix |
27 |
| -``` |
| 24 | +This library is my answer to theming egui. There are other libraries, and approaches. |
| 25 | +I like this method because it is trait based, so many themes could be added to this crate for everyone to use. |
28 | 26 |
|
29 |
| -## About |
| 27 | +### Default themes |
| 28 | + |
| 29 | +> The library ships with the following themes if deafault features are left on. |
| 30 | +> These should look great on Mac, Windows and Linux alike. |
| 31 | +
|
| 32 | +1. Standard Dark |
| 33 | + - Based off of the [Gnome Adwaita color palette](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/named-colors.html) |
30 | 34 |
|
31 |
| -This library is my answer to theming egui. There are other libraries, and approaches. I like this method because it is trait based, |
32 |
| -so many themes could be added to this crate for everyone to use. |
| 35 | +2. Standard Light |
| 36 | + - Based off of the [Gnome Adwaita color palette](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/named-colors.html) |
33 | 37 |
|
34 |
| -By default a Dark and Light theme based off of the [Gnome Adwaita color palette](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/named-colors.html) ships with the library. It should look pretty good on Windows, Mac and obviously Linux. |
| 38 | +### Other themes |
| 39 | + |
| 40 | +> There are plenty of other themes that can be specified through features |
| 41 | +
|
| 42 | +1. Carl Dark |
| 43 | + - Based off of the [Kde plasma theme](https://store.kde.org/p/1338881/) |
| 44 | + |
| 45 | +2. Gruvbox (Light and Dark) |
| 46 | + - TODO |
| 47 | + |
| 48 | +3. Nord (Light and Dark) |
| 49 | + - TODO |
| 50 | + |
| 51 | +4. Catppuccin (All versions) |
| 52 | + - TODO |
35 | 53 |
|
36 | 54 | <details>
|
37 | 55 | <summary>Screen Shots</summary>
|
38 | 56 | <br>
|
39 | 57 |
|
40 | 58 | <div align="center">
|
41 |
| - <h3>Dark Mode on Kde Plasma</h3> |
42 |
| - <img alt="Dark Mode on KDE Plasma" src="./assets/standard_dark.png"> |
| 59 | + <h3>Standard Dark theme on Kde Plasma</h3> |
| 60 | + <img alt="Standard Dark" src="./assets/standard_dark.png"> |
| 61 | + <br> |
| 62 | + <h3>Standard Light theme on Kde Plasma</h3> |
| 63 | + <img alt="Standard Light" src="./assets/standard_light.png"> |
43 | 64 | <br>
|
44 |
| - <h3>Light Mode on Kde Plasma</h3> |
45 |
| - <img alt="Light Mode on KDE Plasma" src="./assets/standard_light.png"> |
| 65 | + <h3>Carl Dark theme Kde on Plasma</h3> |
| 66 | + <img alt="Standard Light" src="./assets/carl_dark.png"> |
46 | 67 | </div>
|
47 | 68 | </details>
|
48 | 69 |
|
49 |
| -## Usage |
| 70 | +## Install |
50 | 71 |
|
51 |
| -Simple to use, let's implement the [Gruvbox Dark](https://github.com/morhetz/gruvbox#dark-mode-1) |
52 |
| -color scheme really quickly. |
| 72 | +The library is very flexible and doesn't force you to include themes you don't want. |
53 | 73 |
|
54 |
| -<details> |
55 |
| -<summary>Code Example</summary> |
56 |
| -<br> |
| 74 | +> This includes default features which is the Aesthetix trait, and |
| 75 | +> the StandardDark and StandardLight themes |
57 | 76 |
|
58 |
| -```rust |
59 |
| -//! main.rs example |
60 |
| -use egui_aesthetix::{ |
61 |
| - Aesthetix, |
62 |
| - themes::{StandardDark, StandardLight}, |
63 |
| -}; |
64 |
| -use eframe::egui; |
65 |
| -use std::rc::Rc; |
66 |
| - |
67 |
| -/// Make a struct that represents a color scheme, |
68 |
| -/// there should be no need for it to have any fields. |
69 |
| -struct GruvboxDark; |
70 |
| - |
71 |
| -/// Implement the Aesthetix Trait for the theme. |
72 |
| -impl Aesthetix for GruvboxDark { |
73 |
| - fn name(&self) -> &str { |
74 |
| - "Gruvbox Dark" |
75 |
| - } |
76 |
| - |
77 |
| - fn primary_accent_color_visuals(&self) -> egui::Color32 { |
78 |
| - // Dark blue: #458588 |
79 |
| - egui::Color32::from_rgb(69, 133, 136) |
80 |
| - } |
81 |
| - |
82 |
| - fn secondary_accent_color_visuals(&self) -> egui::Color32 { |
83 |
| - // Light blue: #83a598 |
84 |
| - egui::Color32::from_rgb(131, 165, 152) |
85 |
| - } |
86 |
| - |
87 |
| - fn bg_primary_color_visuals(&self) -> egui::Color32 { |
88 |
| - // Dark background: #1d2021 |
89 |
| - egui::Color32::from_rgb(29, 32, 33) |
90 |
| - } |
91 |
| - |
92 |
| - fn bg_secondary_color_visuals(&self) -> egui::Color32 { |
93 |
| - // #3c3836 |
94 |
| - egui::Color32::from_rgb(60, 56, 54) |
95 |
| - } |
96 |
| - |
97 |
| - fn bg_triage_color_visuals(&self) -> egui::Color32 { |
98 |
| - // #504945 |
99 |
| - egui::Color32::from_rgb(80, 73, 69) |
100 |
| - } |
101 |
| - |
102 |
| - fn bg_auxiliary_color_visuals(&self) -> egui::Color32 { |
103 |
| - // #665c54 |
104 |
| - egui::Color32::from_rgb(102, 92, 84) |
105 |
| - } |
106 |
| - |
107 |
| - fn bg_contrast_color_visuals(&self) -> egui::Color32 { |
108 |
| - // #928374 |
109 |
| - egui::Color32::from_rgb(146, 131, 116) |
110 |
| - } |
111 |
| - |
112 |
| - fn fg_primary_text_color_visuals(&self) -> Option<egui::Color32> { |
113 |
| - // #fbf1c7 |
114 |
| - Some(egui::Color32::from_rgb(251, 241, 199)) |
115 |
| - } |
116 |
| - |
117 |
| - fn fg_success_text_color_visuals(&self) -> egui::Color32 { |
118 |
| - // #8ec07c |
119 |
| - egui::Color32::from_rgb(142, 192, 124) |
120 |
| - } |
121 |
| - |
122 |
| - fn fg_warn_text_color_visuals(&self) -> egui::Color32 { |
123 |
| - // #fabd2f |
124 |
| - egui::Color32::from_rgb(250, 189, 47) |
125 |
| - } |
126 |
| - |
127 |
| - fn fg_error_text_color_visuals(&self) -> egui::Color32 { |
128 |
| - // #fb4934 |
129 |
| - egui::Color32::from_rgb(251, 73, 52) |
130 |
| - } |
131 |
| - |
132 |
| - fn dark_mode_visuals(&self) -> bool { |
133 |
| - true |
134 |
| - } |
135 |
| - |
136 |
| - fn margin_style(&self) -> f32 { |
137 |
| - 10.0 |
138 |
| - } |
139 |
| - |
140 |
| - fn button_padding(&self) -> egui::Vec2 { |
141 |
| - egui::Vec2 { x: 10.0, y: 8.0 } |
142 |
| - } |
143 |
| - |
144 |
| - fn item_spacing_style(&self) -> f32 { |
145 |
| - 15.0 |
146 |
| - } |
147 |
| - |
148 |
| - fn scroll_bar_width_style(&self) -> f32 { |
149 |
| - 12.0 |
150 |
| - } |
151 |
| - |
152 |
| - fn rounding_visuals(&self) -> f32 { |
153 |
| - 8.0 |
154 |
| - } |
155 |
| -} |
156 |
| - |
157 |
| -fn main() -> Result<(), eframe::Error> { |
158 |
| - let options = eframe::NativeOptions { |
159 |
| - initial_window_size: Some(egui::vec2(320.0, 240.0)), |
160 |
| - ..Default::default() |
161 |
| - }; |
162 |
| - |
163 |
| - eframe::run_native( |
164 |
| - "My egui App", |
165 |
| - options, |
166 |
| - Box::new(move |creation_context| Box::new(MyApp::new(creation_context))), |
167 |
| - ) |
168 |
| -} |
169 |
| - |
170 |
| -struct MyApp { |
171 |
| - themes: Vec<Rc<dyn Aesthetix>>, // Available themes for user to switch to. |
172 |
| - active_theme: Rc<dyn Aesthetix>, // Currently active theme. |
173 |
| -} |
174 |
| - |
175 |
| -impl MyApp { |
176 |
| - #[must_use] |
177 |
| - fn new(creation_context: &eframe::CreationContext<'_>) -> Self { |
178 |
| - let themes: Vec<Rc<dyn Aesthetix>> = vec![ |
179 |
| - Rc::new(Gruvbox), |
180 |
| - Rc::new(StandardDark), // Bundled in the library |
181 |
| - Rc::new(StandardLight) // Bundled in the library |
182 |
| - ]; |
183 |
| - |
184 |
| - // The first theme will be the default |
185 |
| - let active_theme: Rc<dyn Aesthetix> = match themes.first() { |
186 |
| - Some(theme) => theme.clone(), |
187 |
| - None => panic!( |
188 |
| - "The first theme in the list of available themes could not be loaded => 'MyApp::new'" |
189 |
| - ), |
190 |
| - } |
191 |
| - |
192 |
| - creation_context |
193 |
| - .egui_ctx |
194 |
| - .set_style(active_theme.custom_style()); |
195 |
| - |
196 |
| - Self { |
197 |
| - themes, |
198 |
| - active_theme, |
199 |
| - } |
200 |
| - } |
201 |
| -} |
202 |
| - |
203 |
| -impl eframe::App for MyApp { |
204 |
| - fn update(&mut self, context: &egui::Context, _frame: &mut eframe::Frame) { |
205 |
| - // Whenever you make a custom frame, we need to manually set the style atributes, |
206 |
| - // not sure why, as every thing else is set. |
207 |
| - egui::CentralPanel::default() |
208 |
| - .frame( |
209 |
| - egui::Frame::none() |
210 |
| - .inner_margin(self.active_theme.margin_style()) |
211 |
| - .fill(self.active_theme.bg_primary_color_visuals()), |
212 |
| - ) |
213 |
| - .show(context, |ui_central_panel| { |
214 |
| - ui_central_panel.heading("Theme Switcher Example"); |
215 |
| - ui_central_panel.horizontal_centered(|ui_horizontal_center| { |
216 |
| - // add combo box to allow the user to select from the available themes in the themes vector |
217 |
| - ui_horizontal_center.add_space(15.0); |
218 |
| - ui_horizontal_center.label("Theme:"); |
219 |
| - egui::ComboBox::from_id_source("theme_switching_combo_box") |
220 |
| - .width(200.0) |
221 |
| - .selected_text(self..active_theme.name()) |
222 |
| - .show_ui(ui_horizontal_center, |ui_combobox| { |
223 |
| - for theme in self.themes.iter() { |
224 |
| - ui_combobox.selectable_value( |
225 |
| - &mut self.active_theme, |
226 |
| - theme.clone(), |
227 |
| - theme.name(), |
228 |
| - ); |
229 |
| - } |
230 |
| - }); |
231 |
| - }); |
232 |
| - // Update the theme with the one the user selected in selectable_value. |
233 |
| - // In a real application you would want this in another tab or something. |
234 |
| - context.set_style(self.active_theme.custom_style()); |
235 |
| - }); |
236 |
| - } |
237 |
| -} |
| 77 | +```toml |
| 78 | +egui-aesthetix = "0.2.0" |
238 | 79 | ```
|
239 | 80 |
|
240 |
| -</details> |
| 81 | +> Only includes the Aesthetix trait, no themes will be included |
241 | 82 |
|
242 |
| -Here is the library used in a [dashboard template from the above screen shots](https://github.com/thebashpotato/egui-dashboard-template) |
| 83 | +```toml |
| 84 | +egui-aesthetix = { version = "0.2.0", default-features = false } |
| 85 | +``` |
243 | 86 |
|
244 |
| -## Maintainers |
| 87 | +> Include all the themes |
245 | 88 |
|
246 |
| -[@thebashpotato](https://github.com/thebashpotato) |
| 89 | +```toml |
| 90 | +egui-aesthetix = { version = "0.2.0", features = ["all_themes"] } |
| 91 | +``` |
247 | 92 |
|
248 |
| -## Contributing |
| 93 | +> Only include standard themes and a specified theme (here carl is used as the specified theme) |
249 | 94 |
|
250 |
| -See [the contributing file](CONTRIBUTING.md)! |
| 95 | +```toml |
| 96 | +egui-aesthetix = { version = "0.2.0", features = ["standard", "carl" ] } |
| 97 | +``` |
| 98 | + |
| 99 | +## Usage |
| 100 | + |
| 101 | +Here is the [dashboard template from the above screen shots](https://github.com/thebashpotato/egui-dashboard-template) using this crate for its themes. The code is |
| 102 | +straight forward to read. Reading the `egui-aesthetix` source code and the dashboard code |
| 103 | +should give you more than enough information and context to use it in your own applications |
| 104 | +as well as implement your own custom themes using the `Aesthetix` trait. **Happy Theming!!** |
| 105 | + |
| 106 | +## Maintainers |
| 107 | + |
| 108 | +[@thebashpotato](https://github.com/thebashpotato) |
251 | 109 |
|
252 | 110 | PRs accepted.
|
253 | 111 |
|
|
0 commit comments