diff --git a/data/config.json b/data/config.json
index f0bd7e0..a48b065 100644
--- a/data/config.json
+++ b/data/config.json
@@ -1,4 +1,13 @@
{
+ "colors": {
+ "foreground": "#fff",
+ "background": "#173d7a",
+ "content": "#fff",
+ "text": "#575757",
+ "highlight": "#029df7",
+ "border": "rgba(255, 255, 255, 0.1)",
+ "tag": "rgba(255, 255, 255, 0.1)"
+ },
"quadrants": [
{
"id": "languages-and-frameworks",
diff --git a/src/components/ItemDetail/ItemDetail.module.css b/src/components/ItemDetail/ItemDetail.module.css
index c36917c..03b2c8e 100644
--- a/src/components/ItemDetail/ItemDetail.module.css
+++ b/src/components/ItemDetail/ItemDetail.module.css
@@ -44,14 +44,14 @@
}
.content {
- background: var(--foreground);
+ background: var(--content);
color: var(--text);
border-radius: 6px;
padding: 30px 15px;
}
.content a {
- color: var(--highlight);
+ color: var(--link);
}
@media (min-width: 768px) {
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index a06af1f..8c1528b 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
import { Roboto } from "next/font/google";
-import type { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
import styles from "./Layout.module.css";
diff --git a/src/icons/blip_changed.svg b/src/icons/blip_changed.svg
index 94cacfd..7839539 100644
--- a/src/icons/blip_changed.svg
+++ b/src/icons/blip_changed.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/blip_default.svg b/src/icons/blip_default.svg
index 049a4e3..139b5ea 100644
--- a/src/icons/blip_default.svg
+++ b/src/icons/blip_default.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/blip_new.svg b/src/icons/blip_new.svg
index acc3c70..f58190b 100644
--- a/src/icons/blip_new.svg
+++ b/src/icons/blip_new.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/lib/data.ts b/src/lib/data.ts
index 2ed0add..971bf52 100644
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@@ -15,6 +15,10 @@ export function getChartConfig() {
return config.chart;
}
+export function getColors() {
+ return config.colors;
+}
+
export function getFlags() {
return config.flags;
}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index ffc3f3c..7eee1aa 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,8 +1,22 @@
import { Head, Html, Main, NextScript } from "next/document";
+import { CSSProperties, useMemo } from "react";
+
+import { getColors } from "@/lib/data";
export default function Document() {
+ const style = useMemo(() => {
+ const cssVariables: Record = {};
+ const colors = getColors();
+
+ Object.entries(colors).forEach(([key, value]) => {
+ cssVariables[`--${key}`] = value;
+ });
+
+ return cssVariables as CSSProperties;
+ }, []);
+
return (
-
+
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 810361b..c1e816d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,15 +7,12 @@
--foreground: #fff;
--background: #173d7a;
+ --content: #fff;
--text: #575757;
+ --link: #029df7;
--highlight: #029df7;
--border: rgba(255, 255, 255, 0.1);
--tag: rgba(255, 255, 255, 0.1);
-
- --overlay: #081a37b5;
- --dialog-bg: #173d7a;
-
- --badge: #333; /* local color which get's overridden by the element */
}
* {