mirror of
https://github.com/ancsemi/Haven.git
synced 2026-10-25 16:20:42 +00:00
130 lines
5.3 KiB
Plaintext
130 lines
5.3 KiB
Plaintext
/**
|
|
* @name My Custom Theme
|
|
* @description A custom theme for my Haven server.
|
|
* @author YourName
|
|
* @version 1.0
|
|
* @icon 🎨
|
|
* @haven-theme-api 1
|
|
*/
|
|
|
|
/*
|
|
HOW TO USE
|
|
──────────
|
|
1. Rename this file to something like "mytheme.theme.css"
|
|
2. Edit the CSS variables below to your liking
|
|
3. Drop the file into the Haven/themes/ folder
|
|
4. In Admin Settings → Custom Themes, check the box next to your theme
|
|
5. It will appear as a button in the theme picker for all users
|
|
|
|
The @icon line above sets the emoji shown on the theme picker button.
|
|
You can use any emoji or a short text character (e.g. ★, ♦, 🌙).
|
|
|
|
The @haven-theme-api line declares which public token and region contract
|
|
this theme targets. See docs/theme-authoring.md for the complete reference.
|
|
|
|
All variables are optional; omit the ones you want to inherit from the
|
|
base Haven theme. Only override what you actually want to change.
|
|
*/
|
|
|
|
/*
|
|
BACKGROUND IMAGE
|
|
────────────────
|
|
Drop an image into this same themes/ folder and uncomment the block below.
|
|
The path is relative to this file, so no leading slash is needed.
|
|
|
|
The main region is the chat area; the message list and the messages themselves
|
|
are transparent, so the image sits behind all of them. The gradient on top is
|
|
a scrim that keeps text readable over a bright or busy image: raise 0.55 to
|
|
dim the image more, lower it to show more, or remove that line if the image
|
|
is already dark. Use white instead of black on a light theme.
|
|
|
|
The navigation sidebar keeps its own colour. Add its data-haven-region
|
|
selector to cover it too, or use body to cover the whole window.
|
|
*/
|
|
|
|
/*
|
|
[data-haven-region="main"] {
|
|
background-image:
|
|
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
|
|
url("wallpaper.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
*/
|
|
|
|
:root {
|
|
/* ── Backgrounds ───────────────────────────────── */
|
|
--bg-primary: #191b28; /* main app background */
|
|
--bg-secondary: #1e2035; /* sidebar / panels */
|
|
--bg-tertiary: #252840; /* nested panels, channel list */
|
|
--bg-hover: #2c2f4a; /* hover states */
|
|
--bg-active: #333660; /* active / selected items */
|
|
--bg-input: #15172a; /* text input background */
|
|
--bg-card: #1c1e33; /* message cards, modals */
|
|
|
|
/* ── Accent (buttons, links, highlights) ───────── */
|
|
--accent: #7c5cfc;
|
|
--accent-hover: #9478ff;
|
|
--accent-glow: rgba(124, 92, 252, 0.25);
|
|
--accent-text: #ffffff; /* preferred text for core accent controls */
|
|
|
|
/* ── Text ──────────────────────────────────────── */
|
|
--text-primary: #e2e4f0; /* main message text */
|
|
--text-secondary:#9498b3; /* timestamps, hints */
|
|
--text-muted: #5d6180; /* subtle labels, placeholders */
|
|
--text-link: #82aaff; /* hyperlinks */
|
|
|
|
/* ── Borders ───────────────────────────────────── */
|
|
--border: #2d3050;
|
|
--border-light: #383b5e;
|
|
|
|
/* ── Status colors ─────────────────────────────── */
|
|
--success: #43b581;
|
|
--success-text: #ffffff; /* text on success-filled controls */
|
|
--danger: #f04747;
|
|
--danger-text: #ffffff; /* text on danger-filled controls */
|
|
--warning: #faa61a;
|
|
--warning-text: #1a1a2e; /* text on warning-filled controls */
|
|
|
|
/* ── Online indicator LED ──────────────────────── */
|
|
--led-on: #43b581;
|
|
--led-off: #555;
|
|
--led-glow: rgba(67, 181, 129, 0.5);
|
|
|
|
/* ── Typography ────────────────────────────────── */
|
|
--font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'Consolas', 'Courier New', monospace;
|
|
--font-heading: 'Segoe UI', system-ui, sans-serif;
|
|
|
|
/* ── Layout ────────────────────────────────────── */
|
|
--radius: 8px; /* default border radius */
|
|
--radius-sm: 4px;
|
|
--sidebar-width: 16.875rem; /* 270px at the default interface scale */
|
|
--right-width: 16.25rem; /* 260px at the default interface scale */
|
|
--transition: 0.15s ease;
|
|
|
|
/* ── Theme-specific decorative vars ────────────── */
|
|
--msg-glow: none; /* glow on messages, e.g. 0 0 8px #7c5cfc */
|
|
--scanline: none; /* scanline effect overlay (CRT-style) */
|
|
}
|
|
|
|
/*
|
|
STABLE LAYOUT REGIONS
|
|
─────────────────────
|
|
Use data-haven-region selectors for major layout areas instead of internal
|
|
classes or IDs. Keep deep desktop-only layout changes above 900px so Haven's
|
|
tablet and mobile overlay behaviour remains intact.
|
|
|
|
@media (min-width: 901px) {
|
|
[data-haven-region="navigation-sidebar"] {
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
[data-haven-region="context-sidebar"] {
|
|
width: var(--right-width);
|
|
}
|
|
}
|
|
|
|
See docs/theme-authoring.md for every public region and token.
|
|
*/
|