Add RFC: Change default theme

[Warchamp7]

Description

The default Dark theme in OBS is incredibly cramped and visually overwhelming, especially to new users.

While the Dark theme is useful as a compact option, the default should be something friendlier to new users.

Motivation and Context

One of the most common complaints about OBS from new users is that the UI is not user-friendly. As a complex piece of software, there are limits to how simple the OBS UI can become. However, it can still be made friendlier with a more modern looking design.

Compared to the default Dark theme, I propose a new theme that has a larger font size, more space around elements to let them breathe, and a better color hierarchy to improve both readability and usability.

Creating space around elements and increasing the font size makes the UI less overwhelming, as well as improving usability. Most if not all of the OBS UI consists of buttons or button-like widgets, and buttons should generally not be tiny and crammed up against each other.

The current Dark theme should be retained under a new name like Compact for users that prefer it.

My current proposal is to use a greyscale version of my new Yami theme.

Screenshots

Link to RFC

https://github.com/Warchamp7/rfcs/blob/change-default-theme/accepted/0023-change-default-theme.md

[unknowndomain]

I can see a lot of work has gone into this, but as a long term OBS user I actually think Dark was a great improvement over the light theme previously and any UX changes OBS is making should be to move more towards the various operating systems standard GUI widgets and Human Interface Guidelines rather than reinventing the wheel. This will bring genuine improvements through familiarity to other apps on their device.

As specific feedback on this theme:

• Checkboxes - I don't think this design works, it is not immediately obvious without context of other checkboxes in the opposite state that the white frame and white box is checked, you could reasonably assume clicking it would result in a tick mark in the white box.

Badly drawn example of what I mean:

• Tabs - I think the new tab style with the underline is a signficiant improvement over the current Dark theme as it is weird that in Dark the selected tab becomes darker rather than ligher which would from a visual hierarchies perspective would normally be the selected one.

• Navy Tint - I know that the website for OBS has a blue/navy theme but I am not sure that a navy tinted dark theme makes sense, it might be an option, but I think it should be a monochromatic theme to avoid white balance issues when looking at a navy interface with a video in the middle, think about people using this for colour correcting their videos or applying LUTs where you might want to see what the output really looks like on a neutral background.

What I think is good however is you've increased the contrast which is important for accessibility purposes, perhaps just desaturating the theme to remove the blue tint and bring the blue tint back as Yami (Navy)?

• Spacing - I like the spacing around stuff in menus and pop ups but in the main UI and docks I think you probably want to dial it back somewhere between the current and proposed spacing.

• Disabled UI Elements - This isn't specific to your theme but the disabled UI elements are are indicated by grey text but the UI element it's self isn't visually distinct, the grey text paradigm tends to be used to indicate placeholder text which could lead a user to think that something is broken when they're clicking, a good example is in your above screenshots in the scene transformation settings for the bounding box.

• Inconsistent UI - In your design there seems to be a different icon for the drop down lists, in the below screen shot it seems to switch between a downward arrow and two apposing arrows on every field...

[Warchamp7]

• Checkboxes - I don't think this design works, it is not immediately obvious without context of other checkboxes in the opposite state that the white frame and white box is checked, you could reasonably assume clicking it would result in a tick mark in the white box.

I think this is a valid point and I'll explore having an actual proper checkmark

• Navy Tint - I know that the website for OBS has a blue/navy theme but I am not sure that a navy tinted dark theme makes sense, it might be an option, but I think it should be a monochromatic theme to avoid white balance issues when looking at a navy interface with a video in the middle, think about people using this for colour correcting their videos or applying LUTs where you might want to see what the output really looks like on a neutral background.

I think this is a perfectly reasonable point in the use case you're describing, but in the grand scheme of things a really minor concern for the majority of OBS users. I think this point is in favour of keeping Dark (Or any form of greyscale theme around) but not necessarily against changing the default to a tinted theme.

• Spacing - I like the spacing around stuff in menus and pop ups but in the main UI and docks I think you probably want to dial it back somewhere between the current and proposed spacing.

I'll experiment a bit with this

• Disabled UI Elements - This isn't specific to your theme but the disabled UI elements are are indicated by grey text but the UI element it's self isn't visually distinct, the grey text paradigm tends to be used to indicate placeholder text which could lead a user to think that something is broken when they're clicking, a good example is in your above screenshots in the scene transformation settings for the bounding box.

I'll see if I can darken the background of these elements as well

• Inconsistent UI - In your design there seems to be a different icon for the drop down lists, in the below screen shot it seems to switch between a downward arrow and two apposing arrows on every field...

Some of these are dropdown boxes and some of them are spinboxes. Completely different UI elements. Editable dropdown boxes have the single arrow.

[mufunyo]

• Navy Tint

I think this is a perfectly reasonable point in the use case you're describing, but in the grand scheme of things a really minor concern for the majority of OBS users.

"If it ain't broke, why fix it?"
I feel the navy tint adds nothing, but only detracts from a neutral grey which suffers no chromatic adaptation issues. If you want to add colour to the UI I suggest using blue flourishes in places like buttons, checkboxes and separators, not blanket tinting the entire UI background colour. As minor as the concern might be, you're adding a concern where previously there was nothing wrong.

[Warchamp7]

I've amended this RFC with screenshots of a greyscale version of Yami, to address the feedback from @mufunyo and @unknowndomain

Yami has also been updated with checkmarks for the checkboxes.

[Fenrirthviti]

Since we are all pretty confident we want this, no reason to leave this unmerged.

FCP disposition merge.

[Fenrirthviti]

PR has been made and accepted, so merging this. obsproject/obs-studio#2778