As part of Socially Distant’s development, we have been working on an extensive user interface theme editor for use in the game. The editor was originally designed as a visual way to design the game’s default UI styles and preview them live, but is also intended to be used as a Steam Workshop tool. To that end, we are deciding to release it. Soon.
Why are themes important?
Socially Distant isn’t a 3D game and it isn’t a 2D game, it’s a UI-based game. You play it through a virtual desktop operating system. To that end, it’s extremely important for the game’s user interface to look both beautiful and consistent.
By adding a theme system to the game, it outright forces the UI to remain consistent. This is because the game’s style must be defined by the theme itself, rather than through arbitrary colors and fonts selected in the Unity inspector for each UI element.
Because the game pulls its style from a theme, adding a light and dark mode is trivial – because the light and dark colors can also be defined within the theme.
Even if we never make a visual theme editor, the game will always have a UI theme. But the theme editor allows you to make your own, and these are called user themes.
Just like with real-life operating systems and desktop environments, we absolutely do believe that you should be able to customize your Socially Distant experience. It’s already possible to swap between light and dark modes, but why not be able to make your own completely custom user interface style? Depending on your imagination, the theme you use could help further-immerse yourself in the game’s world.
We also love the idea of seeing what real-life operating systems you decide to try re-creating using the game’s theme editor. Customization is also in the spirit and DNA of many Linux distributions and desktops, some of which the game’s UI draws direct inspiration from. It would almost feel insulting not to include a feature like this.
How editing themes works
When you first launch the theme editor, you are prompted to either create a theme or open an existing theme.
When you create a theme, you can choose to either create one from scratch or use an existing theme as a starting point. We do not recommend creating themes from scratch unless you feel yp to the task of designing an entire color scheme and general style from scratch.
When editing a theme, there are several sections in the editor that let you adjust different parts of the theme.
The very first screen you’ll always see when opening a theme is the Theme Info screen. This lets you edit the name of the theme. When Workshop support is enabled in the game, you’ll also be able to edit other information such as the theme’s description.
When designing a user interface, it’s good practice to define a global color palette that you use throughout the UI’s design. The game forces you to do this, and lets you define your color palette in the Colors editor.
The colors editor lets you create a list of named colors that make up your color palette. You can then specify a Light and Dark variant for each named color. As the names suggest, the Light color is used in light mode and the Dark color is used in dark mode.
While you can’t change which actual fonts the game uses (this is for blind and dyslexia accessibility reasons), you can stylistically control certain aspects of typography in the game.
The game defines several text element types, such as paragraphs and different levels of headings.
For each text element, you are allowed to:
- Change which font type is used (sans serif, serif or monospaced). Please note that some players may enable the “Use legible fonts” accessibility setting, which will override your theme’s choice of font.
- Change the casing style. You can choose between normal casing, all-caps, all-lowercase, and small-caps.
- Change the text color. We recommend using a palette color, since this lets text elements react to dark and light mode.
- Change font attributes. This includes font size, bold, italic, underline, and strikethrough. If the player has large fonts enabled, the game will override any font sizes in your game to ensure any players with accessibility needs can actually read text.
The theme editor allows you to fully customize the appearance of the game’s Shell. The Shell is the game’s desktop environment, so this includes the appearance of the desktop, windows, and various UI widgets.
There’s far too much customizability in these menus to describe here, you’ll just have to experiment.
Themes are also what provides the game’s backdrop. The backdrop is a static image that displays behind everything in the game, and acts almost like a desktop background.
There is a daytime backdrop and a night time backdrop. Your theme can customize them both.
When will this be released?
If you are a play-tester on the acidic lighthouse Discord server, and were given a release override key for the game on Steam, then you will have access to the theme editor as part of the next pre-alpha update on Steam. Details will be announced on the Discord server. You will be the first to have access to the theme editor, so you have a chance to find any bugs and submit feedback.
For everyone else, the theme editor will be released as a standalone application for Windows systems on this website. It will be a special build of the game with most features and game modes disabled, except for a small demo environment with some core applications featured in the game’s virtual OS. This is a great way to get a feel for how to interact with the game as well!
You can expect a release of the theme editor by the end of February 2024.
What will you make?