diff --git a/crates/rnote-ui/data/ui/settingspanel.ui b/crates/rnote-ui/data/ui/settingspanel.ui
index 957792fc86..a92e05986e 100644
--- a/crates/rnote-ui/data/ui/settingspanel.ui
+++ b/crates/rnote-ui/data/ui/settingspanel.ui
@@ -127,6 +127,21 @@ gets disabled.</property>
                         </child>
                       </object>
                     </child>
+                    <child>
+                      <object class="AdwComboRow" id="general_background_invert_mode_row">
+                        <property name="title" translatable="yes">Invert Background Brightness</property>
+                        <property name="subtitle" translatable="yes">Invert the brightness of the background and pattern colors</property>
+                        <property name="model">
+                          <object class="GtkStringList">
+                            <items>
+                              <item translatable="yes">Disabled</item>
+                              <item translatable="yes">Enabled</item>
+                              <item translatable="yes">Follow system</item>
+                            </items>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
                   </object>
                 </child>
                 <!-- Format Group -->
@@ -440,18 +455,6 @@ gets disabled.</property>
                         <property name="subtitle" translatable="yes">Set whether the document origin indicator is shown</property>
                       </object>
                     </child>
-                    <child>
-                      <object class="AdwActionRow" id="background_pattern_invert_color_row">
-                        <property name="title" translatable="yes">Invert Color Brightness</property>
-                        <property name="subtitle" translatable="yes">Invert the brightness of the background and pattern colors</property>
-                        <child type="suffix">
-                          <object class="GtkButton" id="background_pattern_invert_color_button">
-                            <property name="valign">center</property>
-                            <property name="label" translatable="yes">Invert</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
                   </object>
                 </child>
                 <!-- Button Shortcuts Group -->
diff --git a/crates/rnote-ui/src/settingspanel/mod.rs b/crates/rnote-ui/src/settingspanel/mod.rs
index 71e54e78ac..37692c93da 100644
--- a/crates/rnote-ui/src/settingspanel/mod.rs
+++ b/crates/rnote-ui/src/settingspanel/mod.rs
@@ -57,6 +57,8 @@ mod imp {
         #[template_child]
         pub(crate) general_drawing_cursor_picker_menubutton: TemplateChild<MenuButton>,
         #[template_child]
+        pub(crate) general_background_invert_mode_row: TemplateChild<adw::ComboRow>,
+        #[template_child]
         pub(crate) format_predefined_formats_row: TemplateChild<adw::ComboRow>,
         #[template_child]
         pub(crate) format_save_preset_button: TemplateChild<Button>,
@@ -109,8 +111,6 @@ mod imp {
         #[template_child]
         pub(crate) doc_show_origin_indicator_row: TemplateChild<adw::SwitchRow>,
         #[template_child]
-        pub(crate) background_pattern_invert_color_button: TemplateChild<Button>,
-        #[template_child]
         pub(crate) penshortcut_stylus_button_primary_row: TemplateChild<RnPenShortcutRow>,
         #[template_child]
         pub(crate) penshortcut_stylus_button_secondary_row: TemplateChild<RnPenShortcutRow>,
@@ -397,6 +397,16 @@ impl RnSettingsPanel {
         self.imp().general_inertial_scrolling_row.clone()
     }
 
+    pub(crate) fn invert_mode(&self) -> u32 {
+        self.imp().general_background_invert_mode_row.selected()
+    }
+
+    pub(crate) fn set_background_pattern_invert_mode(&self, mode: u32) {
+        self.imp()
+            .general_background_invert_mode_row
+            .set_selected(mode);
+    }
+
     pub(crate) fn document_layout(&self) -> Layout {
         Layout::try_from(self.imp().doc_document_layout_row.get().selected()).unwrap()
     }
@@ -1144,43 +1154,14 @@ impl RnSettingsPanel {
                 }
             ));
 
-        imp.background_pattern_invert_color_button
+        imp.general_background_invert_mode_row
             .get()
-            .connect_clicked(clone!(
+            .connect_selected_item_notify(clone!(
+                #[weak(rename_to=settings_panel)]
+                self,
                 #[weak]
                 appwindow,
-                move |_| {
-                    let Some(canvas) = appwindow.active_tab_canvas() else {
-                        return;
-                    };
-
-                    let mut widget_flags = {
-                        let mut engine = canvas.engine_mut();
-                        engine.document.config.background.color = engine
-                            .document
-                            .config
-                            .background
-                            .color
-                            .to_inverted_brightness_color();
-                        engine.document.config.background.pattern_color = engine
-                            .document
-                            .config
-                            .background
-                            .pattern_color
-                            .to_inverted_brightness_color();
-                        engine.document.config.format.border_color = engine
-                            .document
-                            .config
-                            .format
-                            .border_color
-                            .to_inverted_brightness_color();
-                        engine.background_rendering_regenerate()
-                    };
-
-                    widget_flags.refresh_ui = true;
-                    widget_flags.store_modified = true;
-                    appwindow.handle_widget_flags(widget_flags, &canvas);
-                }
+                move |_| todo!()
             ));
     }