Text Styles App in egui — RichText, Color32 & Formatting, Ep16

Text Styles App in egui — RichText, Color32 & Formatting

In this tutorial, we create a desktop app using Rust's egui framework that demonstrates how to style text with RichText and Color32. The app features toggleable sections showcasing headings, body text, color highlights, and warning styles, all with an adjustable font size slider for dynamic control.

Code

use eframe::{egui, epi};
use egui::{Color32, RichText};

struct TextStylesApp {
  font_size: f32,
  show_headings: bool,
  show_body: bool,
  show_colors: bool,
  show_warnings: bool,
}

impl Default for TextStylesApp {
  fn default() -> Self {
    Self {
      font_size: 18.0,
      show_headings: true,
      show_body: true,
      show_colors: true,
      show_warnings: true,
    }
  }
}

impl epi::App for TextStylesApp {
  fn name(&self) -> &str {
    "Text Styles App"
  }

  fn update(&mut self, ctx: &egui::CtxRef, _frame: &epi::Frame) {
    // Scale UI based on font size
    ctx.set_pixels_per_point(self.font_size / 18.0);

    egui::TopBottomPanel::top("top_panel").show(ctx, |ui| {
      ui.horizontal(|ui| {
        ui.label("Font size:");
        ui.add(egui::Slider::new(&mut self.font_size, 10.0..=30.0));
      });
    });

    egui::SidePanel::left("side_panel").show(ctx, |ui| {
      ui.label("Toggle Sections:");
      ui.checkbox(&mut self.show_headings, "Headings");
      ui.checkbox(&mut self.show_body, "Body Text");
      ui.checkbox(&mut self.show_colors, "Color Highlights");
      ui.checkbox(&mut self.show_warnings, "Warnings");
    });

    egui::CentralPanel::default().show(ctx, |ui| {
      egui::ScrollArea::vertical().show(ui, |ui| {
        if self.show_headings {
          ui.label(
            RichText::new("Heading 1").size(self.font_size * 1.5).strong(),
          );
          ui.label(
            RichText::new("Heading 2").size(self.font_size * 1.3).italics(),
          );
          ui.separator();
        }

        if self.show_body {
          ui.label(
            RichText::new("This is some body text with ").size(self.font_size),
          );
          ui.label(
            RichText::new("underline").underline().size(self.font_size),
          );
          ui.label(
            RichText::new(" and ").size(self.font_size),
          );
          ui.label(
            RichText::new("strikethrough").strikethrough().size(self.font_size),
          );
          ui.separator();
        }

        if self.show_colors {
          ui.label(
            RichText::new("Success text").color(Color32::from_rgb(0, 200, 0)).size(self.font_size),
          );
          ui.label(
            RichText::new("Error text").color(Color32::from_rgb(200, 0, 0)).size(self.font_size),
          );
          ui.label(
            RichText::new("Info text").color(Color32::from_rgb(0, 0, 200)).size(self.font_size),
          );
          ui.separator();
        }

        if self.show_warnings {
          ui.label(
            RichText::new("Warning: Check your input!")
              .color(Color32::from_rgb(255, 165, 0))
              .strong()
              .size(self.font_size),
          );
          ui.label(
            RichText::new("Monospace code example")
              .monospace()
              .size(self.font_size),
          );
        }
      });
    });
  }
}

fn main() {
  let app = TextStylesApp::default();
  let native_options = eframe::NativeOptions::default();
  eframe::run_native(Box::new(app), native_options);
}

Key Points

• Use RichText::new() to create styled text with methods like .strong(), .italics(), and .underline().
• Adjust font size dynamically with .size() and scale the entire UI using ctx.set_pixels_per_point().
• Apply custom colors to text using Color32::from_rgb() for success, error, and info highlights.
• Organize UI with TopBottomPanel, SidePanel, and CentralPanel combined with ScrollArea for scrollable content.
• Use checkboxes to toggle visibility of different text style sections interactively.