diff --git a/README.md b/README.md index d94f0f20..e84eece6 100644 --- a/README.md +++ b/README.md @@ -24,10 +24,9 @@ Kong's open-source markdown renderer and live editor. - [X] Utilize design tokens - [X] Add new icons for toolbar -- [ ] Possibly export separate bundles for syntax highlighting options -- [ ] Document theming instructions -- [ ] Light / Dark mode +- [X] Light / Dark mode - [X] Default styles for markdown HTML elements +- [ ] Possibly export separate bundles for syntax highlighting options ## Usage @@ -114,24 +113,19 @@ The number of spaces to insert when a user tabs within the textarea. Defaults to - type: `'light' | 'dark'` - required: `false` -- default: `'light'` +- default: `''` -The theme used when the component initializes, one of `'light'` or `'dark'`. Defaults to the user's browser's preferred color scheme. +The theme used when the component initializes, one of `'light'` or `'dark'`. Defaults to the user's browser's preferred color scheme (recommended). To customize the colors for a specific theme, you may provide values for the underlying CSS custom properties, scoped to the container. -For example, if you want to change the background color in `light` mode: +For example, if you want to change the rendered markdown document's background color: ```css -.markdown-content.theme-light { +.theme-light .markdown-content { --kui-color-background: #eee; } -``` - -If you want to change the background color in `dark` mode: - -```css -.markdown-content.theme-dark { +.theme-dark .markdown-content { --kui-color-background-inverse: #292D3E; } ``` diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue index 53e3d49b..abc22eda 100644 --- a/src/components/MarkdownUi.vue +++ b/src/components/MarkdownUi.vue @@ -150,7 +150,6 @@ import composables from '@/composables' import { UNIQUE_ID_INJECTION_KEY, TEXTAREA_ID_INJECTION_KEY, MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY, FULLSCREEN_INJECTION_KEY, HTML_PREVIEW_INJECTION_KEY, THEME_INJECTION_KEY } from '@/injection-keys' import { EDITOR_DEBOUNCE_TIMEOUT, TOOLBAR_HEIGHT, NEW_LINE_CHARACTER } from '@/constants' import { useMediaQuery, useEventListener, usePreferredColorScheme } from '@vueuse/core' -import type { ColorSchemeType } from '@vueuse/core' import { v4 as uuidv4 } from 'uuid' import type { MarkdownMode, InlineFormat, MarkdownTemplate, TextAreaInputEvent, Theme } from '@/types' import formatHtml from 'html-format'