slidev-theme-underglow 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Katharina Sick
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,72 @@
+# slidev-theme-underglow
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-underglow?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-underglow)
+
+A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
+
+<!--
+  Learn more about how to write a theme:
+  https://sli.dev/guide/write-theme.html
+--->
+
+<!--
+  run `npm run dev` to check out the slides for more details of how to start writing a theme
+-->
+
+<!--
+  Put some screenshots here to demonstrate your theme
+
+  Live demo: [...]
+-->
+
+## Install
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>---
+theme: <b>underglow</b>
+---</code></pre>
+
+Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
+
+## Theme Configuration
+
+You can customize the theme's gradient colors using `themeConfig` in your frontmatter:
+
+```yaml
+---
+theme: underglow
+themeConfig:
+  primary: '#7D1CFE'  # Primary brand color (default: purple)
+  middle: '#176AFA'   # Middle transition color (default: blue)
+  accent: '#01D393'   # Accent color (default: green)
+---
+```
+
+### Color Options
+
+- **`primary`**: The primary brand color (gradient start). Default: `#7D1CFE` (purple)
+- **`middle`**: The middle transition color. Default: `#176AFA` (blue)
+- **`accent`**: The accent color (gradient end). Default: `#01D393` (green)
+
+These colors are used throughout the theme for gradients, backgrounds, and visual effects.
+
+## Layouts
+
+This theme provides the following layouts:
+
+> TODO:
+
+## Components
+
+This theme provides the following components:
+
+> TODO:
+
+## Contributing
+
+- `npm install`
+- `npm run dev` to start theme preview of `example.md`
+- Edit the `example.md` and style to see the changes
+- `npm run export` to generate the preview PDF
+- `npm run screenshot` to generate the preview PNG

package/components/footer.vue

@@ -0,0 +1,52 @@
+<script setup>
+</script>
+
+<template>
+  <footer class="footer-container">
+    <p class="footer-text">{{ $slidev.configs.event?.name }}</p>
+    <span class="footer-divider"/>
+    <p class="footer-text">{{ $slidev.configs.event?.date }}</p>
+    <span class="flex-spacer"/>
+    <img v-if="$slidev.configs.logo" :src="$slidev.configs.logo" alt="Logo" class="footer-logo"/>
+    <span v-if="$slidev.configs.logo" class="footer-divider"/>
+    <p class="footer-text">{{ $page }}</p>
+  </footer>
+</template>
+
+<style scoped>
+.footer-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  background: linear-gradient(90deg, var(--slidev-theme-color-primary), var(--slidev-theme-color-middle), var(--slidev-theme-color-accent));
+
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  align-items: center;
+}
+
+.footer-text {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0;
+  margin: 0;
+  line-height: 12px;
+  min-width: 12px;
+  text-align: end;
+}
+
+.footer-logo {
+  height: 16px;
+  width: 16px;
+  margin: 0 4px;
+}
+
+.footer-divider {
+  height: 16px;
+  width: 2px;
+  background: white;
+}
+</style>

package/layouts/center.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout center">
+    <div class="my-auto center-container">
+      <slot/>
+    </div>
+  </div>
+  <Footer/>
+</template>
+
+<style scoped>
+.center-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/layouts/cover.vue

@@ -0,0 +1,12 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout cover">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+  </div>
+  <Footer />
+</template>

package/layouts/default.vue

@@ -0,0 +1,12 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+  <Footer />
+</template>

package/layouts/image-full.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout image-full">
+    <img :src="$frontmatter.image" class="image" />
+    <slot />
+  </div>
+  <Footer v-if="!$frontmatter.hideFooter" />
+</template>
+
+<style scoped>
+.image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+</style>

package/layouts/intro.vue

