Skip to content

Instantly share code, notes, and snippets.

@0xdevalias

0xdevalias/beeper-custom-theme-styles.md

Last active April 25, 2025 05:10
Show Gist options
  • Save 0xdevalias/3d2f5a861335cc1277b21a29d1285cfe to your computer and use it in GitHub Desktop.
Save 0xdevalias/3d2f5a861335cc1277b21a29d1285cfe to your computer and use it in GitHub Desktop.
Download ZIP
Custom themes/CSS styling hacks/overrides for Beeper (universal chat app aggregator, built on top of matrix)
Raw
beeper-custom-theme-styles.md

Beeper Custom Theme Styles

Table of Contents

devalias' Beeper CSS Hacks

For the modern Beeper Desktop v4, see devalias-beeper-css-hacks-v4.css for the customisations I am using myself.

For the legacy Beeper Desktop v3, see devalias-beeper-css-hacks.css for the customisations I was using myself.

You'll also find a number of hacks/techniques on my theme issue:

See Also

My Other Related Deepdive Gist's and Projects

Bonus Section

Beeper DevTools Hacks

Open devtools with Command + Shift + I (on windows) / Command + Option + I (on macOS), then run the following (if Command + Shift + I doesn't work, then you may need to disable/rebind the Beeper -> Settings -> Keyboard Shortcuts -> 'Toggle Chat Info' shortcut first):

  • Set your beeper update channel from STABLE to INTERNAL to enable various hidden features/settings:
    • rs.beeperClientStore.loggedInUser.channel = "INTERNAL"

Beeper Desktop v4 Hacks

  • While there doesn't seem to be a menu item for the Electron / Chrome DevTools, we can access it with Command + Shift + I (on windows) / Command + Option + I (on macOS). If Command + Shift + I doesn't work, then you may need to disable/rebind the Beeper -> Settings -> Keyboard Shortcuts -> 'Toggle Chat Info' shortcut first.
    • Non-standard globals: 
      • [
  "desktopAPI",
  "PAGE_BOOT_TIME",
  "handleFatalError",
  "_sentryDebugIds",
  "_sentryDebugIdIdentifier",
  "SENTRY_RELEASE",
  "INITIAL_STATE",
  "MACHINE_ID",
  "LOG_LEVEL",
  "__SENTRY__",
  "Sentry",
  "logger",
  "setImmediate",
  "texts",
  "__mobxInstanceCount",
  "__mobxGlobals",
  "rt",
  "totalTimes",
  "Mousetrap",
  "handleDeepLink",
  "google",
  "__googleMapsCallback__",
  "gm_authFailure",
  "rs",
  "litHtmlVersions",
  "litElementVersions",
  "reactiveElementVersions",
  "module$contents$mapsapi$overlay$overlayView_OverlayView",
  "RudderStackGlobals",
  "rudderanalytics",
  "sentryUser",
  "__federation_shared__",
  "__isReactDndBackendSetUp"
]
      • INITIAL_STATE.userConfPath: /Users/REDACTED/Library/Application Support/BeeperTexts/config.json
        • This file doesn't seem to exist by default.
  • The electron app source no longer seems to be packed within a *.asar file, making it easier to explore/customize:
    • /Applications/Beeper Desktop.app/Contents/Resources/app/
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-dev.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-staging.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-production.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-dev.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-staging.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-production.json
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build/main/constants-DaB6VrEL.mjs 
        • const r = process.platform === 'win32',
  _ = process.platform === 'linux',
  t = process.platform === 'darwin',
  E = 'config.json',
  // ..snip..
  f = '.texts-conf.json';
  // ..snip..
  function i() {
    const e = process.env.BEEPER_PROFILE || void 0,
      o = 'BeeperTexts' + (e ? `-${e}` : '');
    return t
      ? s.join(n.homedir(), 'Library', 'Application Support', o)
      : r
        ? process.env.APPDATA
          ? s.join(process.env.APPDATA, o)
          : s.join(n.homedir(), o)
        : s.join(
            process.env.XDG_CONFIG_HOME ?? s.join(n.homedir(), '.config'),
            o
          );
  }
  function A() {
    const e = i();
    return r && !process.env.APPDATA ? s.join(i(), '..', f) : s.join(e, E);
  }
  const U = globalThis.INITIAL_STATE?.userConfPath ?? A(),
          • /Users/REDACTED/Library/Application Support/BeeperTexts/custom.css
            • CSS Customization is still possible
          • /Users/REDACTED/Library/Application Support/BeeperTexts/account.db
            • The store table looks interesting
              • Keys generally seem to map to JSON object values
                • ad:com.beeper.desktop.prefs
                  • Has entries in the JSON object including:
                    • "ai_language": "en"
                    • "ai_engine": "gpt-3.5-turbo"
                    • "ui_experiments:decrease_sidebar_density": true
      • /Applications/Beeper Desktop.app/Contents/Resources/app/build/renderer/PrefsPanes-DLpM0stC.js 
        • D.show_hidden_features &&
  e.jsxs(e.Fragment, {
    children: [
      e.jsx('h4', { children: 'UI Experiments' }),
      e.jsxs('div', {
        className: 'prefs-group',
        children: [
          e.jsx(g, {
            id: `ui_experiments:${re.DECREASE_SIDEBAR_DENSITY}`,
            displayName: 'Decrease sidebar density',
          }),
          e.jsx(g, {
            id: `ui_experiments:${re.DISTINCT_BUBBLE_COLORS_IN_GROUPS}`,
            displayName:
              'Distinct bubble color for each participant in groups',
          }),
          e.jsx(g, {
            id: `ui_experiments:${re.VIBRANT_RIGHT_PANE}`,
            displayName: 'Vibrant right pane',
          }),
        ],
      }),
    ],
  }),
        • return e.jsxs('div', {
  className: 'subview-prefs subview-prefs-general styled-inputs',
  children: [
    e.jsxs('div', {
      className: 'prefs-group',
      children: [
        e.jsx(g, {
          id: p.GPT3_SLASH_COMMAND,
          displayName: 'Show reply suggestions with /a slash command',
          featureFlag: r.features[j.AI_COMPOSER_AUTOCOMPLETE],
          footer: e.jsxs('span', {
            className: 'description-text',
            children: [
              'Privacy: this will send your last ',
              e.jsx('code', { children: 'n' }),
              ' messages in a conversation to OpenAI via our servers.',
            ],
          }),
        }),
        e.jsx(g, {
          id: p.TRANSCRIBE_WITH_OPENAI,
          displayName:
            "Use OpenAI's Whisper model for Talk to Type and transcribing voice messages",
          featureFlag: r.features[j.TALK_TO_TYPE],
          footer: e.jsx('span', {
            className: 'description-text',
            children:
              'Privacy: this will send audio clips to OpenAI via our servers.',
          }),
        }),
        e.jsx(w, {
          id: p.AI_ENGINE,
          displayName: 'Engine for text-based AI features',
          featureFlag: r.features[j.AI_LLM],
          options: An,
        }),
        e.jsx(w, {
          id: p.AI_LANGUAGE,
          displayName: 'Language for AI responses and translations',
          featureFlag: r.features[j.AI_LLM],
          options: ws,
          footer: e.jsx('span', {
            className: 'description-text',
            children:
              "ChatGPT's response quality may vary for less commonly spoken languages.",
          }),
        }),
      ],
    }),
        • /Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/index-DJ-7DtqJ.js 
          • return D.remoteStore.llmEnabled && D.prefsStore.prefs[Re.GPT3_SLASH_COMMAND]
  ? { ...f, ...i }
  : f;
      • There seem to be a bunch of references to __vite__mapDeps in the *.js files
        • From ChatGPT 4o:

          • __vite__mapDeps is an internal construct used by Vite for module resolution and dependency mapping in bundled web applications. It appears in Vite-processed JavaScript when using dynamic imports (e.g., import()), and it helps Vite efficiently manage dependencies in optimized builds.

            Purpose of __vite__mapDeps

            • Dependency Mapping: It is used to keep track of dependencies that are dynamically imported.
            • Code Splitting & Optimization: When Vite builds your project, it processes imports to optimize module resolution. __vite__mapDeps is part of the mechanism that rewrites dynamic imports to ensure correct execution at runtime.
            • Preload Handling: It might be used to preload certain dependencies to improve loading performance.

Beeper Update Check URL

Accessing the Matrix client from within Beeper / Electron's DevTools

mxMatrixClientPeg.matrixClient

eg. to send a message:

const roomId = "!KlacjKWnARbprTLuRM:nova.chat";

mxMatrixClientPeg.matrixClient.sendMessage(roomId, {
  msgtype: "m.text",
  body: "This is a test message sent using mxMatrixClientPeg.matrixClient.sendMessage"
})

Enabling 'internal' mode to see extra labs features/etc

(The following tip comes via @cameronaaron from the Beeper Community)

Open DevTools console, and enter the following:

bpWhoamiMonitor.whoami.userInfo.channel = "INTERNAL"

Then go to your Beeper Settings -> Labs -> and look at all the new features you can flip (note that you can also probably flip all of these directly via /devtools -> Settings Explorer as well)

Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools

See also:

const el = $('#matrixchat > .mx_MatrixChat_wrapper > .mx_MatrixChat > .bp_LeftPanel > .bp_LeftPanel_contentWrapper > .bp_LeftPanel_content > .rooms')
 
const elProps = Object.getOwnPropertyNames(el);
 
const elReactFiberKey = elProps.filter(k => k.includes('__reactFiber'))
const elReactPropsKey = elProps.filter(k => k.includes('__reactProps'))

const elReactInternals = {
  reactFiber: el[elReactFiberKey],
  reactProps: el[elReactPropsKey],
}
 
//console.log(elReactInternals)

const UnreadList = elReactInternals.reactProps.children[3].props.children[0]
const ReadList = elReactInternals.reactProps.children[3].props.children[1]

console.log('Inbox Chats', UnreadList.props.unreads)
// (303) [Room, Room, ...]

console.log('Archived Chats', ReadList.props.rooms)
// (1633) [Room, Room, ...]

Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)

Warning: This section is way more advanced than CSS hacks, and comes with much higher risks if you run arbitrary untrusted code, as using malicious JS code might steal your beeper auth tokens, any of your private messages, etc, etc. You've been warned.

These notes originally come from my Debugging Electron Apps (and related memory issues) (0xdevalias gist) gist (Ref):

On macOS you can get to the Beeper *.asar files by:

⇒ cd /Applications/Beeper.app/Contents/Resources

⇒ ls
af.lproj/           cs.lproj/      fa.lproj/   icon.icns  ml.lproj/     ru.lproj/  todesktop-runtime-config.json
am.lproj/           da.lproj/      fi.lproj/   icons/     mr.lproj/     sk.lproj/  tr.lproj/
app-update.yml      de.lproj/      fil.lproj/  id.lproj/  ms.lproj/     sl.lproj/  uk.lproj/
app.asar            el.lproj/      fr.lproj/   it.lproj/  nb.lproj/     sr.lproj/  ur.lproj/
app.asar.unpacked/  en.lproj/      gu.lproj/   ja.lproj/  nl.lproj/     sv.lproj/  vi.lproj/
ar.lproj/           en_GB.lproj/   he.lproj/   kn.lproj/  pl.lproj/     sw.lproj/  webapp.asar
bg.lproj/           es.lproj/      hi.lproj/   ko.lproj/  pt_BR.lproj/  ta.lproj/  zh_CN.lproj/
bn.lproj/           es_419.lproj/  hr.lproj/   lt.lproj/  pt_PT.lproj/  te.lproj/  zh_TW.lproj/
ca.lproj/           et.lproj/      hu.lproj/   lv.lproj/  ro.lproj/     th.lproj/

Where the most relevant files/folders there are:

  • app.asar
  • app.asar.unpacked/
  • webapp.asar

From memory, I believe app.asar is more related to the core electron/element type features, and webapp.asar was more related to the more custom Beeper features; but I didn't look super deeply into that side of things.

We can then use the node asar package via npx to inspect the contents of the *.asar files:

⇒ npx asar list --is-pack app.asar | grep -v node_modules

⇒ npx asar list --is-pack webapp.asar | grep -v node_modules

We can then run Beeper passing the node remote debugging --inspect-brk command to set a breakpoint at the entrypoint of the code:

⇒ open /Applications/Beeper.app --args --inspect-brk=1337

Which we can then connect to by opening a Chrome browser, navigating to chrome://inspect/#devices, and under 'Remote Target' looking for something like the following:

image

electron/js2c/browser_init file:///

Then clicking on 'inspect', which will open the Chrome DevTools 'Sources' tab and show the entrypoint line where the debugger has stopped execution, in this case, in the file:///Applications/Beeper.app/Contents/Resources/app.asar/lib/electron-main.js file:

image

We can then skim around the code in this file to understand what it does, and what other options are available.

For example, here are some command line arguments documentation; of which --devtools sounds interesting:

if (argv["help"]) {
    console.log("Options:");
    console.log("  --profile-dir {path}: Path to where to store the profile.");
    console.log("  --profile {name}:     Name of alternate profile to use, allows for running multiple accounts.");
    console.log("  --devtools:           Install and use react-devtools and react-perf.");
    console.log("  --no-update:          Disable automatic updating.");
    console.log("  --default-frame:      Use OS-default window decorations.");
    console.log("  --hidden:             Start the application hidden in the system tray.");
    console.log("  --help:               Displays this help message.");
    console.log("And more such as --proxy, see:" +
        "https://electronjs.org/docs/api/command-line-switches");
    electron_1.app.exit();
}

We can also see some path loading aspects of where the app looks for webapp.asar:

// Find the webapp resources and set up things that require them
async function setupGlobals() {
    // find the webapp asar.
    asarPath = await tryPaths("webapp", __dirname, [
        // If run from the source checkout, this will be in the directory above
        '../webapp.asar',
        // but if run from a packaged application, electron-main.js will be in
        // a different asar file so it will be two levels above
        '../../webapp.asar',
        // also try without the 'asar' suffix to allow symlinking in a directory
        '../webapp',
        // from a packaged application
        '../../webapp',
        // Workaround for developing beeper on windows, where symlinks are poorly supported.
        "../../nova-web/webapp",
    ]);
    console.log("Web App Path is", asarPath);
    iconsPath = await tryPaths("icons", __dirname, [
        '../res/icons',
        '../../icons'
    ]);
    console.log("iconsPath path is", iconsPath);
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    vectorConfig = require(asarPath + 'config.json');
    console.log("Loading vector config for brand", vectorConfig.brand);
    try {
        // Load local config and use it to override values from the one baked with the build
        // eslint-disable-next-line @typescript-eslint/no-var-requires
        const localConfig = require(path_1.default.join(electron_1.app.getPath('userData'), 'config.json'));

There are also some hidden/undocumented CLI arguments, localdev / localapi:

const localdev = Array.isArray(argv._) && argv._.includes("localdev");
const localapi = Array.isArray(argv._) && argv._.includes("localapi");

We find the code that processes the --devtools arg here:

if (argv['devtools']) {
        try {
            const { default: installExt, REACT_DEVELOPER_TOOLS, REACT_PERF, } = require("electron-devtools-installer");
            await installExt([REACT_DEVELOPER_TOOLS, REACT_PERF], { loadExtensionOptions: { allowFileAccess: true } });
        }
        catch (e) {
            console.log(e);
        }
    }

A little further down we see how localdev / localapi are handled:

if (localdev) {
        // Open dev tools at startup if in dev mode
        mainWindow.webContents.openDevTools();
        electron_1.app.on("certificate-error", (event, webContents, url, error, certificate, callback) => {
            // On certificate error we disable default behaviour (stop loading the page)
            // and we then say "it is all fine - true" to the callback
            event.preventDefault();
            callback(true);
        });
    }
    if (localapi) {
        vectorConfig.novaApiUrl = `https://localhost:4001`;
    }
    mainWindow.loadURL(localdev ? "http://localhost:8080" : 'nova://nova-web/webapp/');

Then beyond that, you're sort of getting deeper into the internals of Electron apps and how Beeper / Element is built on top of Electron; so really depends what you're wanting to achieve at that point.

While at the initial 'entrypoint' debugger breakpoint (from --inspect-brk), we could also choose to manually load/inject some custom code of our own. For example:

With a code file like:

// /Users/devalias/Desktop/beeperInjectionHax.js
console.log("Hello World, is this custom JS in Beeper?");

We could run the following in the Chrome Devtools console while at the initial app loading debug breakpoint:

require('/Users/devalias/Desktop/beeperInjectionHax.js')

Which would show an output message such as:

beeperInjectionHax.js:1 Hello World, is this custom JS in Beeper?

image

Implement plugin manager implementation (like BetterDiscord / GooseMod / etc have)

ponders 🤔

Anyone feel like figuring out/hacking out the plugin implementation from BetterDiscord and making it work as a Beeper customisation?

Another user from the 'Unofficial Beeper Hackers' community suggested the following as a better example for injection/etc concepts:

@emma:conduit.rory.gay: GooseMod may be more interesting to look at (though dead), came with an in-app plugin/theme store

do note that most of the UI leans on pre-existing react modules (that no longer exist)

@emma:conduit.rory.gay: betterdiscord's injectors is litterally just const BetterDiscord = require("./modules/betterdiscord").default;

oh, also intercepting all web requests to unset content-security-policy header

devalias: The other method I was pondering at one point was basically hijacking just enough to load a chrome browser extension, then implement the rest of it via those API's; but didn't explore too deeply into how limited they are within electron

Some of my notes in gists might be useful too:

Most likely these:

Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)

// Inbox - Favourites List
$$('.rooms > .favourites [data-type="bp_RoomTile"]')

// Inbox - Favourites List - Unread
$$('.rooms > .favourites .isUnread[data-type="bp_RoomTile"]')

// Inbox - Favourites List - Muted
$$('.rooms > .favourites .isMuted[data-type="bp_RoomTile"]')

// Inbox Chats
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]')

// Inbox Chats - Favourite
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:has([data-src="img/beeper/heart-filled16.b7ad82d.svg"])')

// Inbox Chats - Pinned
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:has([data-src="img/beeper/pin-filled16.b7cb2af.svg"])')

// Inbox Chats - Not Pinned
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:not(:has([data-src="img/beeper/pin-filled16.b7cb2af.svg"]))')

// Inbox - Unread - Favourite-Avatar
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .favourite-avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon')

// Inbox - Unread - Avatar
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon')

// Inbox - Unread - Combined
$$('.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .favourite-avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon, .rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon')

Counting chats that match the above

This is a bit of a hacky WIP / PoC, but it seems to do the trick:

/*************************/
/* Counting Chat Types */
/************************/

/* Initialize counters */
.rooms {
  counter-reset: unread favourite pinned not-pinned;
}

/* Increment favorites */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/heart-filled16.b7ad82d.svg"] {
  counter-increment: favourite;
}

/* Increment pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/pin-filled16.b7cb2af.svg"] {
  counter-increment: pinned;
}

/* Increment not pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:not(:has([data-src="img/beeper/pin-filled16.b7cb2af.svg"])) {
  counter-increment: not-pinned;
}

/* Increment unread */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .favourite-avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon,
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon {
  counter-increment: unread;
}

/* Show Counters */
/*.rooms::after {
  content: "Counters: Unread (" counter(unread) "), Favourite (" counter(favourite) "), Pinned (" counter(pinned) "), Not-Pinned (" counter(not-pinned) ")"
}*/
.rooms::after {
  content: "Unread (" counter(unread) "), Not-Pinned (" counter(not-pinned) ")";

  font-size: 10px;

  position: absolute;
  top: calc(31vh - 2px);
  left: calc(8vw - 4px);

  background-color: dimgrey;
}

/* Set position to relative for the hovered element */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] {
  position: relative;
}

/* Show the not-pinned counter on hover */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:hover::before {
  content: "Not-Pinned above: " counter(not-pinned);

  font-size: 10px;
  white-space: nowrap;

  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  border-radius: 3px;
  padding: 2px;

  background-color: dimgrey;
}
Raw
beeper-jwt-password-reset.md

Beeper - Password Reset (JWT)

See the following repo for my notes (formatted as a ChatGPT prompt) on implementing a JWT-based password reset flow using Beeper's new 'email login' flow; as well as Proof of Concept (PoC) code implementing a CLI tool for using this flow.

Raw
devalias-beeper-css-hacks-v4.css
/*
# 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"
*/
:root {
/*
--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
*/
}
@media (prefers-color-scheme: dark) {
:root {}
}
/*
Random CSS Hacks Notes
'Pinned / Favourites' Avatars
$$('#root .left .threads-list-container .threads .virtual-list .participant-wrapper .participant-avatar .participant-img')
Command Bar
Command + J
$$('.command-bar-modal .command-bar')
Command + K / Command + F
$$('.command-bar-modal .command-bar.command-bar-general-search')
.command-bar.command-bar-general-search {
width: 80%; // Override the width?
}
.command-bar, .forward-message-preview {
width: 60vw; // Override the width?
max-width: 700px; // Override the max-width?
}
*/
/**********************************************/
/* Inbox - Favourites - Support Unread Filter */
/**********************************************/
.left .threads-list-container .threads:has(.AccountFilters button[data-text="Unread"][class*="AccountFilters-module__selected"]) .pinned-threads .sidebar-thread:not(.isUnread) {
display: none;
}
/**********************/
/* Inbox - Favourites */
/**********************/
.left .threads-list-container .threads .virtual-list > div > div:first-child {
/* Ensure the favourites section is limited in height and scrollable */
overflow-y: auto;
max-height: 30vh;
/* There also seems to be a tiny bit of spacing that makes it scroll on the X axis.. so just hide that.. */
overflow-x: hidden;
.pinned-threads .sidebar-thread {
/* Override to the equivalent of the cols-5 class */
width: 20%;
&.isPinned > section[data-sentry-component="PinnedThreadListItem"] {
/* Set the avatar size */
--avatar-size: 30px;
/* Override a hardcoded size in GroupAvatar to use the --avatar-size properly */
.participant-avatar > div[data-sentry-component="GroupAvatar"] {
width: var(--avatar-size) !important;
height: var(--avatar-size) !important;
}
}
}
}
Raw
devalias-beeper-css-hacks.css
/* Note: These styles are for the legacy Beeper Desktop v3; check the other file on this gist for the modern Beeper Desktop v4 styles I am using. */
/* Will this work with https://developer.mozilla.org/en-US/docs/Web/CSS/@import ? I don't think so.. but maybe I was using it wrong..? */
/***************************************************************/
/* De-emphasise distracting chats - *Beeper* Community/Hackers */
/***************************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]):has(div[title*="Community"i], div[title*="Hackers"i]) {
opacity: 0.5;
}
/*******************************************************/
/* De-emphasise distracting chats - UC Outdoors Club */
/*******************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_facebook, svg[data-src="img/beeper/color-facebook16.a8cac84.svg"]):has(div[title*="UC Outdoors Club"]) {
opacity: 0.5;
}
/**********************************************/
/* Hide Left Panel/Sidebar While Chat Is Open */
/**********************************************/
/*.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > .bp_LeftPanel {
display: none;
}
.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > div:has(.spaceBar) {
display: none;
}*/
/*************************/
/* Counting Chat Types */
/************************/
/* Initialize counters */
.rooms {
counter-reset: unread favourite pinned not-pinned;
}
/* Increment favorites */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/heart-filled16.b7ad82d.svg"] {
counter-increment: favourite;
}
/* Increment pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/pin-filled16.b7cb2af.svg"] {
counter-increment: pinned;
}
/* Increment not pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:not(:has([data-src="img/beeper/pin-filled16.b7cb2af.svg"])) {
counter-increment: not-pinned;
}
/* Increment unread */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .favourite-avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon,
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon {
counter-increment: unread;
}
/* Show Counters */
/*.rooms::after {
content: "Counters: Unread (" counter(unread) "), Favourite (" counter(favourite) "), Pinned (" counter(pinned) "), Not-Pinned (" counter(not-pinned) ")"
}*/
.rooms::after {
content: "Unread (" counter(unread) "), Not-Pinned (" counter(not-pinned) ")";
font-size: 10px;
position: absolute;
top: calc(31vh - 2px);
left: calc(8vw - 4px);
background-color: dimgrey;
}
/* Set position to relative for the hovered element */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] {
position: relative;
}
/* Show the not-pinned counter on hover */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:hover::before {
content: "Not-Pinned above: " counter(not-pinned);
font-size: 10px;
white-space: nowrap;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
border-radius: 3px;
padding: 2px;
background-color: dimgrey;
}
/******************************************************************/
/* Ensure 'report bug' dialog doesn't take over the entire screen */
/******************************************************************/
#mx_Dialog_Container div[aria-describedby="report_bug"] {
/* Don't take up the entire screen */
width: fit-content;
height: fit-content;
padding: 20px;
border-radius: 20px;
/* Center the dialog */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/**********************/
/* Main Settings Menu */
/**********************/
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Mark All As Read"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Check for Update"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Download Mobile App"] {
display: none;
}
/*******************/
/* Settings Dialog */
/*******************/
/* Settings Dialog - Tab - Chat Networks */
.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_chatSettingsIcon) > .mx_TabbedView_tabLabel_text::after {
content: "🔗";
margin-left: 16px;
}
/* Settings Dialog - Tab - Manage Subscription */
.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_manageSubscriptionIcon) > .mx_TabbedView_tabLabel_text::after {
content: "🔗";
margin-left: 16px;
}
/* Settings Dialog - Appearance - Custom CSS TextArea */
.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
width: 100% !important;
height: 500px !important;
}
.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea textarea {
font-family: Menlo, monospace;
font-size: 13px !important;
}
/**********************/
/* Inbox - Favourites */
/**********************/
/* Inbox - Favourites */
.bp_LeftPanel .rooms > .favourites {
/* Custom Variables */
--devalias-fav-section-max-height: 30vh;
--devalias-fav-grid-row-gap: 6px;
--devalias-fav-grid-col-gap: 6px;
--devalias-fav-width: 100%;
--devalias-fav-height: fit-content;
--devalias-fav-max-width: 64px;
--devalias-fav-avatar-width: 30px;
--devalias-fav-avatar-height: 30px;
--devalias-fav-avatar-font-size: 17px;
}
.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles {
max-height: var(--devalias-fav-section-max-height, none) !important;
overflow: auto;
padding-left: unset;
padding: 0;
/* Favourites Grid Spacing */
grid-row-gap: unset;
grid-gap: unset;
gap: unset;
row-gap: var(--devalias-fav-grid-row-gap, 12px);
}
.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row {
height: fit-content;
/* Favourites Grid Spacing */
grid-gap: unset;
gap: unset;
column-gap: var(--devalias-fav-grid-col-gap, 12px);
}
.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > div {
height: var(--devalias-fav-height, 60px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
width: var(--devalias-fav-width, 100%) !important;
height: var(--devalias-fav-height, 48px) !important;
max-width: var(--devalias-fav-max-width, 100%) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
width: var(--devalias-fav-avatar-width, 44px) !important;
height: var(--devalias-fav-avatar-height, 44px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
width: var(--devalias-fav-avatar-width, 44px) !important;
line-height: var(--devalias-fav-avatar-width, 44px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline {
max-width: var(--devalias-fav-max-width, 110px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline > span {
max-width: var(--devalias-fav-max-width, 110px) !important;
}
/************************/
/* Beeper Space Sidebar */
/************************/
/* Beeper Space Sidebar - Collapsed - Hide Floating 'Open Archive' Button */
.mx_MatrixChat > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/archive16.2003809.svg"]) {
display: none;
}
/* Beeper Space Sidebar - Show Floating 'Archive All Read Messages' Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
width: max-content !important;
/*position: absolute;
top: calc(38vh);
left: 15vw;*/
}
.mx_MatrixChat > div > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
display: block !important;
}
.mx_MatrixChat > div > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
opacity: unset;
}
/* Beeper Space Sidebar - Hide Original Icons */
#beeperSpaceBar svg:not(svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]):not(svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]):not(svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]):not(svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]):not(svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) {
display: none
}
/* Beeper Space Sidebar - Use Lineart Icons */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg) > div > div > div {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Beeper Space Sidebar - Use Lineart Icons - Facebook */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Instagram */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - iMessage */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Twitter */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Telegram */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-telegram16.d011ded.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Signal */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - LinkedIn */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Discord */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-discord16.e91cca3.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Beeper */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - WhatsApp */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg");
}
/*****************/
/* Uncategorized */
/*****************/
/* Ensure full image preview is visible, rather than a zoomed part of it */
.mx_EventTile_image .mx_MImageBody img.mx_MImageBody_thumbnail {
object-fit: contain !important;
}
@0xdevalias
Copy link
Author

