Add CSS styling with primary and secondary color to the layout files

This commit is contained in:
itsfinniii
2026-03-26 21:49:05 +01:00
parent d89c832565
commit d94f77a958
3 changed files with 18 additions and 3 deletions

View File

@@ -8,6 +8,11 @@ interface Props {
const pageSettings = Astro.props.settings.searchEngine; const pageSettings = Astro.props.settings.searchEngine;
const settings = await getSettings(); const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
"--stc": settings.website.colors.secondary ?? settings.website.colors.primary
};
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -67,7 +72,7 @@ const settings = await getSettings();
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body> <body style={ css }>
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>

View File

@@ -8,6 +8,11 @@ interface Props {
const pageSettings = Astro.props.settings.searchEngine; const pageSettings = Astro.props.settings.searchEngine;
const settings = await getSettings(); const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
"--stc": settings.website.colors.secondary ?? settings.website.colors.primary
};
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -67,7 +72,7 @@ const settings = await getSettings();
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body> <body style={ css }>
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>

View File

@@ -8,6 +8,11 @@ interface Props {
const pageSettings = Astro.props.settings.searchEngine; const pageSettings = Astro.props.settings.searchEngine;
const settings = await getSettings(); const settings = await getSettings();
const css = {
"--ptc": settings.website.colors.primary,
"--stc": settings.website.colors.secondary ?? settings.website.colors.primary
};
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -64,7 +69,7 @@ const settings = await getSettings();
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body> <body style={ css }>
<slot name="content" /> <slot name="content" />
</body> </body>
</html> </html>