110 lines
2.9 KiB
Markdown
110 lines
2.9 KiB
Markdown
# Modern Docusaurus Dark Theme — CSS Reference
|
|
|
|
Dark-first, Vercel/Linear-inspired theme built for SKIC Playground docs.
|
|
Full source lives at `/opt/data/documentation/src/css/custom.css`.
|
|
|
|
## Design Decisions
|
|
|
|
- **Font**: Geist (by Vercel) via CDN + Geist Mono for code
|
|
- **Accent**: Indigo `#6366f1` (light) / `#818cf8` (dark)
|
|
- **Background**: `#0a0a0a` (near-black, not pure black)
|
|
- **Surface**: `#111111` for cards, sidebars
|
|
- **Text**: `#ededed` primary, `#a1a1a1` secondary
|
|
|
|
## Key Overrides
|
|
|
|
### Dark mode base palette
|
|
```css
|
|
[data-theme='dark'] {
|
|
--ifm-color-primary: #818cf8;
|
|
--ifm-background-color: #0a0a0a;
|
|
--ifm-background-surface-color: #111111;
|
|
--ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
|
|
--ifm-color-content: #ededed;
|
|
--ifm-color-content-secondary: #a1a1a1;
|
|
--ifm-color-emphasis-100: #1a1a1a;
|
|
--ifm-color-emphasis-200: #222222;
|
|
--ifm-color-emphasis-300: #333333;
|
|
}
|
|
```
|
|
|
|
### Typography
|
|
```css
|
|
:root {
|
|
--ifm-font-family-base: 'Geist', 'Inter', system-ui, sans-serif;
|
|
--ifm-font-family-monospace: 'Geist Mono', 'Fira Code', monospace;
|
|
--ifm-font-size-base: 15px;
|
|
--ifm-line-height-base: 1.7;
|
|
--ifm-heading-letter-spacing: -0.02em;
|
|
--ifm-h1-font-size: 2.25rem;
|
|
}
|
|
h2 { border-bottom: 1px solid var(--ifm-color-emphasis-200); }
|
|
```
|
|
|
|
### Glassmorphic Navbar
|
|
```css
|
|
.navbar {
|
|
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
[data-theme='dark'] .navbar { background: rgba(10, 10, 10, 0.85); }
|
|
```
|
|
|
|
### Table Styling
|
|
```css
|
|
table { border: 1px solid var(--ifm-color-emphasis-200); border-radius: 8px; overflow: hidden; }
|
|
thead { background: var(--ifm-color-emphasis-100); }
|
|
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
tbody tr:hover { background: var(--ifm-color-emphasis-100); }
|
|
```
|
|
|
|
### Hero Section (homepage)
|
|
```css
|
|
.heroTitle {
|
|
background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 60%, #818cf8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: clamp(2.5rem, 5vw, 3.75rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
```
|
|
|
|
### App Cards (dark glass style)
|
|
```css
|
|
.appCard {
|
|
background: #111111;
|
|
border: 1px solid #222222;
|
|
border-radius: 12px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.appCard:hover {
|
|
border-color: #6366f1;
|
|
background: #161625;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(99,102,241,0.12);
|
|
}
|
|
```
|
|
|
|
## Prism Code Theme
|
|
Use `oneDark` for both light and dark (visually consistent in docs):
|
|
```ts
|
|
prism: {
|
|
theme: prismThemes.oneDark,
|
|
darkTheme: prismThemes.oneDark,
|
|
additionalLanguages: ['bash', 'python', 'sql', 'yaml', 'json', 'typescript', 'docker'],
|
|
},
|
|
```
|
|
|
|
## Announcement Bar
|
|
```ts
|
|
announcementBar: {
|
|
id: 'wip',
|
|
content: '🚧 Under active development',
|
|
backgroundColor: '#1a1a2e',
|
|
textColor: '#818cf8',
|
|
isCloseable: true,
|
|
},
|
|
```
|