slidev-theme-neversink 0.4.0 → 0.4.1

package/.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "slidev.force-enabled": true,
-  "slidev.include": ["**/slides.md", "example.md", "screenshot.md"]
+  "slidev.include": ["**/slides.md", "example.md", "screenshot.md"],
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package/components/CreditScroll.vue

@@ -5,25 +5,26 @@ import { onSlideEnter, useSlideContext } from '@slidev/client'
 const { $renderContext } = useSlideContext()
 const props = defineProps({
   speed: {
+    type: Number,
     default: 0.5,
   },
   loop: {
+    type: Boolean,
     default: false,
   },
 })
 
 const containerRef = ref(null)
 const scrollPosition = ref(0)
-const isScrolling = ref(false)
 
 let animationFrameId = null
 
 const scroll = () => {
   scrollPosition.value -= props.speed
   if (Math.abs(scrollPosition.value) >= 550) {
-    if (props.loop.value) {
-      console.log('resetting loop', props.loop.value)
+    if (props.loop) {
       resetScroll()
+      animationFrameId = requestAnimationFrame(scroll)
     } else {
       stopScrolling()
       return
@@ -40,34 +41,29 @@ const startScrolling = () => {
 const stopScrolling = () => {
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
   }
 }
 
 const resetScroll = () => {
-  scrollPosition.value = 480 //containerRef.value.offsetHeight * 2.5
+  scrollPosition.value = 480
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
   }
 }
 
-onMounted(() => {
-  console.log('mounted')
-  // Reset scrolling when entering the slide
-  onSlideEnter(() => {
-    console.log('context ', $renderContext.value)
-    if (['slide', 'presenter'].includes($renderContext.value)) {
-      console.log('onSlideEnter')
-      resetScroll()
-      console.log('starting scrolling')
-      startScrolling()
-    }
-  })
+// Must be called in setup scope
+onSlideEnter(() => {
+  if (['slide', 'presenter'].includes($renderContext.value)) {
+    stopScrolling()
+    resetScroll()
+    startScrolling()
+  }
 })
 
 onUnmounted(() => {
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId)
-  }
+  stopScrolling()
 })
 </script>
 
@@ -81,10 +77,9 @@ onUnmounted(() => {
 
 <style scoped>
 .scroll-container {
-  height: 100vh; /* Use full viewport height */
+  height: 100vh;
   overflow: hidden;
   position: relative;
-  cursor: pointer;
 }
 
 .scroll-content {

package/components/StickyNote.vue

@@ -28,6 +28,16 @@ const props = defineProps({
     type: String,
     default: 'block text-xs font-mono tracking-normal font-bold',
   },
+  devOnly: {
+    // only show in dev mode (useful for notes that shouldn't appear in exports)
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isVisible = computed(() => {
+  if (!props.devOnly) return true
+  return import.meta.env.DEV
 })
 
 const colorscheme = computed(() => {
@@ -48,7 +58,7 @@ const stickyStyles = computed(() => ({
 </script>
 
 <template>
-  <div :class="stickyClasses" :style="stickyStyles">
+  <div v-if="isVisible" :class="stickyClasses" :style="stickyStyles">
     <template v-if="props.title !== ''"
       ><span :class="props.customTitle">{{ props.title }}</span></template
     >

package/docs/.vitepress/config.js

@@ -28,6 +28,7 @@ export default defineConfig({
           { text: 'Getting Started', link: '/getting-started' },
           { text: 'Markdown Features', link: '/markdown' },
           { text: 'Colors Schemes', link: '/colors' },
+          { text: 'Dark Mode', link: '/dark-mode' },
           { text: 'Styling', link: '/styling' },
           { text: 'Branding', link: '/branding' },
           {

package/docs/components/creditscroll.md

@@ -1 +1,35 @@
 # CreditScroll
+
+## Description
+
+The `CreditScroll` component creates a scrolling container similar to movie credits. Content placed inside will automatically scroll upward when the slide is entered. This component is used internally by the [`layout: credits`](/layouts/credits) layout, but can also be used standalone.
+
+## Props
+
+- `speed` (optional) controls how fast the content scrolls. Default is `0.5`. Higher numbers scroll faster.
+- `loop` (optional) whether the credits should loop back to the beginning after scrolling completes. Default is `false`.
+
+## Usage
+
+The component uses a default slot for content.
+
+```vue
+<CreditScroll speed="1.0" loop>
+  <div class="text-center">
+    <h2>Credits</h2>
+    <p>Person 1</p>
+    <p>Person 2</p>
+  </div>
+</CreditScroll>
+```
+
+## Behavior
+
+- Scrolling automatically starts when you navigate to the slide
+- Scrolling resets when re-entering the slide
+- If `loop` is `true`, the content will restart from the beginning after completing
+- If `loop` is `false`, scrolling stops when the content has fully scrolled through
+
+## Note
+
+For most use cases, it's easier to use the [`layout: credits`](/layouts/credits) layout which wraps this component and provides frontmatter options for `speed` and `loop`.

package/docs/components/stickynote.md

@@ -16,6 +16,7 @@ The `StickyNote` component is used to create a colored box with an title and con
 - `textAlign` (optional) the text alignment of the content. Default is `left`.
 - `custom` (optional) a custom CSS class to apply to the sticky note content. Default is empty.
 - `customTitle` (optional) a custom CSS class to apply to the sticky note title. Default is `block text-xs font-mono tracking-normal font-bold`.
+- `devOnly` (optional) when set to `true`, the sticky note will only be visible in development mode and will be hidden in production builds and exports. This is useful for personal notes or reminders that shouldn't appear in the final presentation. Default is `false`.
 
 Example:
 
@@ -71,3 +72,18 @@ Another color:
 
 Hello, I'm a **sticky note**.
 </StickyNote>
+
+## Dev-Only Notes
+
+Use the `devOnly` prop to create sticky notes that only appear during development. These are perfect for speaker notes, reminders, or TODOs that you don't want in your exported presentation:
+
+```vue
+<StickyNote color="amber-light" width="180px" title="Note to self" devOnly>
+  Remember to add more examples here before the talk!
+</StickyNote>
+```
+
+When `devOnly` is set to `true`:
+
+- The sticky note is visible when running `slidev dev`
+- The sticky note is **hidden** when running `slidev build` or `slidev export`

package/docs/dark-mode.md

@@ -0,0 +1,134 @@
+# Dark Mode
+
+Neversink supports Slidev's built-in dark mode feature, allowing your presentations to adapt to light and dark viewing preferences.
+
+## Enabling Dark Mode
+
+To enable dark mode support in your presentation, set the `colorSchema` option in your first slide's frontmatter:
+
+```md
+---
+theme: neversink
+colorSchema: auto
+---
+```
+
+### Color Schema Options
+
+| Value | Description |
+|-------|-------------|
+| `auto` | Automatically switches based on system preference (recommended) |
+| `light` | Forces light mode only |
+| `dark` | Forces dark mode only |
+
+## Toggling Dark Mode
+
+When `colorSchema` is set to `auto` or when both modes are available, you can toggle between light and dark mode using:
+
+- **Keyboard shortcut**: Press `d` to toggle dark mode
+- **Navigation controls**: Click the dark mode toggle in Slidev's navigation panel
+- **System preference**: The presentation will automatically follow your OS dark mode setting when using `auto`
+
+## How Color Schemes Work in Dark Mode
+
+Neversink's [color schemes](/colors) automatically adapt when dark mode is enabled. Each scheme has been roughly designed to maintain readability and visual appeal in both modes.  Suggested improvements are welcome!
+
+For example, when you use a layout with `color: amber`:
+
+```md
+---
+layout: top-title
+color: amber
+---
+```
+
+The amber colors will automatically adjust to appropriate dark mode variants when the user toggles dark mode.
+
+### CSS Variables in Dark Mode
+
+The theme's CSS variables are redefined in dark mode to ensure proper contrast:
+
+```css
+/* Light mode (default) */
+--neversink-bg-color: /* light background */
+--neversink-text-color: /* dark text */
+
+/* Dark mode (html.dark) */
+--neversink-bg-color: /* dark background */
+--neversink-text-color: /* light text */
+```
+
+## Conditional Content with LightOrDark
+
+Slidev provides a built-in `<LightOrDark>` component for showing different content based on the current mode:
+
+```vue
+<LightOrDark>
+  <template #light>
+    <img src="/logo-light.png" />
+  </template>
+  <template #dark>
+    <img src="/logo-dark.png" />
+  </template>
+</LightOrDark>
+```
+
+This is useful for:
+
+- Showing different logo versions
+- Displaying images optimized for each mode
+- Any content that needs to differ between modes
+
+## Images in Dark Mode
+
+Some images designed for light backgrounds may look odd on dark backgrounds. You have several options:
+
+### 1. Use the `.invert` Class
+
+Add the `invert` class to invert image colors in dark mode:
+
+```html
+<img src="/diagram.png" class="invert" />
+```
+
+### 2. Use Conditional Images
+
+Use the `<LightOrDark>` component to show different images:
+
+```vue
+<LightOrDark>
+  <template #light>
+    <img src="/chart-light.png" />
+  </template>
+  <template #dark>
+    <img src="/chart-dark.png" />
+  </template>
+</LightOrDark>
+```
+
+## Components in Dark Mode
+
+All Neversink components (StickyNote, Admonition, SpeechBubble, etc.) automatically adapt to dark mode when using color schemes:
+
+```vue
+<StickyNote color="amber-light" title="Note">
+  This sticky note will look great in both modes!
+</StickyNote>
+```
+
+## Programmatic Dark Mode Access
+
+For advanced use cases, you can access the dark mode state in Vue components:
+
+```vue
+<script setup>
+import { isDark, toggleDark } from '@slidev/client/logic/dark'
+</script>
+
+<template>
+  <button @click="toggleDark()">
+    {{ isDark ? 'Switch to Light' : 'Switch to Dark' }}
+  </button>
+</template>
+```
+

package/docs/getting-started.md

@@ -24,6 +24,7 @@ If you are new to Slidev highly recommend you check out the [Slidev documentatio
 
 - [Markdown features](markdown.md) - special addons to the Slidev markdown syntax
 - [Color schemes](colors.md) - the color schemes available in Neversink
+- [Dark mode](dark-mode.md) - how to enable and use dark mode in your presentations
 - [Branding](branding.md) - how to customize the theme to your brand/logos
 - [Styling](styling.md) - the custom CSS classes available in Neversink
 - [Custom layouts](layouts.md) - the custom slide layouts available in Neversink

package/docs/layouts/credits.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-The `layout: credits` make a scrolling credits slide simliar to the end of a movive. The slide will automatically scroll the content up the screen. The actual logic for the scrolling is handled by the [CreditScroll component](/components/creditscroll).
+The `layout: credits` makes a scrolling credits slide similar to the end of a movie. The slide will automatically scroll the content up the screen. The actual logic for the scrolling is handled by the [CreditScroll component](/components/creditscroll).
 
 ## Frontmatter
 

package/docs/styling.md

@@ -58,7 +58,91 @@ If you want to make bullets a little closer together to make spaceadd the `class
 </div>
 ```
 
-Other options are `ns-c-tight` and `ns-c-supertight`.
+Other options are `ns-c-verytight` and `ns-c-supertight`.
+
+## Slide Margins
+
+Sometimes you need more space on a slide to fit extra content. Neversink provides two ways to reduce slide margins:
+
+### Frontmatter Option
+
+Most layouts support a `margin` frontmatter option:
+
+```md
+---
+layout: default
+margin: tight
+---
+```
+
+| Value | Description | Top Padding | Side Padding |
+|-------|-------------|-------------|--------------|
+| `normal` | Default margins (no change) | 1.8rem | default |
+| `tight` | Reduced padding for more content space | 0.8rem | 1.5rem |
+| `tighter` | Even smaller margins | 0.4rem | 1rem |
+| `none` | Remove all padding | 0 | 0 |
+
+This works with layouts: `default`, `full`, `section`, `top-title`, `top-title-two-cols`, `side-title`, and `two-cols-title`.
+
+### Visual Comparison
+
+Here's how each margin setting affects slide content:
+
+<div class="flex flex-wrap gap-4">
+<div class="w-[48%]">
+
+**`margin: normal`** (default)
+
+<img src="/screenshots/39.png" alt="normal margins" class="screenshot" />
+
+</div>
+<div class="w-[48%]">
+
+**`margin: tight`**
+
+<img src="/screenshots/40.png" alt="tight margins" class="screenshot" />
+
+</div>
+<div class="w-[48%]">
+
+**`margin: tighter`**
+
+<img src="/screenshots/41.png" alt="tighter margins" class="screenshot" />
+
+</div>
+<div class="w-[48%]">
+
+**`margin: none`**
+
+<img src="/screenshots/42.png" alt="no margins" class="screenshot" />
+
+</div>
+</div>
+
+### CSS Classes
+
+You can also apply margin classes directly to elements:
+
+| Class | Effect |
+|-------|--------|
+| `ns-c-tight-margin` | Reduced padding (same as `margin: tight`) |
+| `ns-c-tighter-margin` | Even smaller margins (same as `margin: tighter`) |
+| `ns-c-no-margin` | Remove all padding (same as `margin: none`) |
+
+Example using a class on a div:
+
+```html
+<div class="ns-c-tight-margin">
+  Content with reduced margins
+</div>
+```
+
+### When to Use Each Option
+
+- **`normal`**: Most slides - good balance of whitespace and content
+- **`tight`**: When you need a little extra room for one more bullet point or a slightly larger image
+- **`tighter`**: For data-heavy slides, large tables, or detailed diagrams
+- **`none`**: Full-bleed images, custom layouts, or when you need absolute control over positioning
 
 ## Centering content
 

package/example.md

@@ -1,5 +1,5 @@
 ---
-colorSchema: light
+colorSchema: auto
 layout: cover
 routerMode: hash
 title: Base Template
@@ -1238,6 +1238,30 @@ Hello, I'm also a **sticky note** but I'm customized with a title and a custom c
 </StickyNote>
 ```
 
+---
+layout: default
+title: Dev-Only Sticky Notes
+---
+
+# Dev-Only Sticky Notes
+
+<StickyNote color="rose-light" textAlign="left" width="200px" title="Dev Note" devOnly v-drag="[650,150,200,200]">
+
+This note only appears in **dev mode**! It won't show in exports or production builds.
+</StickyNote>
+
+Use the `devOnly` prop to create sticky notes that only appear during development. These are perfect for speaker notes, reminders, or TODOs that you don't want in your final presentation.
+
+```vue
+<StickyNote color="rose-light" title="Dev Note" devOnly>
+  This note only appears in dev mode!
+</StickyNote>
+```
+
+When `devOnly` is set to `true`:
+- Visible when running `slidev dev`
+- Hidden when running `slidev build` or `slidev export`
+
 ---
 layout: default
 title: Kawaii 1
@@ -1298,6 +1322,89 @@ Result:
 
 
 
+---
+layout: default
+title: Slide Margins - Normal
+---
+
+# Slide Margins: `normal` (default)
+
+Sometimes you need more space on a slide. Use the `margin` frontmatter option to control slide padding.
+
+- This slide uses the default `margin: normal`
+- Notice the standard padding around the content
+- Good for most slides with typical content
+
+```yaml
+---
+layout: default
+margin: normal  # or just omit this line
+---
+```
+
+---
+layout: default
+margin: tight
+title: Slide Margins - Tight
+---
+
+# Slide Margins: `tight`
+
+This slide uses `margin: tight` for reduced padding.
+
+- More horizontal and vertical space for content
+- Useful when you need to fit more on a slide
+- Notice how the content extends closer to the edges
+
+```yaml
+---
+layout: default
+margin: tight
+---
+```
+
+---
+layout: default
+margin: tighter
+title: Slide Margins - Tighter
+---
+
+# Slide Margins: `tighter`
+
+This slide uses `margin: tighter` for even smaller margins.
+
+- Maximum content space while still having some padding
+- Good for dense information or larger diagrams
+- Compare to the previous slides to see the difference
+
+```yaml
+---
+layout: default
+margin: tighter
+---
+```
+
+---
+layout: default
+margin: none
+title: Slide Margins - None
+---
+
+# Slide Margins: `none`
+
+This slide uses `margin: none` to remove all padding.
+
+- Content goes edge-to-edge
+- Useful for full-bleed images or custom layouts
+- Be careful with readability near edges
+
+```yaml
+---
+layout: default
+margin: none
+---
+```
+
 ---
 layout: default
 title: Lines