Fix theming

.gitignore

@@ -26,3 +26,7 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Typescript generated
+auto-imports.d.ts
+components.d.ts

src/App.vue

@@ -1,17 +1,64 @@
 <script setup lang="ts">
+import 'vfonts/FiraSans.css';
+
 import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
+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',
+  headerFontSize2: '18pt',
+  headerFontSize3: '14pt',
+  headerMargin3: '0px',
+}
+
+const cardOverrides : Partial<CardThemeVars> = {
+  titleFontWeight: 'bold',
+  titleFontSizeHuge: '16pt',
+  titleFontSizeMedium: '16pt',
+  titleFontSizeSmall: '16pt'
+}
+
+const lightThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    baseColor: '#FFFFFF',
+    primaryColor: '#000000',
+    fontFamily: 'v-sans'
+  },
+  Typography: typographyOverrides,
+  Card: cardOverrides,
+  // ...
+};
+
+const darkThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    baseColor: '#000000',
+    primaryColor: '#FFFFFF'
+  },
+  Typography: typographyOverrides,
+  Card: cardOverrides,
+  // ...
+};
 </script>
 
 <template>
-  <n-config-provider :theme="theme"
+  <n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
-                     :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
+    <main :class="`main-${theme === null ? 'light' : 'dark'}`">
-    <main>
       <div class="wrapper">
-        <TopBarMenu :toggleTheme="toggleTheme" :themex="theme"/>
+        <TopBarMenu :themex="theme" :toggle="toggleTheme" />
         <div class="columns">
           <div id="main-column" class="column">
             <div class="top-main">
-              <Hook :time="getTime()" :contributors="contributors" />
+              <Hook :themex="theme"/>
             </div>
           
             <div class="column-content">
@@ -64,7 +111,7 @@ import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
           </div>
           <div id="right-column" class="column">
             <div class="top-right">
-              <h2>Get Involved</h2>
+              <n-h2>Get Involved</n-h2>
             </div>
             <div class="column-content">
               <iframe src="https://discord.com/widget?id=252023769500090368&theme=dark" width="250" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
@@ -77,6 +124,13 @@ import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
 </template>
 
 <style scoped>