I understood half and managed to implement another half of that, and attained that translucid (i.e. sort of transparent, but blurred) look — which I find still benefits the app a lot.

Thanks again @0xdevalias!

@jorgeparamos Awesome, glad you could get some of it figured :) If you're open to sharing the CSS hacks you ended up with here they might be useful for someone else in future too 🖤

@evkaw
Copy link

evkaw commented Oct 10, 2023

Someone please help me get rid of the "invite to beeper" button in chats, I don't know how to use CSS nor how to get into the Inspect tool.. Thanks

@0xdevalias
Copy link
Author

Someone please help me get rid of the "invite to beeper" button in chats, I don't know how to use CSS nor how to get into the Inspect tool.. Thanks

@evkaw On Beeper Desktop, go to the menu bar -> View -> Toggle Developer Tools; then from the devtools you can select the 'Elements' tab, and then in the top left you should find the 'inspect element' tool (Shortcut seems to be apple+shift+c, or whatever the windows equivalent of that is)

Something like this would probably do it:

.bp_MainPanel > .mx_RoomView > .mx_RoomHeader .mx_RoomHeader_rightActions .mx_RoomHeader_rightActions_static > :nth-child(1 of .mx_HeaderButtons) {
  display: none;
}

@FaviFake
Copy link

FaviFake commented Nov 6, 2023

