LiBr/blog-astro
1
0
Fork 0
mirror of https://github.com/lbr77/blog-astro.git synced 2026-04-08 16:11:56 +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%;
box-sizing: border-box;
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;
display: flex;
overflow: hidden;
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 {
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 RichText from './RichText.astro'
import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'
export interface Props {
block: interfaces.Block
@@ -58,8 +59,8 @@ const callout = block.Callout
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: transparent;
background: rgba(235, 236, 237, 0.6);
border-color: var(--notion-border);
background: var(--notion-surface);
}
.callout > div {
min-width: 0;

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

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

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

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

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

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

12
src/styles/global.css
View File

@@ -53,6 +53,12 @@
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 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'] {
@@ -65,6 +71,12 @@
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--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 {

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:hover {
color: rgba(120, 119, 116, 1);
color: var(--notion-gray);
}
.brown,
.brown:hover {
color: rgba(159, 107, 83, 1);
color: var(--notion-brown);
}
.orange,
.orange:hover {
color: rgba(217, 115, 13, 1);
color: var(--notion-orange);
}
.yellow,
.yellow:hover {
color: rgba(203, 145, 47, 1);
color: var(--notion-yellow);
}
.green,
.green:hover {
color: rgba(68, 131, 97, 1);
color: var(--notion-green);
}
.blue,
.blue:hover {
color: rgba(51, 126, 169, 1);
color: var(--notion-blue);
}
.purple,
.purple:hover {
color: rgba(144, 101, 176, 1);
color: var(--notion-purple);
}
.pink,
.pink:hover {
color: rgba(193, 76, 138, 1);
color: var(--notion-pink);
}
.red,
.red:hover {
color: rgba(212, 76, 71, 1);
color: var(--notion-red);
}
.gray-background {
background: rgba(241, 241, 239, 1) !important;
background: var(--notion-gray-background) !important;
}
.brown-background {
background: rgba(244, 238, 238, 1) !important;
background: var(--notion-brown-background) !important;
}
.orange-background {
background: rgba(251, 236, 221, 1) !important;
background: var(--notion-orange-background) !important;
}
.yellow-background {
background: rgba(251, 243, 219, 1) !important;
background: var(--notion-yellow-background) !important;
}
.green-background {
background: rgba(237, 243, 236, 1) !important;
background: var(--notion-green-background) !important;
}
.blue-background {
background: rgba(231, 243, 248, 1) !important;
background: var(--notion-blue-background) !important;
}
.purple-background {
background: rgba(244, 240, 247, 0.8) !important;
background: var(--notion-purple-background) !important;
}
.pink-background {
background: rgba(249, 238, 243, 0.8) !important;
background: var(--notion-pink-background) !important;
}
.red-background {
background: rgba(253, 235, 236, 1) !important;
background: var(--notion-red-background) !important;
}
.tag.light-gray {
color: rgb(28, 56, 41);
background: rgba(227, 226, 224, 0.5) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-light-gray) !important;
}
.tag.gray {
color: rgb(28, 56, 41);
background: rgb(227, 226, 224) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-gray) !important;
}
.tag.brown {
color: rgb(28, 56, 41);
background: rgb(238, 224, 218) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-brown) !important;
}
.tag.orange {
color: rgb(28, 56, 41);
background: rgb(250, 222, 201) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-orange) !important;
}
.tag.yellow {
color: rgb(28, 56, 41);
background: rgb(253, 236, 200) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-yellow) !important;
}
.tag.green {
color: rgb(28, 56, 41);
background: rgb(219, 237, 219) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-green) !important;
}
.tag.blue {
color: rgb(28, 56, 41);
background: rgb(211, 229, 239) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-blue) !important;
}
.tag.purple {
color: rgb(28, 56, 41);
background: rgb(232, 222, 238) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-purple) !important;
}
.tag.pink {
color: rgb(28, 56, 41);
background: rgb(245, 224, 233) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-pink) !important;
}
.tag.red {
color: rgb(28, 56, 41);
background: rgb(255, 226, 221) !important;
color: var(--notion-tag-foreground);
background: var(--notion-tag-red) !important;
}