feat: add support for static light/dark images for logo (#874)

nuxt-themes · Apr 10, 2023 · 3e79992 · 3e79992
1 parent 7cd18d2
commit 3e79992
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 60 deletions.
diff --git a/.docs/public/logo-dark.svg b/.docs/public/logo-dark.svg
diff --git a/.docs/public/logo-light.svg b/.docs/public/logo-light.svg
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,17 +1,3 @@
-.light-img {
-  display: block;
-  @dark {
-    display: hidden;
-  }
-}
-
-.dark-img {
-  display: hidden;
-  @dark {
-    display: block;
-  }
-}
-
 /* Base */
 
 :root {

diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue
@@ -7,11 +7,17 @@ const title = computed(() => config.value.header?.title || config.value.title)
 <template>
   <NuxtLink class="navbar-logo" to="/" :aria-label="title">
     <!-- Only Logo -->
-    <component :is="logo" v-if="logo && typeof logo === 'string'" />
-    <Logo v-else-if="logo" />
+    <span class="logo" v-if="logo">
+      <component :is="logo" v-if="typeof logo === 'string'" />
+      <template v-else-if="logo.light && logo.dark">
+        <img :src="logo.light" alt="" class="light-img">
+        <img :src="logo.dark" alt="" class="dark-img">
+      </template>
+      <Logo v-else-if="logo" />
+    </span>
 
     <!-- Only title -->
-    <span v-else>
+    <span class="title" v-else>
       {{ title }}
     </span>
   </NuxtLink>
@@ -24,15 +30,32 @@ css({
     alignItems: 'center',
     flex: 'none',
 
-    span: {
-      fontSize: '{fontSize.xl}',
-      fontWeight: '{fontWeight.bold}',
-      color: '{color.gray.900}',
-      '@dark': {
-        color: '{color.gray.100}',
+    '.logo': {
+      height: '{docus.header.logo.height}',
+      width: 'auto',
+      'img, svg': {
+        height: 'inherit',
+      },
+      '.light-img': {
+        display: 'block',
+        '@dark': {
+          display: 'none'
+        }
       },
+      '.dark-img': {
+        display: 'none',
+        '@dark': {
+          display: 'block'
+        }
+      },
+    },
+
+    '.title': {
+      fontSize: '{docus.header.title.fontSize}',
+      fontWeight: '{docus.header.title.fontWeight}',
+      color: '{docus.header.title.color.static}',
       '&:hover': {
-        color: '{color.gray.500}',
+        color: '{docus.header.title.color.hover}',
       }
     }
   }

diff --git a/components/app/Logo.vue b/components/app/Logo.vue
@@ -55,14 +55,10 @@
 css({
   svg: {
     color: '{color.gray.900}',
-    height: '{space.6}',
-    width: 'auto',
+    height: 'inherit',
     '@dark': {
       color: '{color.gray.100}'
     },
-    '@sm': {
-      height: '{space.7}'
-    }
   }
 })
 </style>
diff --git a/tokens.config.ts b/tokens.config.ts
@@ -108,7 +108,26 @@ export default defineTheme({
       },
       fontFamily: '{font.sans}'
     },
-    header: { height: '64px' },
+    header: {
+      height: '64px',
+      logo: {
+        height: {
+          initial: '{space.6}',
+          sm: '{space.7}'
+        }
+      },
+      title: {
+        fontSize: '{fontSize.2xl}', 
+        fontWeight: '{fontWeight.bold}', 
+        color: {
+          static: {
+            initial: '{color.gray.900}', 
+            dark: '{color.gray.100}', 
+          },
+          hover: '{color.primary.500}', 
+        }
+      }
+    },
     footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
     readableLine: '78ch',
     loadingBar: {