Hey,

I don't know why, but Beeper seems to be the only messaging app that uses a much smaller font for the chat list compared to all other UI elements. Also, the message previews occupy two rows instead of just one. I'd love if you could make the text used in the chat list as big as the one used in the message bubbles, and, if possible, also remove the second row in the preview. I have no idea how CSS works, so idk if what I'm asking is very hard or incredibly simple. I've made a badly-photoshopped concept to show how it could look:

Before

image

After

1699185663659

@jackmawer
Copy link

@jorgeparamos Just tried out a basic test of my thoughts/theory with using the CSS counters to change background colours, and it seems like it wouldn't work:

Whoa! Thanks a lot for all the hints and effort put into it: I understood half and managed to implement another half of that, and attained that translucid (i.e. sort of transparent, but blurred) look — which I find still benefits the app a lot.

Thanks again @0xdevalias!

Would love to know how you ended up achieving this!

@aronaoi
Copy link

aronaoi commented Dec 27, 2023

Is there any way to make Beeper Cloud act like a mobile app? I want to be able to shrink the window size to like 350 pixels, and it will display the chat list when i am not on an open chat, and clicking on a chat will bring me to the chat, and i can go back to the chat menu with a back button (basically, act the same way as Beeper Cloud mobile)

@0xdevalias
Copy link
Author

