Built-in dark mode

[pd4d10]

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[lin-mt]

这个还打算做吗？

[celldra]

Hey there!

I've built my own dark mode theme for the Svelte component using Tailwind CSS, I can send what styles I applied to achieve this result:

CSS overrides:

/* ByteMD editor overrides	*/
.bytemd {
	@apply !bg-zinc-700 !text-white !border-zinc-600 rounded-lg;
}

.bytemd-toolbar {
	@apply !bg-zinc-600 !border-zinc-600 rounded-t-lg;
}

.CodeMirror {
	@apply !bg-zinc-700 !text-white;
}

.bytemd-split {
	@apply !border-l-zinc-600;
}

.bytemd-status {
	@apply !border-t-zinc-600;
}

.bytemd-toolbar-icon {
	@apply hover:!bg-zinc-500 transition-all duration-100;
}

I hope this helps anyone looking for a solution to this problem!

[Jansora]

I tried bytemd darkmode adapter with shadcn/ui.

it works well between dark / light.
sharing it with you

override.scss

.bytemd {

    height: inherit;

    .bytemd-preview {
        background-color: hsl(var(--background));
    }
    .bytemd-toolbar {
        padding: 4px;
    }
    .bytemd-toolbar svg {
        width: 24px;
        height: 24px;
    }

}


.dark {

    .bytemd {
        background-color: hsl(var(--background));

        border: 1px solid hsl(var(--secondary));

        .bytemd-status {
            border-top: 1px solid hsl(var(--secondary));
        }


        .bytemd-toolbar {
            display: flex;
            color: hsl(var(--muted-foreground));
            background-color: hsl(var(--background));
            border-bottom: 1px solid hsl(var(--secondary));
        }

        .bytemd-editor {
            border-right: 1px solid hsl(var(--secondary));
        }

        .bytemd-preview {
            border-left: none;
        }


        .bytemd-toolbar svg, .bytemd-status, .bytemd-toolbar-icon svg,  {
            color: hsl(var(--muted-foreground));
        }



        .bytemd-toolbar-tab-active {
            color: hsl(var(--foreground));
        }

        .bytemd-toolbar-icon svg:hover {
            color: hsl(var(--background)) ;
        }

    }

    .CodeMirror {
        color: hsl(var(--foreground));
        background: hsl(var(--background));
        .CodeMirror-cursor {
            border-left: 1px solid hsl(var(--foreground));
        }
    }


    .markdown-body {
        background: hsl(var(--background));
    }

}


.byte-editor, .byte-viewer {
    .bytemd {
        height: inherit;
    }
}


.byte-editor {
    .bytemd-preview {
        padding: 16px;
    }
}

base variables

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --ring: 240 3.7% 15.9%
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}