Summary

Add infrastructure and settings for controlling the Review Board theme.

Review Request #13724 — Created April 10, 2024 and submitted April 17, 2024, 7:35 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Users can make their choice in My Account -> Appearance. The default is
the traditional Light Mode, with all other modes listed as Beta.
Eventually, once Dark Mode is stabilized, the plan is to set System as
the default. For this reason, "default" is a mode of its own, mapping
internally to the default mode. A siteconfig setting can be specified to
choose a custom default.

Internally, this is all backed by a new app module:
reviewboard.themes. This contains a sub-module,
reviewboard.themes.ui, which defines a BaseUITheme, each theme
implementation, and a UIThemeRegistry. These are picked up by the form
and used to offer selections. The theme classes supply attributes for
the <html> tag to enable Ink theme selection.

This is one half of the theme implementation. The second part will
introduce syntax highlighting themes.

Testing Done

Unit tests pass.

Tested all the themes, making sure they applied, set the right
attributes, and took effect.

Commits

Summary	ID
Add infrastructure and settings for controlling the Review Board theme. Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.	da7e15615fdc3b852351532b953841bfc8b3a77e

Summary

Add infrastructure and settings for controlling the Review Board theme.

Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.

da7e15615fdc3b852351532b953841bfc8b3a77e

Files

Issues

Description	From	Last Updated
Rather than have a new page for this, I feel like we should rearrange the existing "Settings" page a bit: …	david	April 14, 2024, 4:20 p.m.

flake8 passed.

JSHint passed.

Change Summary:

Added missing Version Added to Profile.ui_theme_id.

Commits:

	Summary	ID
	Add infrastructure and settings for controlling the Review Board theme. Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.	375af4174c6fe671198394ee501c32fe0bbcec50
	Add infrastructure and settings for controlling the Review Board theme. Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.	a89a21af8bee7785cbf5f35c7a209df2aed8cc07

Diff:

Revision 2 (+1266 -20)

Show changes

	docs/manual/extending/coderef/index.rst
	reviewboard/settings.py
	reviewboard/accounts/models.py
	reviewboard/accounts/pages.py
	reviewboard/accounts/forms/pages.py
	reviewboard/accounts/tests/test_theme_form.py
	reviewboard/admin/siteconfig.py
	reviewboard/templates/base.html
	8 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Meant to ask this in my last review -- do the themes apply right away when selecting them on the form? Or do they only apply after saving the form? It would be nice to show a preview of the selected theme somehow, by having the theme apply to the page right away when selecting it. Or you could show a little picture of the theme similar to how GitHub does.

chipx86 April 10, 2024, 6:09 p.m.

They only apply when saving the form. There's no time right now to do anything more than this right now, but I have a better theme UI planned post-release.

maubin April 11, 2024, 7:40 a.m.
```
Sounds good.
```

My Account -> Appearance (Revision 1)

Rather than have a new page for this, I feel like we should rearrange the existing "Settings" page a bit:

Appearance
----------

(o) Default appearance (Light mode)
( ) Dark mode (beta)
( ) Use system theme (beta)

[x] Enable syntax highlighting for the diff viewer

General Settings
----------------

Time Zone

[x] Always open an issue when the comment box opens
[x] Always use markdown for text fields

Notifications
-------------

...

The issue has been resolved. Show all issues

Rather than have a new page for this, I feel like we should rearrange the existing "Settings" page a bit:
Appearance
(o) Default appearance (Light mode)

( ) Dark mode (beta)

( ) Use system theme (beta)
[x] Enable syntax highlighting for the diff viewer

General Settings
Time Zone
[x] Always open an issue when the comment box opens

[x] Always use markdown for text fields

Notifications
...

chipx86 April 10, 2024, 6:09 p.m.

I'd like to have a new page for this.

Settings itself has too much cruft, and I have longer-term plans for Appearance that would benefit from having breathing room.

This is also not the only setting coming. There's a part 2 for this change in my tree, and a part 3 prototyped for RB8 that will require even more room available.

david April 11, 2024, 10:15 a.m.

Can we move this page to not be the first thing in the list, then? I think the profile/general settings are more important.

Change Summary:


Updated to have themes set data-ink-color-scheme instead of data-theme (see /r/13726/).
They also now set data-theme to BaseUITheme.name.
Theme names are now localizable.
The "Appearance" page has been moved below "Settings".

Commits:

	Summary	ID
	Add infrastructure and settings for controlling the Review Board theme. Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.	a89a21af8bee7785cbf5f35c7a209df2aed8cc07
	Add infrastructure and settings for controlling the Review Board theme. Review Board 7 introduces the beginnings of theme support. We'll be supporting Light, Dark, and System (Auto Light/Dark) themes, but the idea is to later allow for the possibility of more flexibility here (such as High Contrast and maybe even custom themes). Users can make their choice in My Account -> Appearance. The default is the traditional Light Mode, with all other modes listed as Beta. Eventually, once Dark Mode is stabilized, the plan is to set System as the default. For this reason, "default" is a mode of its own, mapping internally to the default mode. A siteconfig setting can be specified to choose a custom default. Internally, this is all backed by a new app module: `reviewboard.themes`. This contains a sub-module, `reviewboard.themes.ui`, which defines a `BaseUITheme`, each theme implementation, and a `UIThemeRegistry`. These are picked up by the form and used to offer selections. The theme classes supply attributes for the `<html>` tag to enable Ink theme selection. This is one half of the theme implementation. The second part will introduce syntax highlighting themes.	da7e15615fdc3b852351532b953841bfc8b3a77e

Diff:

Revision 3 (+1326 -22)

Show changes

	docs/manual/extending/coderef/index.rst
	reviewboard/settings.py
	reviewboard/accounts/models.py
	reviewboard/accounts/pages.py
	reviewboard/accounts/forms/pages.py
	reviewboard/accounts/tests/test_theme_form.py
	reviewboard/admin/siteconfig.py
	reviewboard/static/rb/css/pages/base.less
	9 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.x (d4d8d3f)