I want to be able to shrink the window size to like 350 pixels, and it will display the chat list when i am not on an open chat, and clicking on a chat will bring me to the chat, and i can go back to the chat menu with a back button (basically, act the same way as Beeper Cloud mobile)

@aronaoi Does this get you close to what you want?

@aronaoi
Copy link

aronaoi commented Dec 28, 2023

I want to be able to shrink the window size to like 350 pixels, and it will display the chat list when i am not on an open chat, and clicking on a chat will bring me to the chat, and i can go back to the chat menu with a back button (basically, act the same way as Beeper Cloud mobile)

@aronaoi Does this get you close to what you want?

Sorta. My issue is that I cannot resize the window size narrower. I want it to only display the Chat List when no chat is selected, and when clicking on a chat it will bring me to the chat messages like how Beeper Cloud on iPhone / Android works. Let’s say the window size minimum pixel is locked at 600 px but i want to be able to go even smaller like 300 px.

With the addition of a back button (like the mobile ver) if possible <3

@0xdevalias
Copy link
Author

My issue is that I cannot resize the window size narrower.

@aronaoi Did you also see the comment after that about changing the min-width on the left side panel? While it won't solve your issue completely, it might help a little?

I want it to only display the Chat List when no chat is selected, and when clicking on a chat it will bring me to the chat messages like how Beeper Cloud on iPhone / Android works.

