diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
index f419b4b3..9bd9ee29 100644
--- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
+++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
@@ -80,7 +80,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     self.imageHeight = self.options.mode == 'player' ? 16 : 18;
     self.imageTop = self.options.mode == 'player' ? 0 : 3;
     self.timelineTop = self.options.mode == 'player' ? 0 : 4;
-    self.theme = Ox.Theme();
+    self.themeData = Ox.Theme.getThemeData();
 
     that.css({
         height: self.height + 'px'
@@ -172,13 +172,13 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     ),
                     right = Math.round(
                         result.out / self.options.duration * width
-                    ) + 1;
+                    ) + 1,
+                    rgb = self.themeData.videoTimelineResultGradient;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
                         var alpha = self.options.mode == 'editor'
                                 && (y == top || y == bottom - 1) ? 255 : 128,
-                            color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
-                                ? [0, 0, 0] : [255, 255, 0],
+                            color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];
@@ -196,10 +196,12 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 ) + 1,
                 top = 0,
                 bottom = height,
-                rgb = self.options.state == 'editing' ? [[0, 128, 0], [128, 255, 128]]
-                    : self.options.state == 'editable' ? [[0, 0, 128], [128, 128, 255]]
-                    : self.options.state == 'selected' ? [[0, 0, 0], [255, 255, 255]]
-                    : [[32, 32, 32], [224, 224, 224]];
+                rgb = self.themeData[
+                    self.options.state == 'editable' ? 'videoTimelineEditableGradient'
+                    : self.options.state == 'editing' ? 'videoTimelineEditingGradient'
+                    : self.options.state == 'selected' ? 'videoTimelineSelectedGradient'
+                    : 'videoTimelineDefaultGradient'
+                ];
             Ox.loop(left, right, function(x) {
                 Ox.loop(top, bottom, function(y) {
                     var alpha = self.options.mode == 'editor'