new theme option titleHighlightActive to change highlight color

prabhuignoto · Dec 28, 2023 · 55d32aa · 55d32aa
1 parent 4a6dd15
commit 55d32aa
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/...eport/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts.html b/...eport/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts.html
@@ -130,7 +130,9 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">component
   color: ${(p) =&gt; (p.theme ? p.theme.<span class="branch-0 cbranch-no" title="branch not covered" >titleColor : '')}</span>;
 &nbsp;
   &amp;.active {
-    background: ${(p) =&gt; p.theme?.secondary};
+    background: ${(p) =&gt; 
+        p.theme?.titleHighlightActive ? p.theme.titleHighlightActive : p.theme?.secondary
+    };
     color: ${(p) =&gt;
       p.theme?.titleColorActive ? p.theme?.titleColorActive : p.theme?.primary};
   }

diff --git a/src/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts b/src/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts
@@ -17,7 +17,7 @@ export const TitleWrapper = styled.div<{
   color: ${(p) => (p.theme ? p.theme.titleColor : '')};
 
   &.active {
-    background: ${(p) => p.theme?.secondary};
+    background: ${(p) => p.theme?.titleHighlightActive ? p.theme.titleHighlightActive : p.theme?.secondary};
     color: ${(p) =>
       p.theme?.titleColorActive ? p.theme?.titleColorActive : p.theme?.primary};
   }

diff --git a/src/models/Theme.ts b/src/models/Theme.ts
@@ -50,4 +50,7 @@ export interface Theme {
 
   // title color for active tabs
   titleColorActive?: string;
+
+  // highlight color of the title
+  titleHighlightActive?: string;
 }