Set visual styles such as colors in the <Admin | Preferences | UI Settings> menu.
When you set or change a value, the web browser refreshes automatically.
Some colors are not available in every color system. If you choose an unsupported color, a similar color is shown instead.
Tailwindcss: BLUE_GREY, BROWN, DEEP_ORANGE, DEEP_PURPLE, GREY, LIGHT_BLUE, and LIGHT_GREEN are not supported.
Material Design and Muted: EMERALD, FUCHSIA, GRAY, NEUTRAL, ROSE, SKY, SLATE, STONE, VIOLET, and ZINC are not supported.
Setting the Logo
Set the logo in the <Admin | Preferences | UI Settings> menu to apply it across the product.
In the “Logo” panel, set the following.
Logo: The image shown in the menu bar.
Favicon: The icon shown in the web browser tab.
Logo Position: Choose Top or SidebarButtons. The default is SidebarButtons.
Fill Logo Background with Theme Color: Fills the logo area with the theme color.
If a document, web viewer layout, or library has its own logo, that logo is used in that document, web viewer, or library.
Setting a Wide Logo
You can use a 1wide logo as well as a square one. When you use a wide logo, set Logo Position to “2Top”.
Filling the Logo Background with the Theme Color
As shown in the figure, you can fill the logo area with the theme color.
To place the logo at the very front of the top area, as in 3, turn on “4Fill Logo Background with Theme Color”.
Setting the Theme Color and Accent Color
Set the theme color and accent color in the <Admin | Preferences | UI Settings> menu to apply them across the product.
If a web viewer layout or library has its own theme and accent colors, those colors are used on that screen. The editor follows the settings of the web viewer layout.
Color System Options
OKLCH mode is supported.
Turn on the “1Enable OKLCH” toggle to use a modern color format with more vivid colors and consistent brightness. Turn it off to convert colors to standard RGB values. It is on by default.
Three color systems are available: 2Tailwindcss, Material Design, and Muted.
The default is the Tailwindcss color system.
Tailwindcss
Vivid, clean, and polished colors that go well with any layout.
Material Design
Based on Google's guidelines, with trustworthy and stable colors.
Muted
Lower saturation for calm, soft colors.
Filling Icons
As shown in the figure, you can switch icons from outline style to fill style.
Turn on “1Fill Icon” to fill the icons with color.
Date and Time Formats
Set the format used to show dates and times, such as creation and modification times.
Choose two formats in the “Formats” panel. Each option in the list shows the current time in that format as an example.
Date/Time Format:
yyyy-MM-dd a hh:mm(12-hour clock with AM/PM) oryyyy-MM-dd HH:mm(24-hour clock)Date/Time with Second Format:
yyyy-MM-dd a hh:mm.ssoryyyy-MM-dd HH:mm.ss