diff --git a/src/ftxui/dom/scroll_indicator.cpp b/src/ftxui/dom/scroll_indicator.cpp
index 05480bb07..ec1386a04 100644
--- a/src/ftxui/dom/scroll_indicator.cpp
+++ b/src/ftxui/dom/scroll_indicator.cpp
@@ -64,7 +64,6 @@ Element vscroll_indicator(Element child) {
         const bool down = (start_y <= y_down) && (y_down <= start_y + size);
 
         const char* c = up ? (down ? "┃" : "╹") : (down ? "╻" : " ");  // NOLINT
-        screen.PixelAt(x, y) = Pixel();
         screen.PixelAt(x, y).character = c;
       }
     }
@@ -121,7 +120,6 @@ Element hscroll_indicator(Element child) {
 
         const char* c =
             left ? (right ? "─" : "╴") : (right ? "╶" : " ");  // NOLINT
-        screen.PixelAt(x, y) = Pixel();
         screen.PixelAt(x, y).character = c;
       }
     }
diff --git a/src/ftxui/dom/scroll_indicator_test.cpp b/src/ftxui/dom/scroll_indicator_test.cpp
index 3b104b197..7dbd4c0a7 100644
--- a/src/ftxui/dom/scroll_indicator_test.cpp
+++ b/src/ftxui/dom/scroll_indicator_test.cpp
@@ -9,6 +9,7 @@
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, operator|=, text, vbox, Elements, border, focus, frame, vscroll_indicator
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen
+#include "ftxui/screen/color.hpp"   // for Color, Color::Red
 
 // NOLINTBEGIN
 namespace ftxui {
@@ -127,6 +128,60 @@ TEST(ScrollIndicator, BasicVertical) {
             "╰────╯");
 }
 
+TEST(ScrollIndicator, VerticalColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | color(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color());
+}
+
+TEST(ScrollIndicator, VerticalBackgroundColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | bgcolor(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color());
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color::Red);
+}
+
+TEST(ScrollIndicator, VerticalFullColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | color(Color::Red) | bgcolor(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color::Red);
+}
+
 TEST(ScrollIndicator, BasicHorizontal) {
   EXPECT_EQ(PrintHorizontalList(0, 10),
             "╭────╮\r\n"
@@ -177,6 +232,54 @@ TEST(ScrollIndicator, BasicHorizontal) {
             "╰────╯");
 }
 
+TEST(ScrollIndicator, HorizontalColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | color(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color());
+}
+
+TEST(ScrollIndicator, HorizontalBackgroundColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | bgcolor(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color());
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color::Red);
+}
+
+TEST(ScrollIndicator, HorizontalFullColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | color(Color::Red) | bgcolor(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color::Red);
+}
+
 namespace {
 
 Element MakeHorizontalFlexboxList(int n) {