diff --git a/thaw/src/loading_bar/loading-bar.css b/thaw/src/loading_bar/loading-bar.css
index 5049175..529178c 100644
--- a/thaw/src/loading_bar/loading-bar.css
+++ b/thaw/src/loading_bar/loading-bar.css
@@ -1,4 +1,4 @@
-.thaw-loading-bar-container {
+div.thaw-loading-bar-container {
     position: fixed;
     top: 0;
     left: 0;
diff --git a/thaw/src/loading_bar/mod.rs b/thaw/src/loading_bar/mod.rs
index 3374185..a30d0a6 100644
--- a/thaw/src/loading_bar/mod.rs
+++ b/thaw/src/loading_bar/mod.rs
@@ -2,9 +2,9 @@ mod loading_bar_provider;
 
 pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
 
-use crate::{use_theme, Theme};
 use leptos::*;
 use thaw_utils::{mount_style, ComponentRef};
+use crate::ConfigInjection;
 
 #[derive(Clone)]
 pub(crate) struct LoadingBarRef {
@@ -28,29 +28,15 @@ impl LoadingBarRef {
 #[component]
 pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
     mount_style("loading-bar", include_str!("./loading-bar.css"));
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.common.color_success
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-background-color-error: {};",
-                theme.common.color_error
-            ));
-        });
-        css_vars
-    });
-    let loading_bar_ref = create_node_ref::<html::Div>();
-    let loading = create_rw_signal(false);
+    let config_provider = ConfigInjection::use_();
+    let loading_bar_ref = NodeRef::<html::Div>::new();
+    let loading = RwSignal::new(false);
 
     let start = Callback::new(move |_| {
         loading.set(true);
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
             let loading_bar_ref = loading_bar_ref
-                .style("background-color", "var(--thaw-background-color)")
+                .style("background-color", "var(--colorStatusSuccessForeground1)")
                 .style("transition", "none")
                 .style("max-width", "0");
             _ = loading_bar_ref.offset_width();
@@ -69,7 +55,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     let finish = Callback::new(move |_| {
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
             _ = loading_bar_ref
-                .style("background-color", "var(--thaw-background-color)")
+                .style("background-color", "var(--colorStatusSuccessForeground1)")
                 .style("transition", "max-width 0.5s linear")
                 .style("max-width", "100%");
             is_on_transitionend.set_value(true);
@@ -86,7 +72,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
                 _ = loading_bar_ref.offset_width();
             }
             _ = loading_bar_ref
-                .style("background-color", "var(--thaw-background-color-error)")
+                .style("background-color", "var(--colorStatusDangerForeground1)")
                 .style("transition", "max-width 0.5s linear")
                 .style("max-width", "100%");
             is_on_transitionend.set_value(true);
@@ -100,13 +86,13 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     });
     view! {
         <div
-            class="thaw-loading-bar-container"
+            class="thaw-config-provider thaw-loading-bar-container"
+            data-thaw-id=config_provider.id().clone()
             style=move || (!loading.get()).then_some("display: none;")
         >
             <div
                 class="thaw-loading-bar"
                 ref=loading_bar_ref
-                style=move || css_vars.get()
                 on:transitionend=on_transitionend
             ></div>
         </div>
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index b621229..7455eb8 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -87,6 +87,9 @@ pub struct ColorTheme {
     pub color_palette_dark_orange_foreground_3: String,
     pub color_palette_dark_orange_border_1: String,
 
+    pub color_status_success_foreground_1: String,
+    pub color_status_danger_foreground_1: String,
+
     pub color_subtle_background: String,
     pub color_subtle_background_hover: String,
     pub color_subtle_background_pressed: String,
@@ -188,6 +191,9 @@ impl ColorTheme {
             color_palette_dark_orange_foreground_3: "#da3b01".into(),
             color_palette_dark_orange_border_1: "#f4bfab".into(),
 
+            color_status_success_foreground_1: "#0e700e".into(),
+            color_status_danger_foreground_1: "#b10e1c".into(),
+
             color_subtle_background: "transparent".into(),
             color_subtle_background_hover: "#f5f5f5".into(),
             color_subtle_background_pressed: "#e0e0e0".into(),
@@ -289,6 +295,9 @@ impl ColorTheme {
             color_palette_dark_orange_foreground_3: "#e9835e".into(),
             color_palette_dark_orange_border_1: "#da3b01".into(),
 
+            color_status_success_foreground_1: "#54b054".into(),
+            color_status_danger_foreground_1: "#dc626d".into(),
+
             color_subtle_background: "transparent".into(),
             color_subtle_background_hover: "#383838".into(),
             color_subtle_background_pressed: "#2e2e2e".into(),