+.main-light {
+  background-color: #FFFFFF;
+}
+
+.main-dark {
+  background-color: black;
+}
 
 .wrapper {
   height: 100%;   
@@ -155,69 +209,14 @@ import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
 </style>
 
 <script lang="ts">
-  import { darkTheme } from 'naive-ui'
+var theme = ref<BuiltInGlobalTheme | null>(null);
-  import { ref } from 'vue';
-
-  import 'vfonts/FiraSans.css';
-  import './assets/text-styles.css';
-
-  /**
-   * @type import('naive-ui').GlobalThemeOverrides
-   */
-   const lightThemeOverrides = {
-    common: {
-      primaryColor: '#000000'
-    }
-    // ...
-  };
-
-  const darkThemeOverrides = {
-    common: {
-      primaryColor: '#FFFFFF'
-    }
-    // ...
-  };
-
-  var contributors = 10; // TODO web scraping
-  // const response = await fetch("https://cors-anywhere.herokuapp.com/https://github.com/RPCSX/rpcsx/");
-  // contributors = await cheerio.load(response.text())('.Counter m1-1');
-  // console.log("hi");
-
-  var theme;
-
-  var coverURI;
-
 
 export default defineComponent({
-    title: 'RPCSX - PS4 Emulator',
   methods: {
-      // A hacky workaround to testing mobile
     toggleTheme() {
-        theme = theme == null ? darkTheme : null;
+      theme.value = theme.value == null ? darkTheme : null;
-        console.log(theme);
-      },
-      openGithub() {
-        window.open('https://github.com/RPCSX/rpcsx', '_blank');
-      },
-      getTime() {
-        const divmod = (x, y) => [Math.floor(x / y), x % y]; // Utility
-
-        var developmentStart = new Date(2016, 6, 18); // Rough estimate of when DH left RPCS3
-        var today = new Date();
-        const months = (today.getFullYear() - developmentStart.getFullYear()) * 12 - developmentStart.getMonth() + today.getMonth() + 1; // Months between start and today
-        var time_result = divmod(months, 12); // [years, partial year's months]
-        return months > 12 ? (time_result[0] + Math.round(time_result[1] / 12 * 10)/10) + " years" : months + "months";
     }
   },
-    setup() {
+  props: ['theme']
-      return {
-        darkTheme,
-        theme: ref(null),
-        lightThemeOverrides,
-        darkThemeOverrides,
-        contributors
-      }
-    }
 })
 </script>
-

src/assets/text-styles.css

@@ -1,23 +1,4 @@
 .body-text {
-    font-family: v-sans;
+    /* font-family: v-sans; */
     font-size: 12pt;
 }
-
-.card-header {
-    font-family: v-sans;
-    font-weight: bold;
-    font-size: 14pt;
-}
-
-h2 {
-    font-family: v-sans;
-    font-size: 18pt;
-    word-wrap: break-word;
-}
-  
-h1 {
-    font-family: v-sans;
-    font-size: 30pt;
-    font-weight: bold;
-    word-wrap: break-word;
-}

src/components/ContentCard.vue

@@ -11,12 +11,12 @@ import '../assets/text-styles.css';
                 </n-icon>
             </div>
             <div class="content-wrapper">
-                <div class="card-header">
+                <n-h3 class="card-header">
                     <slot name="card-title" />
-                </div>
+                </n-h3>
-                <div class="body-text" id="card-body">
+                <n-text class="body-text" id="card-body">
                     <slot />
-                </div>
+                </n-text>
             </div>
         </div>
     </n-card>

src/components/Hook.vue

@@ -1,21 +1,27 @@
-<script setup>
+<script setup lang="ts">
-defineProps({
+import { NH1, NText } from 'naive-ui';
-  time: {
+
-    type: String,
+function getTime() {
-    required: true
+  const divmod = (x: any, y: any) => [Math.floor(x / y), x % y]; // Utility
-  },
+
+  var developmentStart = new Date(2016, 6, 18); // Rough estimate of when DH left RPCS3
+  var today = new Date();
+  const months = (today.getFullYear() - developmentStart.getFullYear()) * 12 - developmentStart.getMonth() + today.getMonth() + 1; // Months between start and today
+  var time_result = divmod(months, 12); // [years, partial year's months]
+  return months > 12 ? (time_result[0] + Math.round(time_result[1] / 12 * 10) / 10) + " years" : months + "months";
+}
+
+var contributors = 10; // TODO web scraping
+// const response = await fetch("https://cors-anywhere.herokuapp.com/https://github.com/RPCSX/rpcsx/");
+// contributors = await cheerio.load(response.text())('.Counter m1-1');
+// console.log("hi");
 
-  contributors: {
-    type: String,
-    required: true
-  },
-})
 </script>
 
 <template>
   <div class="hook">
-        <h1>{{ time }} of development.</h1>
+    <n-h1><n-text>{{ getTime() }} of development.</n-text></n-h1>
-        <h1> {{ contributors }} experienced contributors.</h1>
+    <n-h1><n-text>{{ contributors }} experienced contributors.</n-text></n-h1>
-        <h1>0 days since someone asked for Bloodborne.</h1>
+    <n-h1><n-text>0 days since someone asked for Bloodborne.</n-text></n-h1>
   </div>
 </template>

src/components/MainCard.vue

@@ -1,10 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import '../assets/text-styles.css';
 
+import { ref } from 'vue'
+
 defineProps({
   themex: {
-    type: ref,
+    type: Object
-    required: true
   }
 })
 </script>
@@ -21,7 +22,7 @@ defineProps({
             <img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
         </template>
         <template #header>
-            <div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
+            RPCSX is your PlayStation 4 emulator.
         </template>
         <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
     </n-card>

src/components/TopBarMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { NIcon } from 'naive-ui'
+import { h, defineComponent, Component } from 'vue'
+import { NIcon, MenuOption } from 'naive-ui'
 import {
   Code as CodeIcon,
   Book as BookIcon,
@@ -7,61 +8,24 @@ import { NIcon } from 'naive-ui'
   Moon as MoonIcon, Sun as SunIcon
 } from '@vicons/carbon'
 
-  defineProps({
+const props = defineProps({
-    toggleTheme: {
+  themex: {
+    type: Object
+  },
+  toggle: {
     type: Function,
     required: true
-    },
+  }
-    coverImage: {
-      type: ref,
-      required: true
-    },
-    themex: {
-      type: ref,
-      required: true
-    },
 })
-</script>
-
-<template>
-  <div class="bar-wrapper">
-    <n-button
-    quaternary
-    tag="a"
-    href="https://rpcsx.github.io/rpcsx-site/">
-      <img alt="RPCSX logo" class="logo" :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'" width="32" height="32" />
-    </n-button>
-    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
-    <n-button circle @click="toggleTheme()" class="dark-mode-button">
-      <template #icon>
-        <n-icon>
-          <MoonIcon />
-        </n-icon>
-      </template>
-    </n-button>
-  </div>
-</template>
-
-<style scoped>
-.bar-wrapper {
-  display: inline-block;
-  flex-flow: row nowrap;
-  text-align: center;
-  margin: 8px;
-}
-
-.dark-mode-button {
-  padding-left: 5px;
-}
-
-</style>
-  
-<script lang="ts">
 
 function renderIcon(icon: Component) {
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 
+var activeKey: any = null
+
+
+
 const menuOptions: MenuOption[] = [
   {
     label: () =>
@@ -102,22 +66,41 @@ import { NIcon } from 'naive-ui'
     icon: renderIcon(DiscordIcon)
   }
 ]
+</script>
 
+<template>
+  <div class="bar-wrapper">
+    <n-button quaternary tag="a" href="https://rpcsx.github.io/rpcsx-site/">
+      <img alt="RPCSX logo" class="logo" :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'"
+        width="32" height="32" />
+    </n-button>
+    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
+    <n-button circle @click="toggle" class="dark-mode-button">
+      <template #icon>
+        <n-icon>
+          <MoonIcon v-if="themex == null" />
+          <SunIcon v-else />
+        </n-icon>
+      </template>
+
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.bar-wrapper {
+  display: inline-block;
+  flex-flow: row nowrap;
+  text-align: center;
+  margin: 8px;
+}
+</style>
+
+<script lang="ts">
 export default defineComponent({
   methods: {
-      toggleTheme: function() {
+    toggleTheme() {
-        this.darkModeButtonIcon = this.darkModeButtonIcon == Moon ? Sun : Moon;
+      props.toggle()
-        this.$emit('toggle-darkmode');
-      },
-      getCoverURI() {
-        return this.$parent.theme === null ? './assets/logo-light.png' : './assets/logo-dark.png';
-      }
-    },
-    setup () {
-      return {
-        activeKey: ref<string | null>(null),
-        darkModeButtonIcon: ref(Moon),
-        menuOptions
     }
   }
 })

vite.config.js

@@ -6,6 +6,8 @@
  * Important notes: 
  * The project automatically imports *most* vue and naive-ui code as you go, which saves significant space in your script blocks. Just make sure to export your components.
  * However, the icon library does not have an auto-importer, so your script blocks will need to import those.
+ * Theming is not done with CSS, but overrides. See App.vue for examples. They're very similar to CSS, but check the docs.
+ * Also look into the NThemeEditor component, makes theming much easier.
  */
 
 import { fileURLToPath, URL } from 'node:url'
@@ -26,10 +28,13 @@ export default defineConfig({
         'vue',
         {
           'naive-ui': [
-            'useDialog',
+            'NIcon',
-            'useMessage',
+            'NConfigProvider',
-            'useNotification',
+            'NCard',
-            'useLoadingBar'
+            'NText',
+            'NH1',
+            'NH2',
+            'NH3'
           ]
         }
       ]