Dashboard › Code › Session 1KUlhczKNRal
1KUlhczKNRalOcxFQI need to understand what CSS custom properties (variables) Beeper Desktop exposes for theming.
First, search the web for Beeper Desktop custom CSS documentation or examples. Try:
Also look for any existing Beeper themes that replicate Slack's look, which could give us CSS variable names.
Beeper Desktop is based on Element/Matrix - so also search for Element web CSS variables and theming, as Beeper likely inherits many of those:
Return a comprehensive list of CSS variables that Beeper Desktop supports, organized by category (colors, fonts, spacing, etc.). Include the variable names and their default values if available.
I'll research Beeper Desktop's CSS customization capabilities from multiple angles. Let me fetch several sources in parallel.
That repo doesn't exist anymore. Let me search more broadly for Beeper themes and Element CSS variables.
Repository search results · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fsearch%3Fq%3Dbeeper%2Bdesktop%2Btheme%2Bcss%26type%3Drepositories)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
...
nickcorona (nickcorona) / Repositories · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fnickcorona%3Ftab%3Drepositories)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
](https://github.com/features/actions)
- [
...
nickcorona (nickcorona) · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fnickcorona)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
](https://github.com/features/actions)
- [
CodespacesInstant dev ...
Found the official beeper/themes repo (162 stars). Let me fetch that along with the other key sources.
GitHub - beeper/themes: Custom CSS for Beeper Desktop by the community · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fbeeper%2Fthemes)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
](https://github.com/features/actions)
...
GitHub - JaxonWright/beeper-midnight: simple, pitch-black css theme for Beeper desktop client · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2FJaxonWright%2Fbeeper-midnight)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
...
GitHub - maiaramon/beeper-themes: Community-made custom CSS themes for Beeper Desktop 4.x. Give your messenger a fresh, unique look in seconds. · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fmaiaramon%2Fbeeper-themes)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
...
GitHub - highesttt/Beeper-WinUI-Theme: Beeper Desktop WinUI 3 Theme · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fhighesttt%2FBeeper-WinUI-Theme)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
...
Now let me get the actual CSS files - the official variables.css from beeper/themes is the gold standard, plus the Texts theme and a community theme for additional variables.
/* === ROOT VARIABLES (LIGHT MODE) === */
:root {
/* Font and Layout Variables */
--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", sans-serif;
--header-height: 48px;
--filters-pane-width: 220px;
--min-sidebar-width: 280px;
--max-sidebar-width: 800px;
--threads-list-item-height: 54px;
--pinned-thread-base-size: 64px;
--pinned-thread-group-img-size: calc(var(--pinned-thread-base-size) / 1.5);
--pinned-thread-height: calc(
var(--pinned-thread-base-size) + (var(--pinned-thread-base-size) / 1.4)
);
--pinned-thread-width: calc(
var(--pinned-thread-base-size) + (var(--pinned-thread-base-size) / 2.5)
);
/* Base Colors */
--color-bg: white;
--color-bg-rgb: 255, 255, 255;
--color-fg: black;
--color-fg-rgb: 0, 0, 0;
--color-primary: rgb(0, 122, 255);
--color-primary-rgb: 0, 122, 255;
--color-gray-rgb: 120, 125, 135;
/* Base Color Tokens ...
/* Beeper Texts Theme - Custom CSS
* Transposes the legacy Texts.app theme to work with Beeper
* Based on desktop-css/default/ SCSS files
*/
/* === ROOT VARIABLES (LIGHT MODE) === */
:root {
/* Font and Layout Variables */
--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", sans-serif;
--header-height: 48px;
--filters-pane-width: 220px;
--min-sidebar-width: 280px;
--max-sidebar-width: 800px;
--threads-list-item-height: 54px;
--pinned-thread-base-size: 64px;
--pinned-thread-group-img-size: calc(var(--pinned-thread-base-size) / 1.5);
--pinned-thread-height: calc(
var(--pinned-thread-base-size) + (var(--pinned-thread-base-size) / 1.4)
);
--pinned-thread-width: calc(
var(--pinned-thread-base-size) + (var(--pinned-thread-base-size) / 2.5)
);
/* Base Colors */
--color-bg: white;
--color-bg-rgb: 255, 255, 255;
--color-fg: black;
--color-fg-rgb: 0, 0, ...
/* ============================================================
BEEPER 4.x — Theme: Pure Black
A minimal, true black theme with white accents.
Apply: Settings → Appearance → Custom CSS
============================================================ */
:root {
--t-bg: #000000;
--t-surface: #0a0a0a;
--t-raised: #101010;
--t-hover: #1a1a1a;
--t-border: #2a2a2a;
--t-accent: #ffffff;
--t-accent2: #cccccc;
--t-my-bubble: #1c1c1c;
--t-text: #f6f6f6;
--t-muted: #888888;
--t-dim: #555555;
--t-radius: 10px;
--t-radius-sm: 8px;
--chatview__backgroundcolor: var(--t-bg);
--chatview__composer__borderradius: var(--t-radius);
--chatview__composer__backgroundcolor: var(--t-raised);
--chatview__message_tail__opacity: 0;
--chatview__message__backgroundcolor: var(--t-raised);
--chatview__message__fontcolor: var(--t-text);
...
/***
* Beeper Midnight - v1.3 - May 31, 2023
* a simple pitch-black theme for the Beeper desktop client
***/
/* Variables that make it easier to adjust various colors of Beeper */
:root {
--primary-color: #000;
--title-bar-bg: var(--primary-color); /* the background of the title bar with window actions on it */
--left-panel-bg: var(--primary-color); /* the background of the list of chats on the left */
--chat-header-bg: var(--primary-color); /* the background of the current chat's header */
--chat-panel-bg: var(--primary-color); /* the background of the current chat */
--dialog-bg: var(--primary-color); /* the background of dialogs */
--left-panel-v2-bg-no-transparency--windows: var(--primary-color); /* variable that controls bg of source list on the very left of new layout */
--left-panel-bg-no-transparency: var(--primary-color); /* variable that controls bg of source list on the very left of new layout */
}
/* Makes the input for custom CSS in Beeper ...
Now let me also fetch the directory listing for the current-v4 folder to see all available themes, and get the WinUI theme CSS for additional --chatview__ variables.
themes/current-v4 at main · beeper/themes · GitHub
[Skip to content](#start-of-content)
## Navigation Menu
Toggle navigation
[](/)
[Sign in](/login?return_to=https%3A%2F%2Fgithub.com%2Fbeeper%2Fthemes%2Ftree%2Fmain%2Fcurrent-v4)
Appearance settings
- Platform
- AI CODE CREATION
- [
GitHub CopilotWrite better code with AI
](https://github.com/features/copilot)
- [
GitHub Copilot appDirect agents from issue to merge
](https://github.com/features/ai/github-app)
- [
MCP RegistryNewIntegrate external tools
](https://github.com/mcp)
- DEVELOPER WORKFLOWS
- [
ActionsAutomate any workflow
](https://github.com/features/actions)
...
/*
# Custom Beeper app style
This file will be injected as a <style> tag
After making your changes, type "Reload custom CSS" in the command bar
To open dev tools, open the command bar and type "open console"
*/
/* Changed colors and emojis */
:root {
/* Change your colors here */
--color-primary: #4cc2ff !important;
--color-primary-hover: #49b3ea !important;
--color-border: #3f9aca !important;
--color-base-black: #1f2021 !important;
--color-item-background: #2b2b2b !important;
--color-item-background-hover: #323232 !important;
--color-item-background-border: #1a1e20 !important;
--color-date-separator-background: #3a3a3a !important;
--color-date-separator-border: #2e2e2e !important;
--color-base-gray-30: var(--color-base-black) !important;
--font-family:
"Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
--color-on-primary: #000 !important;
--color-highlight-reaction: #56add500 !important;
--version: "0.9";
}
/* ----
Emoji ...
I now have comprehensive data from multiple sources. Let me compile the definitive reference.
Source: Official beeper/themes repo (current-v4/variables.css) + community themes.
How to apply: Settings > Appearance > Custom CSS > "Open CSS file in editor" > paste CSS > "Reload CSS"
Important: Beeper Desktop v4 is not based on Element/Matrix. It's a custom app (formerly Texts.com). The old v3 themes (which used mx_* Element classes) are deprecated. V4 has its own variable system.
body)| Variable | Default | Description |
|---|---|---|
| --font-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif | Global font stack |
| --font-weight-regular | 400 | Normal weight |
| --font-weight-emphasized | 600 | Bold/semibold weight |
| --font-weight-fullscreen | 700 | Fullscreen header weight |
| --font-letter-spacing-headline | -0.046875rem | |
| --font-letter-spacing-title | 0rem | |
| --font-letter-spacing-body | 0.00625rem | |
| --font-letter-spacing-label | 0.015625rem | |
| --font-letter-spacing-special | 0.0125rem | |
| Variable | Default |
|---|---|
| --font-size-headline-display | 2.25rem |
| --font-size-headline | 1.75rem |
| --font-size-title-large | 1.125rem |
| --line-height-title-large | 1.625rem |
| --font-size-title-medium | 1.0625rem |
| --line-height-title-medium | 1.5rem |
| --font-size-title-small | 1rem |
| --line-height-title-small | 1.25rem |
| --font-size-body-large | 0.9375rem |
| --line-height-body-large | 1.25rem |
| --font-size-body-medium | 0.875rem |
| --line-height-body-medium | 1.125rem |
| --font-size-body-small | 0.8125rem |
| --line-height-body-small | 1rem |
| --font-size-label-large | 0.8125rem ...