mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-07 09:24:09 +00:00
Anso
1b96f3b980
* feat: add a compact icon-only top navigation toggle Add a browser-local "Top navigation labels" preference under Settings > Appearance. With it off, the desktop top navigation renders icon-only; each destination keeps an aria-label, gains a hover/focus tooltip, and stays reachable from the command palette. The setting defaults on, so current behavior is preserved, and the mobile navigation always keeps its labels. Also left-align the desktop nav (previously centered) and shorten the longest nav label from "Auto-Update" to "Update" so the bar scans faster. * feat: let the icon-only top nav be left or centered Add a "Top navigation alignment" preference under Settings > Appearance that appears only when top navigation labels are off. It places the icon-only bar against the left edge (the default) or centered. With labels on, the nav always stays left so the longer labels read from the edge. The choice is browser-local and persists per device.
55 lines
4.4 KiB
Plaintext
55 lines
4.4 KiB
Plaintext
---
|
||
title: Appearance
|
||
description: Personalize Sencho's look. Choose a theme and accent, fine-tune contrast, borders, and glow, swap the interface and data fonts, and set the text size. Every choice is saved to the current browser.
|
||
---
|
||
|
||
**Settings → Appearance** is where you make Sencho look the way you want. Pick a theme and accent color, fine-tune contrast and the ambient glow, choose the interface and data fonts, and scale the text. A live preview at the top of the section reflects every change as you make it.
|
||
|
||
Most of these controls are also one click away from anywhere in the app: the **palette button** in the top bar, between the search and notification icons, opens a quick switcher for the theme mode, accent, and fonts.
|
||
|
||
<Note>
|
||
Appearance choices are saved to **this browser only**. They follow you across tabs on the same browser, and every device remembers its own look. Nothing here changes what other operators see.
|
||
</Note>
|
||
|
||
## Theme
|
||
|
||
The **Mode** control sets the overall surface palette:
|
||
|
||
- **Dim** (default) is a raised charcoal. Cards and panels sit clearly above the page without going fully black.
|
||
- **OLED** is true black, ideal for power-saving panels. Borders stay visible so cards never merge into the background.
|
||
- **Light** is the bright theme, with the same directional, opaque borders inverted for a white surface.
|
||
- **Auto** follows your operating system, switching between Dim and Light as your OS does, and re-resolving live when the OS flips.
|
||
|
||
## Accent
|
||
|
||
The **accent** is Sencho's one data color. It drives charts, sparklines, progress bars, focus rings, active states, the masthead and sidebar rails, and the ambient page glow, so changing it recolors the whole product cohesively.
|
||
|
||
Eight well-spaced hues are available: **Cyan** (the default and the signature), **Blue**, **Violet**, **Magenta**, **Orange**, **Amber**, **Lime**, and **Steel** (a deliberate near-neutral). Status colors (green for healthy, amber for warning, rose for error) stay constant regardless of accent so state always reads the same.
|
||
|
||
## Fine-tune
|
||
|
||
Three sliders shape the surfaces and atmosphere. A **Reset fine-tune** button returns all three to their defaults.
|
||
|
||
- **Contrast** is a master control that spreads the page tone, every border, and the text tiers together in one move. Higher contrast darkens the page, brightens borders, and crisps up secondary text. Pairing high contrast with the OLED theme gives the sharpest reading on a true-black panel.
|
||
- **Border brightness** lifts or softens every hairline on its own, so the separation between cards reads exactly how you like it.
|
||
- **Ambient glow** sets the intensity of the soft, accent-tinted glow behind the page. Slide it to zero for a completely flat background.
|
||
|
||
## Typography
|
||
|
||
Sencho uses three type contexts. The display face for hero headings stays fixed as the signature; the other two are yours to change.
|
||
|
||
- **Interface font** sets the sans face used for body text, labels, navigation, and buttons. Choose **Geist** (default), **IBM Plex Sans**, or **Hanken Grotesk**.
|
||
- **Data font** sets the monospace face used for the terminal, stat values, codes, and timestamps. Choose **Geist Mono** (default), **IBM Plex Mono**, or **Fira Code**.
|
||
- **Text size** scales the entire interface from a single root multiplier. In Settings this is a continuous slider (default `1.00×`); the top-bar quick switcher offers **S / M / L / XL** presets. Both stay in sync.
|
||
|
||
Hero headings and featured names always render in Instrument Serif so the editorial voice stays consistent no matter which interface font you pick.
|
||
|
||
## Display
|
||
|
||
The **Display** group holds the remaining per-browser preferences:
|
||
|
||
- **Density** switches between **Comfortable** (roomy rows, the default) and **Compact** (tighter rows and tiles that fit more on screen for dense dashboards).
|
||
- **Top navigation labels** shows text labels beside the top navigation icons. Turn it off for an icon-only bar; the destinations stay reachable by hover tooltip, accessible name, and the command palette. On the phone layout the navigation always keeps its labels. With labels off, **Top navigation alignment** chooses whether the icon-only bar sits to the left or centered.
|
||
- **Deploy progress** toggles live output streaming for deploy, restart, update, install, and Git operations, and **Progress style** chooses Modal or Inline presentation.
|
||
- **Diff preview before save** toggles a side-by-side diff of compose and env edits before they are written to disk.
|