diff --git a/README.md b/README.md
index b981371b..05b73238 100644
--- a/README.md
+++ b/README.md
@@ -335,7 +335,7 @@ The `itemWidth` prop can be used to set the width of each individual timeline se
Customize colors with `theme` prop.
```sh
-
+
```
## 📦 CodeSandbox Examples
diff --git a/package.json b/package.json
index 5c75fedc..398d915c 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
"@snowpack/plugin-react-refresh": "^2.3.7",
"@snowpack/plugin-typescript": "^1.1.0",
"@snowpack/web-test-runner-plugin": "^0.1.4",
- "@testing-library/jest-dom": "^5.11.5",
+ "@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"@types/classnames": "^2.2.11",
@@ -84,7 +84,7 @@
"react-is": "^17.0.1",
"react-router-dom": "^5.2.0",
"rimraf": "^3.0.2",
- "rollup": "^2.33.1",
+ "rollup": "^2.33.2",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-typescript2": "^0.29.0",
"snowpack": "^2.17.1",
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 6f96b1b6..74988fe1 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -18,10 +18,7 @@ const Chrono: React.FunctionComponent> = ({
disableNavOnKey = false,
slideShow = false,
slideItemDuration = 5000,
- theme = {
- primary: '#0f52ba',
- secondary: '#ffdf00',
- },
+ theme,
cardHeight = 200,
hideControls = false,
scrollable = true,
@@ -34,6 +31,16 @@ const Chrono: React.FunctionComponent> = ({
const [slideShowActive, setSlideshowActive] = useState(false);
const [activeTimelineItem, setActiveTimelineItem] = useState(0);
+ const customTheme = Object.assign(
+ {
+ primary: '#0f52ba',
+ secondary: '#ffdf00',
+ cardBgColor: '#fff',
+ cardForeColor: '#000',
+ },
+ theme,
+ );
+
const initItems = () =>
items && items.length
? items.map((item, index) => {
@@ -135,7 +142,7 @@ const Chrono: React.FunctionComponent> = ({
slideShow={slideShow}
slideShowEnabled={slideShow}
slideShowRunning={slideShowActive}
- theme={theme}
+ theme={customTheme}
flipLayout={flipLayout}
/>
);
diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
index 3c66df00..5d15e5f4 100644
--- a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
+++ b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
@@ -10,7 +10,7 @@ export const TimelineItemContentWrapper = styled.section<{
mode?: TimelineMode;
}>`
align-items: flex-start;
- background: #fff;
+ background: ${(p) => p.theme.cardBgColor};
border-radius: 4px;
display: flex;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
@@ -45,7 +45,7 @@ export const TimelineContentSubTitle = styled.p<{
`;
export const TimelinecardTitle = styled.p<{ theme: Theme; dir?: string }>`
- color: #323232;
+ color: ${(p) => p.theme.cardForeColor};
font-size: 1rem;
font-weight: 600;
margin: 0;
@@ -58,8 +58,8 @@ export const TimelinecardTitle = styled.p<{ theme: Theme; dir?: string }>`
width: 95%;
`;
-export const TimelineContentDetails = styled.p`
- color: #191919;
+export const TimelineContentDetails = styled.p<{ theme?: Theme }>`
+ color: ${(p) => p.theme.cardForeColor};
font-size: 0.85rem;
font-weight: 400;
margin: 0;
diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx
index 4cafb262..20163f65 100644
--- a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx
+++ b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx
@@ -257,6 +257,7 @@ const TimelineCardContent: React.FunctionComponent = React
{detailedText}
diff --git a/src/demo/app-samples.tsx b/src/demo/app-samples.tsx
index cb3698d2..849e9ed7 100644
--- a/src/demo/app-samples.tsx
+++ b/src/demo/app-samples.tsx
@@ -75,6 +75,7 @@ export const VerticalBasic: FunctionComponent<{
slideItemDuration={2500}
scrollable={{scrollbar: false}}
flipLayout
+ theme={{cardBgColor: "#D6EAF8", cardForeColor: "blue"}}
/>
diff --git a/src/models/Theme.ts b/src/models/Theme.ts
index 240b9a5f..d7f3da57 100644
--- a/src/models/Theme.ts
+++ b/src/models/Theme.ts
@@ -1,5 +1,7 @@
export interface Theme {
- primary: string;
- secondary: string;
+ primary?: string;
+ secondary?: string;
textColor?: string;
+ cardBgColor?: string;
+ cardForeColor?: string;
}
diff --git a/src/models/TimelineModel.ts b/src/models/TimelineModel.ts
index 5b59c285..6feb40a9 100644
--- a/src/models/TimelineModel.ts
+++ b/src/models/TimelineModel.ts
@@ -1,3 +1,4 @@
+import { Theme } from './Theme';
import { TimelineItemModel } from './TimelineItemModel';
/**
@@ -107,10 +108,7 @@ export interface TimelineProps {
* }}
* @memberof TimelineProps
*/
- theme?: {
- primary: string;
- secondary: string;
- };
+ theme?: Theme;
/**
* Minimum height of the card
*
diff --git a/yarn.lock b/yarn.lock
index 1c4296d1..a5dc7381 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1794,10 +1794,10 @@
lz-string "^1.4.4"
pretty-format "^26.6.2"
-"@testing-library/jest-dom@^5.11.5":
- version "5.11.5"
- resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.5.tgz#44010f37f4b1e15f9d433963b515db0b05182fc8"
- integrity sha512-XI+ClHR864i6p2kRCEyhvpVejuer+ObVUF4cjCvRSF88eOMIfqw7RoS9+qoRhyigGswMfT64L6Nt0Ufotxbwtg==
+"@testing-library/jest-dom@^5.11.6":
+ version "5.11.6"
+ resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz#782940e82e5cd17bc0a36f15156ba16f3570ac81"
+ integrity sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==
dependencies:
"@babel/runtime" "^7.9.2"
"@types/testing-library__jest-dom" "^5.9.1"
@@ -8072,13 +8072,20 @@ rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
dependencies:
estree-walker "^0.6.1"
-rollup@^2.23.0, rollup@^2.33.1:
+rollup@^2.23.0:
version "2.33.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.33.1.tgz#802795164164ee63cd47769d8879c33ec8ae0c40"
integrity sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w==
optionalDependencies:
fsevents "~2.1.2"
+rollup@^2.33.2:
+ version "2.33.2"
+ resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.33.2.tgz#c4c76cd405a7605e6ebe90976398c46d4c2ea166"
+ integrity sha512-QPQ6/fWCrzHtSXkI269rhKaC7qXGghYBwXU04b1JsDZ6ibZa3DJ9D1SFAYRMgx1inDg0DaTbb3N4Z1NK/r3fhw==
+ optionalDependencies:
+ fsevents "~2.1.2"
+
rsvp@^4.8.4:
version "4.8.5"
resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"