diff --git a/src/assets/base.css b/src/assets/base.css
index 71dc55a..3ac7bd8 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,24 +1,25 @@
-/* color palette from
*/
+/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
+ --vt-c-white: #eff1f5; /* Base (latte) */
+ --vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
+ --vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
+ --vt-c-black: #1e1e2e; /* Base (mocha) */
+ --vt-c-black-soft: #45475a; /* Surface1 (mocha) */
+ --vt-c-black-mute: #313244; /* Surface0 (mocha) */
- --vt-c-indigo: #2c3e50;
+ --vt-c-text-light: #4c4f69; /* Text (latte) */
+ --vt-c-text-dark: #cdd6f4; /* Text (mocha) */
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+ --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); /* Overlay1 (mocha) */
+ --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* Overlay1 (mocha) */
+ --vt-c-divider-dark-1: rgba(127, 132, 156, 0.65); /* Overlay1 (mocha) */
+ --vt-c-divider-dark-2: rgba(127, 132, 156, 0.48); /* Overlay1 (mocha) */
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+ --vt-c-text-light-1: var(--vt-c-text-light);
+ --vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */
+ --vt-c-text-dark-1: var(--vt-c-text-dark);
+ --vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */
}
/* semantic color variables for this project */
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd..88fddbe 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -9,12 +9,21 @@
}
a,
-.green {
+.pink {
text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
+ color: #ea76cb; /* Pink (latte) */
transition: 0.4s;
}
+@media (prefers-color-scheme: dark) {
+ a,
+ .pink {
+ text-decoration: none;
+ color: #f5c2e7; /* Pink (mocha) */
+ transition: 0.4s;
+ }
+}
+
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
@@ -32,4 +41,4 @@ a,
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
-}
+}
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index e8f531d..fbc3555 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -6,7 +6,7 @@ defineProps<{
-
{{ msg }}
+
{{ msg }}
If you came here for the video - which I previously said this site redirects to, it's
right here.