3 files changed, 15 insertions, 14 deletions
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass
index fd0beb75..3561c3da 100644
--- a/FrontEnd/src/app/views/common/common.sass
+++ b/FrontEnd/src/app/views/common/common.sass
@@ -46,7 +46,7 @@
   background-color: var(--tl-primary-color)
 
   a
-    color: var(--tl-text-inactive-on-primary-color)
+    color: var(--tl-text-on-primary-inactive-color)
     text-decoration: none
     margin: 0 1em
 
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 5b6dfa9c..baaad139 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -11,6 +11,7 @@ import Timeline from "./Timeline";
 import TimelinePostEdit from "./TimelinePostEdit";
 
 import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
+import { generatePalette, setPalette } from "@/palette";
 
 export interface TimelinePageCardProps {
   timeline: HttpTimelineInfo;
@@ -75,6 +76,12 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
     };
   }, [timelineName, reloadKey]);
 
+  React.useEffect(() => {
+    if (timeline != null && timeline.color != null) {
+      return setPalette(generatePalette({ primary: timeline.color }));
+    }
+  }, [timeline]);
+
   const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0);
 
   const [timelineReloadKey, setTimelineReloadKey] = React.useState<number>(0);
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 3734ba25..0b0bd24d 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -9,28 +9,20 @@
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
-$timeline-line-color: $primary
-$timeline-line-color-current: #36c2e6
+$timeline-line-color: var(--tl-primary-color)
+$timeline-line-color-current: var(--tl-primary-enhance-color)
 
 @keyframes timeline-line-node-noncurrent
-  from
-    background: $timeline-line-color
-
   to
-    background: color.adjust($timeline-line-color, $lightness: +10%)
-    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)
+    box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color)
 
 @keyframes timeline-line-node-current
-  from
-    background: $timeline-line-color-current
-
   to
-    background: color.adjust($timeline-line-color-current, $lightness: +10%)
-    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
+    box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color)
 
 @keyframes timeline-line-node-loading
   to
-    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +20%)
+    box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color)
 
 @keyframes timeline-line-node-loading-edge
   from
@@ -100,6 +92,7 @@ $timeline-line-color-current: #36c2e6
     width: $timeline-line-node-radius + 2
     height: $timeline-line-node-radius + 2
     position: absolute
+    background: $timeline-line-color
     left: -1px
     top: -1px
     border-radius: 50%
@@ -126,6 +119,7 @@ $timeline-line-color-current: #36c2e6
       &.end
         background: $timeline-line-color-current
     .node
+      background: $timeline-line-color-current
       animation-name: timeline-line-node-current
 
   &.loading