Fix theming

.gitignore

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

src/App.vue

@@ -1,54 +1,101 @@
 <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"
-                     :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
-    <main>
+  <n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
+    <main :class="`main-${theme === null ? 'light' : 'dark'}`">
       <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">
-                <MainCard :themex="theme" />
-                <ContentCard>
-                  <template #card-icon>
-                    <PedestrianFamily />
-                  </template>
-                  <template #card-title>
-                    Huge community.
-                  </template>
-                  Everyone is here! The spirit of RPCS3 lives on.
-                </ContentCard>
-                <ContentCard>
-                  <template #card-icon>
-                    <ToolBox />
-                  </template>
-                  <template #card-title>
-                    Ongoing development.
-                  </template>
-                  Est. 2016 by DH himself.
-                </ContentCard>
-                <ContentCard>
-                  <template #card-icon>
-                    <GameConsole />
-                  </template>
-                  <template #card-title>
-                    All your favorite titles.
-                  </template>
-                  <div class="joke-wrapper">
-                    <div class="body-text">
-                      Bloodborne coming Soon™*
-                    </div>
-                    <div class="joke-footnote">
-                      * RPCSX does not provide estimates or compatibility for any title.
-                    </div>
+              <MainCard :themex="theme"/>
+              <ContentCard>
+                <template #card-icon>
+                  <PedestrianFamily />
+                </template>
+                <template #card-title>
+                  Huge community.
+                </template>
+                Everyone is here! The spirit of RPCS3 lives on.
+              </ContentCard>
+              <ContentCard>
+                <template #card-icon>
+                  <ToolBox />
+                </template>
+                <template #card-title>
+                  Ongoing development.
+                </template>
+                Est. 2016 by DH himself.
+              </ContentCard>
+              <ContentCard>
+                <template #card-icon>
+                  <GameConsole />
+                </template>
+                <template #card-title>
+                  All your favorite titles.
+                </template>
+                <div class="joke-wrapper">
+                  <div class="body-text">
+                    Bloodborne coming Soon™*
                   </div>
+                  <div class="joke-footnote">
+                    *RPCSX does not provide estimates or compatibility for any title.
+                  </div>
+                </div>
                 </ContentCard>
                 <ContentCard>
                   <template #card-icon>
@@ -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'
-  import { ref } from 'vue';
+var theme = ref<BuiltInGlobalTheme | null>(null);
 
-  import 'vfonts/FiraSans.css';
-  import './assets/text-styles.css';
-
-  /**
-   * @type import('naive-ui').GlobalThemeOverrides
-   */
-   const lightThemeOverrides = {
-    common: {
-      primaryColor: '#000000'
+export default defineComponent({
+  methods: {
+    toggleTheme() {
+      theme.value = theme.value == null ? darkTheme : null;
     }
-    // ...
-  };
-
-  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;
-        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() {
-      return {
-        darkTheme,
-        theme: ref(null),
-        lightThemeOverrides,
-        darkThemeOverrides,
-        contributors
-      }
-    }
-  })
+  },
+  props: ['theme']
+})
 </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>
-                <div class="body-text" id="card-body">
+                </n-h3>
+                <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>
-defineProps({
-  time: {
-    type: String,
-    required: true
-  },
+<script setup lang="ts">
+import { NH1, NText } from 'naive-ui';
+
+function getTime() {
+  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>
-        <h1> {{ contributors }} experienced contributors.</h1>
-        <h1>0 days since someone asked for Bloodborne.</h1>
-      </div>
+  <div class="hook">
+    <n-h1><n-text>{{ getTime() }} of development.</n-text></n-h1>
+    <n-h1><n-text>{{ contributors }} experienced contributors.</n-text></n-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,
-    required: true
+    type: Object
   }
 })
 </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,43 +1,88 @@
 <script setup lang="ts">
-import { NIcon } from 'naive-ui'
-  import {
-    Code as CodeIcon,
-    Book as BookIcon,
-    LogoDiscord as DiscordIcon,
-    Moon as MoonIcon, Sun as SunIcon
-  } from '@vicons/carbon'
+import { h, defineComponent, Component } from 'vue'
+import { NIcon, MenuOption } from 'naive-ui'
+import {
+  Code as CodeIcon,
+  Book as BookIcon,
+  LogoDiscord as DiscordIcon,
+  Moon as MoonIcon, Sun as SunIcon
+} from '@vicons/carbon'
 
-  defineProps({
-    toggleTheme: {
-      type: Function,
-      required: true
-    },
-    coverImage: {
-      type: ref,
-      required: true
-    },
-    themex: {
-      type: ref,
-      required: true
-    },
-  })
+const props = defineProps({
+  themex: {
+    type: Object
+  },
+  toggle: {
+    type: Function,
+    required: true
+  }
+})
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+var activeKey: any = null
+
+
+
+const menuOptions: MenuOption[] = [
+  {
+    label: () =>
+      h(
+        'a',
+        {
+          href: 'https://github.com/RPCSX/rpcsx',
+          target: '_blank',
+          rel: 'noopenner noreferrer'
+        },
+        'development'
+      ),
+    key: 'development',
+    icon: renderIcon(CodeIcon)
+  },
+  {
+    label: 'wiki',
+    key: 'wiki',
+    icon: renderIcon(BookIcon),
+    children: [
+      {
+        // TODO: populate
+      }
+    ]
+  },
+  {
+    label: () =>
+      h(
+        'a',
+        {
+          href: 'https://discord.com/invite/mx8FbxN5',
+          target: '_blank',
+          rel: 'noopenner noreferrer'
+        },
+        'discuss'
+      ),
+    key: 'discuss',
+    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 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">
+    <n-button circle @click="toggle" class="dark-mode-button">
       <template #icon>
         <n-icon>
-          <MoonIcon />
+          <MoonIcon v-if="themex == null" />
+          <SunIcon v-else />
         </n-icon>
       </template>
+
     </n-button>
   </div>
 </template>
@@ -49,76 +94,14 @@ import { NIcon } from 'naive-ui'
   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) })
+export default defineComponent({
+  methods: {
+    toggleTheme() {
+      props.toggle()
+    }
   }
-  
-  const menuOptions: MenuOption[] = [
-    {
-      label: () =>
-        h(
-          'a',
-          {
-            href: 'https://github.com/RPCSX/rpcsx',
-            target: '_blank',
-            rel: 'noopenner noreferrer'
-          },
-          'development'
-        ),
-      key: 'development',
-      icon: renderIcon(CodeIcon)
-    },
-    {
-      label: 'wiki',
-      key: 'wiki',
-      icon: renderIcon(BookIcon),
-      children: [
-        {
-          // TODO: populate
-        }
-      ]
-    },
-    {
-      label: () => 
-        h(
-          'a',
-          {
-            href: 'https://discord.com/invite/mx8FbxN5',
-            target: '_blank',
-            rel: 'noopenner noreferrer'
-          },
-          'discuss'
-        ),
-      key: 'discuss',
-      icon: renderIcon(DiscordIcon)
-    }
-  ]
-  
-  export default defineComponent({
-    methods: {
-      toggleTheme: function() {
-        this.darkModeButtonIcon = this.darkModeButtonIcon == Moon ? Sun : Moon;
-        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
-      }
-    }
-  })
+})
 </script>

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',
-            'useMessage',
-            'useNotification',
-            'useLoadingBar'
+            'NIcon',
+            'NConfigProvider',
+            'NCard',
+            'NText',
+            'NH1',
+            'NH2',
+            'NH3'
           ]
         }
       ]