lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: configure custom OKLCH theme, fonts, and dark mode tokens

Browse Source
This commit is contained in:
Your Name
2026-02-15 18:43:23 +02:00
parent bf5e9ff8b6
commit be933f5383
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -4,7 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + React + Typescript</title> <title>OpenPylon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap" rel="stylesheet">
</head> </head>
<body> <body>

38
src/index.css
View File

@@ -43,6 +43,16 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-pylon-bg: var(--pylon-bg);
--color-pylon-surface: var(--pylon-surface);
--color-pylon-column: var(--pylon-column);
--color-pylon-accent: var(--pylon-accent);
--color-pylon-text: var(--pylon-text);
--color-pylon-text-secondary: var(--pylon-text-secondary);
--color-pylon-danger: var(--pylon-danger);
--font-heading: "Instrument Serif", Georgia, serif;
--font-body: "Satoshi", system-ui, -apple-system, sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
} }
:root { :root {
@@ -78,6 +88,13 @@
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.708 0 0);
--pylon-bg: oklch(97% 0.005 80);
--pylon-surface: oklch(99% 0.003 80);
--pylon-column: oklch(95% 0.008 80);
--pylon-accent: oklch(55% 0.12 160);
--pylon-text: oklch(25% 0.015 50);
--pylon-text-secondary: oklch(55% 0.01 50);
--pylon-danger: oklch(55% 0.18 25);
} }
.dark { .dark {
@@ -112,15 +129,32 @@
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0); --sidebar-ring: oklch(0.556 0 0);
--pylon-bg: oklch(18% 0.01 50);
--pylon-surface: oklch(22% 0.01 50);
--pylon-column: oklch(20% 0.012 50);
--pylon-accent: oklch(60% 0.12 160);
--pylon-text: oklch(90% 0.01 50);
--pylon-text-secondary: oklch(55% 0.01 50);
--pylon-danger: oklch(60% 0.18 25);
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
@apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
@apply bg-background text-foreground; font-family: "Satoshi", system-ui, -apple-system, sans-serif;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
} }
} }