LiBr/blog-astro
1
0
Fork 0
mirror of https://github.com/lbr77/blog-astro.git synced 2026-04-09 00:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
LiBr
2025-12-08 13:08:51 +08:00
parent ea660e7802
commit 8fd47efc96
7 changed files with 135 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/notion/Bookmark.astro
View File

@@ -74,11 +74,17 @@ try {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
text-decoration: none; text-decoration: none;
border: 1px solid rgba(55, 53, 47, 0.16); border: 1px solid var(--notion-border);
background: var(--notion-surface);
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
transition: background-color 160ms ease, border-color 160ms ease;
}
.bookmark > a:hover {
background: var(--notion-surface-strong);
border-color: color-mix(in oklab, var(--notion-border) 70%, transparent);
} }
.bookmark > a > div:first-child { .bookmark > a > div:first-child {
flex: 4 1 180px; flex: 4 1 180px;

5
src/components/notion/Callout.astro
View File

@@ -3,6 +3,7 @@ import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts' import { snakeToKebab } from '../../lib/style-helpers.ts'
import RichText from './RichText.astro' import RichText from './RichText.astro'
import NotionBlocks from '../NotionBlocks.astro' import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
export interface Props { export interface Props {
block: interfaces.Block block: interfaces.Block
@@ -58,8 +59,8 @@ const callout = block.Callout
border-radius: 3px; border-radius: 3px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: var(--notion-border);
background: rgba(235, 236, 237, 0.6); background: var(--notion-surface);
} }
.callout > div { .callout > div {
min-width: 0; min-width: 0;

4
src/components/notion/Divider.astro
View File

@@ -6,6 +6,8 @@
<style> <style>
.divider { .divider {
margin: 1rem 0; margin: 1rem 0;
background-color: #dedede; height: 1px;
border: 0;
background-color: var(--notion-border);
} }
</style> </style>

3
src/components/notion/File.astro
View File

@@ -62,9 +62,10 @@ const filename =
color: var(--fg); color: var(--fg);
font-weight: 500; font-weight: 500;
line-height: 1.4rem; line-height: 1.4rem;
transition: background-color 120ms ease;
} }
.file a:hover { .file a:hover {
background-color: #eee; background-color: var(--notion-gray-background);
} }
.file a img { .file a img {

2
src/components/notion/TableOfContents.astro
View File

@@ -58,7 +58,7 @@ if (!block.TableOfContents) {
text-decoration: underline; text-decoration: underline;
} }
.table-of-contents > a:hover { .table-of-contents > a:hover {
background: rgba(241, 241, 239, 1) !important; background: var(--notion-gray-background) !important;
} }
.table-of-contents > a.indent-1 { .table-of-contents > a.indent-1 {
padding-left: 1.5rem; padding-left: 1.5rem;

12
src/styles/global.css
View File

@@ -53,6 +53,12 @@
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0); --border: oklch(0.922 0 0);
--ring: oklch(0.708 0 0); --ring: oklch(0.708 0 0);
--fg: var(--foreground);
--anchor-border: color-mix(in oklab, var(--foreground) 28%, transparent);
--notion-surface: color-mix(in oklab, var(--muted) 16%, transparent);
--notion-surface-strong: color-mix(in oklab, var(--muted) 26%, transparent);
--notion-border: color-mix(in oklab, var(--border) 85%, transparent);
} }
[data-theme='dark'] { [data-theme='dark'] {
@@ -65,6 +71,12 @@
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%); --border: oklch(1 0 0 / 10%);
--ring: oklch(0.556 0 0); --ring: oklch(0.556 0 0);
--fg: var(--foreground);
--anchor-border: color-mix(in oklab, var(--foreground) 42%, transparent);
--notion-surface: color-mix(in oklab, var(--muted) 26%, transparent);
--notion-surface-strong: color-mix(in oklab, var(--muted) 38%, transparent);
--notion-border: color-mix(in oklab, var(--border) 95%, transparent);
} }
@layer base { @layer base {

145
src/styles/notion-color.css
View File

@@ -1,104 +1,173 @@
:root {
--notion-gray: #787774;
--notion-brown: #9f6b53;
--notion-orange: #d9730d;
--notion-yellow: #cb912f;
--notion-green: #448561;
--notion-blue: #337ea9;
--notion-purple: #9065b0;
--notion-pink: #c14c8a;
--notion-red: #d44c47;
--notion-gray-background: #f1f1ef;
--notion-brown-background: #f4eeee;
--notion-orange-background: #fbecdd;
--notion-yellow-background: #fbf3db;
--notion-green-background: #edf3ec;
--notion-blue-background: #e7f3f8;
--notion-purple-background: rgba(244, 240, 247, 0.8);
--notion-pink-background: rgba(249, 238, 243, 0.8);
--notion-red-background: #fdebec;
--notion-tag-foreground: rgb(28, 56, 41);
--notion-tag-light-gray: rgba(227, 226, 224, 0.5);
--notion-tag-gray: rgb(227, 226, 224);
--notion-tag-brown: rgb(238, 224, 218);
--notion-tag-orange: rgb(250, 222, 201);
--notion-tag-yellow: rgb(253, 236, 200);
--notion-tag-green: rgb(219, 237, 219);
--notion-tag-blue: rgb(211, 229, 239);
--notion-tag-purple: rgb(232, 222, 238);
--notion-tag-pink: rgb(245, 224, 233);
--notion-tag-red: rgb(255, 226, 221);
}
[data-theme='dark'] {
--notion-gray: color-mix(in oklab, var(--foreground) 82%, #787774);
--notion-brown: color-mix(in oklab, var(--foreground) 82%, #9f6b53);
--notion-orange: color-mix(in oklab, var(--foreground) 82%, #d9730d);
--notion-yellow: color-mix(in oklab, var(--foreground) 82%, #cb912f);
--notion-green: color-mix(in oklab, var(--foreground) 82%, #448561);
--notion-blue: color-mix(in oklab, var(--foreground) 82%, #337ea9);
--notion-purple: color-mix(in oklab, var(--foreground) 82%, #9065b0);
--notion-pink: color-mix(in oklab, var(--foreground) 82%, #c14c8a);
--notion-red: color-mix(in oklab, var(--foreground) 82%, #d44c47);
--notion-gray-background: color-mix(in oklab, var(--background) 82%, #f1f1ef);
--notion-brown-background: color-mix(in oklab, var(--background) 82%, #f4eeee);
--notion-orange-background: color-mix(in oklab, var(--background) 82%, #fbecdd);
--notion-yellow-background: color-mix(in oklab, var(--background) 82%, #fbf3db);
--notion-green-background: color-mix(in oklab, var(--background) 82%, #edf3ec);
--notion-blue-background: color-mix(in oklab, var(--background) 82%, #e7f3f8);
--notion-purple-background: color-mix(in oklab, var(--background) 82%, rgba(244, 240, 247, 0.8));
--notion-pink-background: color-mix(in oklab, var(--background) 82%, rgba(249, 238, 243, 0.8));
--notion-red-background: color-mix(in oklab, var(--background) 82%, #fdebec);
--notion-tag-foreground: var(--foreground);
--notion-tag-light-gray: color-mix(in oklab, #e3e2e0 34%, var(--background));
--notion-tag-gray: color-mix(in oklab, #e3e2e0 44%, var(--background));
--notion-tag-brown: color-mix(in oklab, #eee0da 44%, var(--background));
--notion-tag-orange: color-mix(in oklab, #faddc9 44%, var(--background));
--notion-tag-yellow: color-mix(in oklab, #fdecc8 44%, var(--background));
--notion-tag-green: color-mix(in oklab, #dbeddb 44%, var(--background));
--notion-tag-blue: color-mix(in oklab, #d3e5f3 44%, var(--background));
--notion-tag-purple: color-mix(in oklab, #e8deee 44%, var(--background));
--notion-tag-pink: color-mix(in oklab, #f5e0e9 44%, var(--background));
--notion-tag-red: color-mix(in oklab, #ffe2dd 44%, var(--background));
}
.gray, .gray,
.gray:hover { .gray:hover {
color: rgba(120, 119, 116, 1); color: var(--notion-gray);
} }
.brown, .brown,
.brown:hover { .brown:hover {
color: rgba(159, 107, 83, 1); color: var(--notion-brown);
} }
.orange, .orange,
.orange:hover { .orange:hover {
color: rgba(217, 115, 13, 1); color: var(--notion-orange);
} }
.yellow, .yellow,
.yellow:hover { .yellow:hover {
color: rgba(203, 145, 47, 1); color: var(--notion-yellow);
} }
.green, .green,
.green:hover { .green:hover {
color: rgba(68, 131, 97, 1); color: var(--notion-green);
} }
.blue, .blue,
.blue:hover { .blue:hover {
color: rgba(51, 126, 169, 1); color: var(--notion-blue);
} }
.purple, .purple,
.purple:hover { .purple:hover {
color: rgba(144, 101, 176, 1); color: var(--notion-purple);
} }
.pink, .pink,
.pink:hover { .pink:hover {
color: rgba(193, 76, 138, 1); color: var(--notion-pink);
} }
.red, .red,
.red:hover { .red:hover {
color: rgba(212, 76, 71, 1); color: var(--notion-red);
} }
.gray-background { .gray-background {
background: rgba(241, 241, 239, 1) !important; background: var(--notion-gray-background) !important;
} }
.brown-background { .brown-background {
background: rgba(244, 238, 238, 1) !important; background: var(--notion-brown-background) !important;
} }
.orange-background { .orange-background {
background: rgba(251, 236, 221, 1) !important; background: var(--notion-orange-background) !important;
} }
.yellow-background { .yellow-background {
background: rgba(251, 243, 219, 1) !important; background: var(--notion-yellow-background) !important;
} }
.green-background { .green-background {
background: rgba(237, 243, 236, 1) !important; background: var(--notion-green-background) !important;
} }
.blue-background { .blue-background {
background: rgba(231, 243, 248, 1) !important; background: var(--notion-blue-background) !important;
} }
.purple-background { .purple-background {
background: rgba(244, 240, 247, 0.8) !important; background: var(--notion-purple-background) !important;
} }
.pink-background { .pink-background {
background: rgba(249, 238, 243, 0.8) !important; background: var(--notion-pink-background) !important;
} }
.red-background { .red-background {
background: rgba(253, 235, 236, 1) !important; background: var(--notion-red-background) !important;
} }
.tag.light-gray { .tag.light-gray {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgba(227, 226, 224, 0.5) !important; background: var(--notion-tag-light-gray) !important;
} }
.tag.gray { .tag.gray {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(227, 226, 224) !important; background: var(--notion-tag-gray) !important;
} }
.tag.brown { .tag.brown {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(238, 224, 218) !important; background: var(--notion-tag-brown) !important;
} }
.tag.orange { .tag.orange {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(250, 222, 201) !important; background: var(--notion-tag-orange) !important;
} }
.tag.yellow { .tag.yellow {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(253, 236, 200) !important; background: var(--notion-tag-yellow) !important;
} }
.tag.green { .tag.green {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(219, 237, 219) !important; background: var(--notion-tag-green) !important;
} }
.tag.blue { .tag.blue {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(211, 229, 239) !important; background: var(--notion-tag-blue) !important;
} }
.tag.purple { .tag.purple {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(232, 222, 238) !important; background: var(--notion-tag-purple) !important;
} }
.tag.pink { .tag.pink {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(245, 224, 233) !important; background: var(--notion-tag-pink) !important;
} }
.tag.red { .tag.red {
color: rgb(28, 56, 41); color: var(--notion-tag-foreground);
background: rgb(255, 226, 221) !important; background: var(--notion-tag-red) !important;
} }