diff --git a/data/extensions/aseprite-theme/theme.xml b/data/extensions/aseprite-theme/theme.xml
index dae68915f..e949c1219 100644
--- a/data/extensions/aseprite-theme/theme.xml
+++ b/data/extensions/aseprite-theme/theme.xml
@@ -27,6 +27,7 @@
         <dim id="color_bar_buttons_height" value="16" />
         <dim id="context_bar_height" value="18" />
         <dim id="brush_type_width" value="16" />
+        <dim id="color_selector_bar_size" value="8" />
     </dimensions>
     <colors>
         <color id="text" value="#000000" />
diff --git a/src/app/ui/color_selector.cpp b/src/app/ui/color_selector.cpp
index 68389f650..fd2c2965b 100644
--- a/src/app/ui/color_selector.cpp
+++ b/src/app/ui/color_selector.cpp
@@ -487,8 +487,9 @@ void ColorSelector::paintColorIndicator(ui::Graphics* g,
 
 gfx::Rect ColorSelector::bottomBarBounds() const
 {
+  SkinTheme* theme = static_cast<SkinTheme*>(this->theme());
   const gfx::Rect rc = childrenBounds();
-  const int size = 8*guiscale();      // TODO 8 should be configurable in theme.xml
+  const int size = theme->dimensions.colorSelectorBarSize();
   if (rc.h > 2*size) {
     if (rc.h > 3*size)          // Alpha bar is visible too
       return gfx::Rect(rc.x, rc.y2()-size*2, rc.w, size);
@@ -501,8 +502,9 @@ gfx::Rect ColorSelector::bottomBarBounds() const
 
 gfx::Rect ColorSelector::alphaBarBounds() const
 {
+  SkinTheme* theme = static_cast<SkinTheme*>(this->theme());
   const gfx::Rect rc = childrenBounds();
-  const int size = 8*guiscale();      // TODO 8 should be configurable in theme.xml
+  const int size = theme->dimensions.colorSelectorBarSize();
   if (rc.h > 3*size)
     return gfx::Rect(rc.x, rc.y2()-size, rc.w, size);
   else