diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index c9d7b23..37398d6 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -978,3 +978,16 @@ hr {
     background-color: var(--sage-brand, #6366f1) !important;
     color: #fff !important;
 }
+[data-theme="dark"] .dimension-btn-active {
+    background-color: var(--sage-brand, #818cf8) !important;
+}
+
+/* DimensionFilter base */
+.dimension-filter {
+    background: var(--sage-bg, #fff);
+    color: var(--sage-text, #333);
+}
+[data-theme="dark"] .dimension-filter {
+    background: var(--sage-bg-dark, #1e1e2e);
+    color: var(--sage-text-dark, #e0e0e0);
+}
diff --git a/bricks/dimension_filter.js b/bricks/dimension_filter.js
index ff34cc6..466dca0 100644
--- a/bricks/dimension_filter.js
+++ b/bricks/dimension_filter.js
@@ -19,6 +19,7 @@ bricks.DimensionFilter = class extends bricks.VBox {
 		super(opts);
 		this.dom_element.style.display = 'flex';
 		this.dom_element.style.flexDirection = 'column';
+		this.set_css('dimension-filter');
 		this.selected_h_id = 'all';
 		this.selected_v_id = 'all';
 		this.search_keyword = '';