@aronaoi The link I shared earlier (Ref) will hide the 'chat list' when a chat is selected, but it won't hide the 'main chat area' when none is selected; so some more work would need to be done on it if that was your desired outcome (though not even sure if it's possible, see below)

Let’s say the window size minimum pixel is locked at 600 px but i want to be able to go even smaller like 300 px.

@aronaoi From a quick ChatGPT/Google, it sounds like for an Electron app (which Beeper is), the minimum width of the window is set in the BrowserWindowConstructorOptions that are passed to the BrowserWindow when it is set up:

Unfortunately this lives on the 'Electron' side of things, and isn't something we are able to manipulate through CSS on the 'app' side of things. To do that, you would need to modify the relevant *.asar files, or perhaps inject some custom JS into Beeper at startup to be able to modify this; both of which are more involved than the typical CSS only changes here.

If you wanted to look deeper into doing this, you might find some useful notes/snippets on some of my gists, eg.:

By starting Beeper in Electron debug mode, and connecting to it from chrome://inspect, we can see the main BrowserWindow config Beeper is using; and how it has minWidth set to 660:

file:///Applications/Beeper.app/Contents/Resources/app.asar/lib/electron-main.js:

// app.asar/lib/electron-main.js; Lines 1282-1315
// ..snip..
const preloadScript = path_1.default.normalize(`${__dirname}/preload.js`);
    mainWindow = global.mainWindow = new electron_1.BrowserWindow({
        // https://www.electronjs.org/docs/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do
        ...(isMac ? {} : { backgroundColor: "#fff" }),
        icon: iconPath,
        show: false,
        autoHideMenuBar: store.get("autoHideMenuBar", true),
        x: mainWindowState.x,
        y: mainWindowState.y,
        minWidth: 660,
        minHeight: 400,
        width: mainWindowState.width,
        height: mainWindowState.height,
        frame: argv["default-frame"] ?? false,
        titleBarStyle: isMac ? "hidden" : null,
        trafficLightPosition: { x: 16, y: 20 },
        webPreferences: {
            //devTools: false,
            //zoomFactor: 0.9,
            preload: preloadScript,
            nodeIntegration: true,
            //sandbox: true, // We enable sandboxing from app.enableSandbox() above
            // We don't use this: it's useful for the preload script to
            // share a context with the main page so we can give select
            // objects to the main page. The sandbox option isolates the
            // main page from the background script.
            spellcheck: true,
            contextIsolation: true,
            webgl: true,
            backgroundThrottling: false,
        },
        vibrancy: "fullscreen-ui",
        visualEffectState: "followWindow",
    });
