From 1e839680b46dd0c43160668812e565b2024285de Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:59:04 +0100
Subject: [PATCH] Add colors to the website and calculate text color for
background colors
---
astro/src/layouts/BlogLayout.astro | 9 +++++++--
astro/src/layouts/ProjectLayout.astro | 9 +++++++--
astro/src/layouts/WebpageLayout.astro | 9 +++++++--
astro/src/lib/colors.ts | 23 +++++++++++++++++++++++
4 files changed, 44 insertions(+), 6 deletions(-)
create mode 100644 astro/src/lib/colors.ts
diff --git a/astro/src/layouts/BlogLayout.astro b/astro/src/layouts/BlogLayout.astro
index 4fc31f7..fcc86ef 100644
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -1,6 +1,7 @@
---
import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings";
+import { getTextColor } from '@/lib/colors';
interface Props {
settings: BlogLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
- "--stc": settings.website.colors.secondary ?? settings.website.colors.primary
+ "--stc": settings.website.colors.secondary ?? settings.website.colors.primary,
+ "--ptt": getTextColor(settings.website.colors.primary),
+ "--stt": settings.website.colors.secondary
+ ? getTextColor(settings.website.colors.secondary)
+ : getTextColor(settings.website.colors.primary)
};
---
@@ -72,7 +77,7 @@ const css = {
-
+
\ No newline at end of file
diff --git a/astro/src/layouts/ProjectLayout.astro b/astro/src/layouts/ProjectLayout.astro
index 4fc31f7..fcc86ef 100644
--- a/astro/src/layouts/ProjectLayout.astro
+++ b/astro/src/layouts/ProjectLayout.astro
@@ -1,6 +1,7 @@
---
import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings";
+import { getTextColor } from '@/lib/colors';
interface Props {
settings: BlogLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
- "--stc": settings.website.colors.secondary ?? settings.website.colors.primary
+ "--stc": settings.website.colors.secondary ?? settings.website.colors.primary,
+ "--ptt": getTextColor(settings.website.colors.primary),
+ "--stt": settings.website.colors.secondary
+ ? getTextColor(settings.website.colors.secondary)
+ : getTextColor(settings.website.colors.primary)
};
---
@@ -72,7 +77,7 @@ const css = {
-
+
\ No newline at end of file
diff --git a/astro/src/layouts/WebpageLayout.astro b/astro/src/layouts/WebpageLayout.astro
index 6b56176..ea9f7e7 100644
--- a/astro/src/layouts/WebpageLayout.astro
+++ b/astro/src/layouts/WebpageLayout.astro
@@ -1,6 +1,7 @@
---
import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings";
+import { getTextColor } from '@/lib/colors';
interface Props {
settings: WebpageLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
- "--stc": settings.website.colors.secondary ?? settings.website.colors.primary
+ "--stc": settings.website.colors.secondary ?? settings.website.colors.primary,
+ "--ptt": getTextColor(settings.website.colors.primary),
+ "--stt": settings.website.colors.secondary
+ ? getTextColor(settings.website.colors.secondary)
+ : getTextColor(settings.website.colors.primary)
};
---
@@ -69,7 +74,7 @@ const css = {
-
+
diff --git a/astro/src/lib/colors.ts b/astro/src/lib/colors.ts
new file mode 100644
index 0000000..52fd915
--- /dev/null
+++ b/astro/src/lib/colors.ts
@@ -0,0 +1,23 @@
+export function getTextColor(bgColor: string) {
+ // Remove # if present
+ const hex = bgColor.replace('#', '');
+
+ // Convert hex to RGB
+ const r = parseInt(hex.substring(0, 2), 16) / 255;
+ const g = parseInt(hex.substring(2, 4), 16) / 255;
+ const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+ // Convert to linear RGB
+ const toLinear = (c: any) =>
+ c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+
+ const R = toLinear(r);
+ const G = toLinear(g);
+ const B = toLinear(b);
+
+ // Calculate luminance
+ const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+
+ // Return white for dark backgrounds, black for light backgrounds
+ return luminance > 0.179 ? '#000000' : '#fcfcfc';
+}