itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add colors to the website and calculate text color for background colors

Browse Source
This commit is contained in:
itsfinniii
2026-03-26 21:59:04 +01:00
parent d94f77a958
commit 1e839680b4
4 changed files with 44 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
astro/src/layouts/BlogLayout.astro
View File

@@ -1,6 +1,7 @@
--- ---
import '@/styles/global.css'; import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings"; import { getSettings } from "@/content/settings/settings";
import { getTextColor } from '@/lib/colors';
interface Props { interface Props {
settings: BlogLayoutProps; settings: BlogLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = { const css = {
"--ptc": settings.website.colors.primary, "--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 = {
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body style={ css }> <body style={ css } class="bg-[#fcfcfc]">
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>

9
astro/src/layouts/ProjectLayout.astro
View File

@@ -1,6 +1,7 @@
--- ---
import '@/styles/global.css'; import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings"; import { getSettings } from "@/content/settings/settings";
import { getTextColor } from '@/lib/colors';
interface Props { interface Props {
settings: BlogLayoutProps; settings: BlogLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = { const css = {
"--ptc": settings.website.colors.primary, "--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 = {
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body style={ css }> <body style={ css } class="bg-[#fcfcfc]">
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>

9
astro/src/layouts/WebpageLayout.astro
View File

@@ -1,6 +1,7 @@
--- ---
import '@/styles/global.css'; import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings"; import { getSettings } from "@/content/settings/settings";
import { getTextColor } from '@/lib/colors';
interface Props { interface Props {
settings: WebpageLayoutProps; settings: WebpageLayoutProps;
@@ -11,7 +12,11 @@ const settings = await getSettings();
const css = { const css = {
"--ptc": settings.website.colors.primary, "--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 = {
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body style={ css }> <body style={ css } class="bg-[#fcfcfc]">
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>

23
astro/src/lib/colors.ts Normal file
View File

@@ -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';
}