hashmd
hashmd copied to clipboard
Built-in dark mode
This issue is stale because it has been open for 30 days with no activity.
这个还打算做吗?
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!
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;
}
}