From b6ed29066f1fd90fb2f3cb885404dfdb10a38d22 Mon Sep 17 00:00:00 2001
From: OCDkirby <mangacreeperyt@gmail.com>
Date: Sat, 15 Jul 2023 00:06:22 -0500
Subject: [PATCH] Begin theming

---
 src/App.vue                    | 35 ++++++++++++++++++++--------------
 src/assets/text-styles.css     |  4 ----
 src/components/ContentCard.vue |  4 ----
 src/components/MainCard.vue    |  1 -
 4 files changed, 21 insertions(+), 23 deletions(-)
 delete mode 100644 src/assets/text-styles.css

diff --git a/src/App.vue b/src/App.vue
index d08020e..5575cc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,13 +6,9 @@ import { GlobalThemeOverrides, darkTheme } from 'naive-ui'
 import { TypographyThemeVars } from 'naive-ui/es/typography/styles';
 import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
 
-import './assets/text-styles.css';
 import { defineComponent, ref } from 'vue';
 import { CardThemeVars } from 'naive-ui/es/card/styles';
 
-const lightBackg = "'#FFFFFF'"
-const darkBackg = "'#000000'"
-
 const typographyOverrides: Partial<TypographyThemeVars> = {
   headerFontSize1: '30pt',
   headerFontWeight: 'bold',
@@ -21,30 +17,41 @@ const typographyOverrides: Partial<TypographyThemeVars> = {
   headerMargin3: '0px',
 }
 
+const darkTypography: Partial<TypographyThemeVars> = {
+  ...typographyOverrides,
+  textColor: '#F8F2F1' 
+}
+
+const lightTypography: Partial<TypographyThemeVars> = {
+  ...typographyOverrides,
+  textColor: '#121420' 
+}
+
 const cardOverrides : Partial<CardThemeVars> = {
   titleFontWeight: 'bold',
   titleFontSizeHuge: '16pt',
   titleFontSizeMedium: '16pt',
-  titleFontSizeSmall: '16pt'
+  titleFontSizeSmall: '16pt',
+  fontSizeMedium: '12pt',
 }
 
 const lightThemeOverrides: GlobalThemeOverrides = {
   common: {
-    baseColor: '#FFFFFF',
-    primaryColor: '#000000',
+    baseColor: '#F8F2F1',
+    primaryColor: '#121420',
     fontFamily: 'v-sans'
   },
-  Typography: typographyOverrides,
+  Typography: lightTypography,
   Card: cardOverrides,
   // ...
 };
 
 const darkThemeOverrides: GlobalThemeOverrides = {
   common: {
-    baseColor: '#000000',
-    primaryColor: '#FFFFFF'
+    baseColor: '#121420',
+    primaryColor: '#F8F2F1'
   },
-  Typography: typographyOverrides,
+  Typography: darkTypography,
   Card: cardOverrides,
   // ...
 };
@@ -125,11 +132,11 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 
 <style scoped>
 .main-light {
-  background-color: #FFFFFF;
+  background-color: #F8F2F1;
 }
 
 .main-dark {
-  background-color: black;
+  background-color: #121420;
 }
 
 .wrapper {
@@ -209,7 +216,7 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 </style>
 
 <script lang="ts">
-var theme = ref<BuiltInGlobalTheme | null>(null);
+var theme = ref<BuiltInGlobalTheme | null>(darkTheme);
 
 export default defineComponent({
   methods: {
diff --git a/src/assets/text-styles.css b/src/assets/text-styles.css
deleted file mode 100644
index e6a73d3..0000000
--- a/src/assets/text-styles.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.body-text {
-    /* font-family: v-sans; */
-    font-size: 12pt;
-}
diff --git a/src/components/ContentCard.vue b/src/components/ContentCard.vue
index 22e2679..6c43375 100644
--- a/src/components/ContentCard.vue
+++ b/src/components/ContentCard.vue
@@ -1,7 +1,3 @@
-<script setup>
-import '../assets/text-styles.css';
-</script>
-
 <template>
     <n-card hoverable>
         <div class="card-wrapper">
diff --git a/src/components/MainCard.vue b/src/components/MainCard.vue
index 0569785..285c989 100644
--- a/src/components/MainCard.vue
+++ b/src/components/MainCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import '../assets/text-styles.css';
 
 import { ref } from 'vue'