fix: CodeTheme functions - ui and add builder (#7684)

Following this MR https://github.com/emilk/egui/pull/7375

Without Syntect, the urrent theme selector is
`global_theme_preference_buttons`. It should be the dark_theme variable
of the local CodeTheme - same as syntect


Tested with

```sh
cargo run
# and
cargo run --features syntect 
```

* [x] I have followed the instructions in the PR template


thanks for this amazing library!

crates/egui_demo_lib/src/demo/code_editor.rs

@@ -90,15 +90,25 @@ impl crate::View for CodeEditor {
         };
 
         egui::ScrollArea::vertical().show(ui, |ui| {
-            ui.add(
+            let editor = egui::TextEdit::multiline(code)
-                egui::TextEdit::multiline(code)
+                .font(egui::TextStyle::Monospace) // for cursor height
-                    .font(egui::TextStyle::Monospace) // for cursor height
+                .code_editor()
-                    .code_editor()
+                .desired_rows(10)
-                    .desired_rows(10)
+                .lock_focus(true)
-                    .lock_focus(true)
+                .desired_width(f32::INFINITY)
-                    .desired_width(f32::INFINITY)
+                .layouter(&mut layouter);
-                    .layouter(&mut layouter),
+            let editor = if cfg!(feature = "syntect") {
-            );
+                editor
+            } else {
+                use egui::Color32;
+                let background_color = if theme.is_dark() {
+                    Color32::BLACK
+                } else {
+                    Color32::WHITE
+                };
+                editor.background_color(background_color)
+            };
+            ui.add(editor);
         });
     }
 }

crates/egui_extras/src/syntax_highlighting.rs

@@ -228,6 +228,10 @@ impl Default for CodeTheme {
 }
 
 impl CodeTheme {
+    pub fn is_dark(&self) -> bool {
+        self.dark_mode
+    }
+
     /// Selects either dark or light theme based on the given style.
     pub fn from_style(style: &egui::Style) -> Self {
         let font_id = style
@@ -315,6 +319,24 @@ impl CodeTheme {
 
 #[cfg(feature = "syntect")]
 impl CodeTheme {
+    /// Change the font size
+    pub fn with_font_size(&self, font_size: f32) -> Self {
+        Self {
+            dark_mode: self.dark_mode,
+            syntect_theme: self.syntect_theme,
+            font_id: egui::FontId::monospace(font_size),
+        }
+    }
+
+    /// Change the `font_id` of the theme
+    pub fn with_font_id(&self, font_id: egui::FontId) -> Self {
+        Self {
+            dark_mode: self.dark_mode,
+            syntect_theme: self.syntect_theme,
+            font_id,
+        }
+    }
+
     fn dark_with_font_id(font_id: egui::FontId) -> Self {
         Self {
             dark_mode: true,
@@ -331,10 +353,6 @@ impl CodeTheme {
         }
     }
 
-    pub fn is_dark(&self) -> bool {
-        self.dark_mode
-    }
-
     /// Show UI for changing the color theme.
     pub fn ui(&mut self, ui: &mut egui::Ui) {
         ui.horizontal(|ui| {
@@ -344,11 +362,9 @@ impl CodeTheme {
             ui.selectable_value(&mut self.dark_mode, false, "☀ Light theme")
                 .on_hover_text("Use the light mode theme");
         });
-
+        let current_theme_is_dark = self.is_dark();
-        for theme in SyntectTheme::all() {
+        for theme in SyntectTheme::all().filter(|t| t.is_dark() == current_theme_is_dark) {
-            if theme.is_dark() == self.dark_mode {
+            ui.radio_value(&mut self.syntect_theme, theme, theme.name());
-                ui.radio_value(&mut self.syntect_theme, theme, theme.name());
-            }
         }
     }
 }
@@ -408,12 +424,13 @@ impl CodeTheme {
 
             ui.vertical(|ui| {
                 ui.set_width(150.0);
-                egui::widgets::global_theme_preference_buttons(ui);
+                ui.horizontal(|ui| {
-
+                    ui.selectable_value(&mut self.dark_mode, true, "🌙 Dark theme")
-                ui.add_space(8.0);
+                        .on_hover_text("Use the dark mode theme");
-                ui.separator();
-                ui.add_space(8.0);
 
+                    ui.selectable_value(&mut self.dark_mode, false, "☀ Light theme")
+                        .on_hover_text("Use the light mode theme");
+                });
                 ui.scope(|ui| {
                     for (tt, tt_name) in [
                         (TokenType::Comment, "// comment"),