diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7b19d97..86b96a6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,6 +9,10 @@ const { description } = Astro.props;
import "../styles/main.scss";
import "../styles/callout.scss";
+import styles from "../styles/_var.scss";
+const accentColorMatch = styles.match(/accentColor: ([^;]+)/);
+const accentColor = accentColorMatch ? accentColorMatch[1] : "";
+
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
@@ -20,6 +24,7 @@ import { ViewTransitions } from "astro:transitions";
+
@@ -29,6 +34,7 @@ import { ViewTransitions } from "astro:transitions";
+
diff --git a/src/styles/_var.scss b/src/styles/_var.scss
index 67dc0a4..ba41ad9 100644
--- a/src/styles/_var.scss
+++ b/src/styles/_var.scss
@@ -1,28 +1,9 @@
-@font-face {
- font-family: 'Tanker-Regular';
- src: url('/fonts/Tanker-Regular.ttf') format('truetype');
- font-weight: 400;
- font-display: swap;
- font-style: normal;
-}
+$primary: #1c1427;
+$accent: #7eca9c;
+$link: #ccffbd;
+$highlight-primary: #40394a;
-@font-face {
- font-family: 'Satoshi-Regular';
- src: url('/fonts/Satoshi-Regular.ttf') format('truetype');
- font-weight: 400;
- font-display: swap;
- font-style: normal;
+:export {
+ primaryColor: $primary;
+ accentColor: $accent;
}
-
-@font-face {
- font-family: 'Satoshi-Bold';
- src: url('/fonts/Satoshi-Bold.ttf') format('truetype');
- font-weight: 700;
- font-display: swap;
- font-style: normal;
-}
-
-$primary: #1C1427;
-$accent: #7ECA9C;
-$link: #CCFFBD;
-$highlight-primary: #40394A;
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1d6674b..f2d92e2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,6 +2,38 @@
:root {
color-scheme: dark;
+ --accent-color: $accent; // conversion for theme color meta tag
+}
+
+@font-face {
+ font-family: "Tanker-Regular";
+ src: url("/fonts/Tanker-Regular.ttf") format("truetype");
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Satoshi-Regular";
+ src: url("/fonts/Satoshi-Regular.ttf") format("truetype");
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Satoshi-Bold";
+ src: url("/fonts/Satoshi-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-display: swap;
+ font-style: normal;
+}
+
+::selection {
+ background-color: $accent;
+}
+::marker {
+ color: $accent;
}
body {