// ..snip..

With the addition of a back button (like the mobile ver) if possible

@aronaoi Unfortunately I don't think that one will be possible with CSS alone (or at least, doing so is beyond my current skills/knowledge with it), so if you wanted to do that, it would also likely need to also be a JS hack/injection like I mentioned above.

@0xdevalias
Copy link
Author

0xdevalias commented Dec 29, 2023 •
edited
Loading

RE: https://gist.github.com/0xdevalias/3d2f5a861335cc1277b21a29d1285cfe?permalink_comment_id=4808978#gistcomment-4808978

Would love to know how you ended up achieving this!

@jackmawer Which particular part are you referring to by 'this'?

Do you mean this part, from @jorgeparamos (Ref):

I understood half and managed to implement another half of that, and attained that translucid (i.e. sort of transparent, but blurred) look — which I find still benefits the app a lot.

@mary-ext
Copy link

mary-ext commented Mar 27, 2025 •
edited
Loading

Ctrl+Shift+I doesn't seem to open devtools on v4 anymore, it opens up chat details pane now.

@0xdevalias
Copy link
Author

Ctrl+Shift+I doesn't seem to open devtools on v4 anymore

@mary-ext That's frustrating :(

image

I tried toggling it off and reloading the app, but even then it still didn't seem to allow me to open devtools :'(

I just reported the following feedback to Beeper based on this:

In the old version of beeper desktop we could access the electron devtools from the menu, or from a keyboard shortcut like Command+Shift+I.

In earlier versions of desktop v4 the menu item was gone, but we could still use Command+Shift+I, but now we can't even use that because it's seemingly overridden by 'Toggle Chat Info'.

Ideally we would have access to be able to open electron devtools via the application menu, and probably from the Command+J action interface as well.

It might also make sense to put a button for it near the custom CSS section in the settings, since devtools is one of the most common and easily used tools for inspecting what we need to target for CSS customisations.

@0xdevalias
Copy link
Author

0xdevalias commented Mar 29, 2025 •
edited
Loading

Ctrl+Shift+I doesn't seem to open devtools on v4 anymore

@mary-ext So on Windows, if you disable that shortcut toggle, then it should work again (a few others confirmed this), and on macOS, apparently the shortcut is Command+Option+I, which is why it wasn't working for me above 😅

I've updated my notes above to mention both shortcuts + the note on disabling the keybinding:

@mary-ext
Copy link

oh, awesome! didn't realize I could just disable that keyboard shortcut

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment