Customizing COSMIC: Theming and Applications

It’s Back to School season, so grab yourself a brand new discounted computer and let’s get back to COSMIC class! Our new, not yet released Rust-based desktop environment for Pop!_OS and other Linux distros is filling out with some essential systems that cater the DE to both users and developers alike. Customization is one of our main focuses for COSMIC, and was a huge focus for us in August, too.

COSMIC Appearance

One of our objectives early on was to provide an easy and meaningful way to personalize your desktop’s appearance. In order to build customization into the foundation of COSMIC DE, we needed to make sure the design system was themeable.

Image

You’ll be able to customize how your system looks directly in COSMIC Settings. Beyond changing from Dark to Light mode and choosing an accent color you can change the application background, interface text palette tint and neutral palette tint. You’ll also be able to choose one of the three styles for the corner radii used throughout the interface and set an interface density.

Image

To ensure those options work seamlessly, the design system is architected a certain way. Nothing in the components of the design system is meant to be hard-coded. So the system relies on using variables not merely for colors but also for spacing, icon sizing and corner radii.

Image

One of the challenges in color customization relates to maintaining necessary color contrast while giving enough freedom to create. To solve for this, theme colors are automatically derived from the few base colors you can customize. For example, when you select a specific application background color, the system uses it to derive colors for other surfaces and text placed on those surfaces. When you choose a text tint color, the text colors automatically adjust to use this tint. Neutral tint color brings subtle tint into various widgets, including background and text in search input and tabs. To achieve this result we convert the selected custom color from sRGB to OKLCH and manipulate the color lightness value while keeping its hue and chroma values the same.

Image

Most of the calculations that happen in the background have been implemented, including customization of colors. We’ve also incorporated spacing and corner radii variables, and are working towards corner radii styles and density options as well.

COSMIC Application API

We added an application API to the libcosmic widget library to provide a framework for developing applications and applets in COSMIC DE. It automates integration with COSMIC theme support, along with Wayland protocols, COSMIC’s configuration back-end, and common application elements like header bars and navigation. For application developers, this means convenient development without having to worry about managing the low-level desktop and window manager integrations. For us, this ensures consistency across COSMIC applications and applets.

Tiling with mouse

Mouse-driven tiling has been designed and implemented alongside keyboard tiling as two parts of the same feature. While a window is being tiled with the mouse, indicators show which windows are grouped together, while a transparent background instructs how that window will be arranged in its new position.

See the image below for an explanation of how target zones for the cursor determine where the window will be placed.

Image

In addition to these zones, a window may be placed between two windows to create a new column in the tiling grid.

Switching between mouse and keyboard tiling should feel seamless, so while implementing the design we cut out duplicate code between the two features. “The result also turned out to be much more readable tiling code,” says Victoria, a System76 engineer who worked on the implementation. “Tiling is one of the most complex parts of our shell, so that was a personal highlight for me.”

Notifications Center

The notifications applet has been integrated into COSMIC DE! Unlike in Pop!_OS 22.04 LTS, notifications exist in their own applet, separate from your calendar. In addition, multiple notifications from the same application will stack in the notifications center, reducing clutter. See it in action below:

User Permissions

Applications require a user’s permission to perform certain functions, such as using the microphone for a virtual chat in Jitsi or Zoom. Keeping applications isolated from these functions protects your privacy by requiring your consent to access processes that may otherwise feel invasive or leave your system vulnerable. COSMIC DE now uses a Polkit agent, which facilitates communication between applications and your system, and prompts you for your password when a task requires your special permission to proceed.

Xwayland fixes for pop-ups and drop downs

Xwayland is a compatibility layer between applications using the X compositor and the Wayland compositor/display server used in COSMIC DE. The compositor connects your mouse clicks to what’s being displayed on screen so that the correct action takes place — making compatibility between the two of the utmost importance. X application menus were sometimes not opening when clicked, and experienced further issues after being moved to another display. We’ve implemented a number of fixes to address these bugs.

That’s all the updates we have for now. There was a lot of juicy info; we hope you took notes! Tune into next month’s class for another lesson in COSMIC DE!


Like what you see?

Share on Social Media