@@ -0,0 +1,107 @@
+<script setup>
+</script>
+<template>
+  <div class="slidev-layout intro">
+    <div class="my-auto w-full container">
+      <div class="image-container">
+        <span class="image-border"/>
+        <img :alt="$frontmatter.name" :src="$frontmatter.image" class="image"/>
+      </div>
+      <div class="info-container">
+        <h2 class="hello">Hello!</h2>
+        <h1 class="name">{{ $frontmatter.name }}</h1>
+        <p class="job-title">🚀&nbsp;&nbsp;{{ $frontmatter.jobTitle }}</p>
+        <p class="job-title">🤝&nbsp;&nbsp;{{ $frontmatter.company }}</p>
+        <p class="website">🔗&nbsp;&nbsp;<a :href=url>{{ $frontmatter.website }}</a></p>
+        <div class="logos">
+          <a v-for="logo in logos" :href="logo.link" target="_blank" style="border: 0">
+            <img :alt="logo.alt" :src="logo.src" class="logo"/>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+
+  display: flex;
+  flex-flow: row;
+  gap: 64px;
+
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.image-container {
+  display: inline-block;
+  width: 300px;
+  height: 300px;
+
+  position: relative;
+}
+
+.image-border {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  border-radius: 50%;
+
+  background: linear-gradient(90deg, var(--slidev-theme-color-primary), var(--slidev-theme-color-middle), var(--slidev-theme-color-accent));
+}
+
+.image {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: 6px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.info-container {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.name, .hello, .job-title, .website {
+  margin: 0;
+  padding: 0;
+}
+
+.name {
+  margin: 48px 0;
+}
+
+.job-title {
+  margin-bottom: 12px;
+}
+
+.logos {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 36px;
+}
+
+.logo {
+  display: inline-block;
+  height: 56px;
+}
+</style>

package/layouts/quote.vue

@@ -0,0 +1,51 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout quote">
+    <div class="my-auto quote-container">
+      <div v-if="$frontmatter.background">
+        <img :src="$frontmatter.background" alt="Background image" class="absolute w-full h-full left-0 top-0" />
+        <div
+          class="absolute w-full h-full left-0 top-0 gradient-overlay"
+          :style="$frontmatter.overlayOpacity != null ? { '--quote-overlay-opacity': String($frontmatter.overlayOpacity) } : undefined"
+        ></div>
+      </div>
+      <h1 style="z-index: 2; font-size: 48px" v-html="$frontmatter.quote"></h1>
+      <a v-if="$frontmatter.link" class="quote-source" style="z-index: 2" :href="$frontmatter.link" target="_blank">
+        {{ $frontmatter.subtitle }}
+      </a>
+      <p v-if="!$frontmatter.link && $frontmatter.subtitle" class="quote-source" style="z-index: 2">{{ $frontmatter.subtitle }}</p>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<style scoped>
+:root {
+  --quote-overlay-opacity: 0.6;
+}
+
+.quote-source {
+  font-size: 16px;
+  color: var(--slidev-theme-color-text-primary);
+}
+
+.quote-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.gradient-overlay {
+  background: radial-gradient(
+    ellipse 120% 70% at 50% 50%,
+    rgba(0, 0, 0, var(--quote-overlay-opacity, 0.5)) 20%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+</style>

package/layouts/three-columns.vue

@@ -0,0 +1,22 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout w-full h-full grid grid-cols-3 gap-x-6">
+    <div class="col-span-3">
+      <slot />
+    </div>
+    <div>
+      <slot name="left" />
+    </div>
+    <div>
+      <slot name="middle" />
+    </div>
+    <div>
+      <slot name="right" />
+    </div>
+  </div>
+  <Footer />
+</template>
+

package/layouts/two-columns.vue

@@ -0,0 +1,18 @@
+<script setup>
+import Footer from "../components/footer.vue";
+</script>
+
+<template>
+  <div class="slidev-layout w-full h-full grid grid-cols-2 gap-x-6">
+    <div class="col-span-2">
+      <slot />
+    </div>
+    <div>
+      <slot name="left" />
+    </div>
+    <div>
+      <slot name="right" />
+    </div>
+  </div>
+  <Footer />
+</template>

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "slidev-theme-underglow",
+  "version": "0.1.0",
+  "description": "A gradient Slidev theme with customizable colors",
+  "type": "module",
+  "author": "Katharina Sick <https://ksick.dev>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ksick/slidev-theme-underglow.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ksick/slidev-theme-underglow/issues"
+  },
+  "homepage": "https://github.com/ksick/slidev-theme-underglow#readme",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "theme",
+    "presentation",
+    "gradient"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "components",
+    "layouts",
+    "styles",
+    "setup",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@slidev/types": "^52.11.5"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.11.5"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "dark",
+    "defaults": {
+      "fonts": {
+        "sans": "Poppins",
+        "mono": "Fira Code"
+      }
+    }
+  },
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md --open",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,11 @@
+import type { ShikiSetupReturn } from '@slidev/types'
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+  }
+})

package/styles/index.ts

@@ -0,0 +1,3 @@
+// inherit from base layouts, remove it to get full customizations
+import '@slidev/client/styles/layouts-base.css'
+import './layout.css'

package/styles/layout.css

@@ -0,0 +1,85 @@
+/* Define defaults on html to allow overrides */
+:root {
+    --slidev-theme-color-primary: #7D1CFE;
+    --slidev-theme-color-middle: #176AFA;
+    --slidev-theme-color-accent: #01D393;
+
+    --slidev-theme-color-text-primary: white;
+}
+
+/* To apply the gradient to a text */
+.gradient {
+    display: inline-block;
+    background-image: linear-gradient(90deg, var(--slidev-theme-color-primary), var(--slidev-theme-color-middle), var(--slidev-theme-color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.slidev-layout h1 {
+    display: inline-block;
+    /* We need a bit of padding because otherwise the gradient could be cut off in the top & bottom */
+    padding: 2px 0;
+    font-weight: 900;
+    font-size: 40px;
+    line-height: 1.2;
+    color: var(--slidev-theme-color-text-primary);
+}
+
+.slidev-layout p {
+    font-size: 30px;
+    line-height: 1.7;
+    padding-bottom: 32px;
+}
+
+
+.slidev-layout code {
+    font-size: 24px;
+    line-height: 1.3;
+}
+
+
+.slidev-layout.cover,
+.slidev-layout.intro {
+    @apply h-full grid text-center;
+
+    h1 {
+        display: inline-block;
+        padding: 12px 0;
+
+        font-size: 48px;
+        font-weight: 900;
+        margin-bottom: 0;
+
+        background-image: linear-gradient(90deg, var(--slidev-theme-color-primary), var(--slidev-theme-color-middle), var(--slidev-theme-color-accent));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    h2 {
+        display: inline-block;
+
+        font-size: 36px;
+        font-weight: 900;
+
+        color: var(--slidev-theme-color-text-primary);
+    }
+
+    p {
+        text-align: center;
+        font-size: 24px;
+    }
+}
+
+.slidev-layout.image-full {
+    @apply h-full w-full grid text-center;
+}
+
+.slidev-layout.center,
+.slidev-layout.quote {
+    @apply text-center;
+}
+
+.flex-spacer {
+    flex-grow: 1;
+}
+