Skip to main content
Theme Editor

How to modify the look and feel of your SOE site.

Joel Bradley avatar
Written by Joel Bradley
Updated over a week ago

Applies to: Enterprise

ADMIN PRIVILEGES REQUIRED

This documentation is for Stack Overflow Enterprise. Free, Basic, and Business users can access their documentation here. Find your plan.


Overview

SOE allows site admins to change the look and feel of your site. You're able to select custom colors for the top bar, buttons, and highlights, and also upload a logo.

You can access the customization options by clicking Admin Settings in the left-hand menu, then Appearance. You can set alternate light and dark theme colors and logo by clicking the Light theme and Dark theme buttons at the top of the page.

You can also allow users to increase contrast between text, background and border colors by setting High contrast to On. This allows users to enable high contrast mode in their profile settings.

Colors

To change the colors used throughout your site, use the Top bar background, Links and buttons, and Accent fields. Click the colored square in a field to open a color picker that can help you find the best colors for your site. If you know the hex values of your colors, enter those directly.

Light theme editor

Dark theme editor

SOE will apply any color changes to the page immediately so you can preview your new colors. To save the changes, click Save theme changes. To revert to the previous settings, click Discard changes.

Logo

You can update the logo on the top bar by choosing a new file using the Upload .svg logo button. Logos must be in the SVG format. The ideal size is between 30 and 34 pixels tall, with a recommended maximum of 40px (if your company's logo is taller than it is wide). You can also optionally enable the Configure URL for logo link toggle and set a custom link to use when users click on the logo.

NOTE: Just like the logo, this URL will also be visible to unauthenticated visitors.

Troubleshooting themes

If you upload a .svg logo to the Appearance page and it doesn't display properly, here are a few things to check:

  • Check if the file is a valid SVG file. Does the file have opening and closing <svg></svg> tags?

  • Check if the <svg> tag has height and width attributes. Stack Overflow can adjust the logo’s size on the site but needs dimensions to work with.

Resetting your site's theme

If you encounter any issues while using the Theme Editor, and the new design options you chose look like they're breaking the site's functionality in any way, there's a special route you can use to reset it to the standard Stack Overflow design while also exporting the current settings.

To do that, go to /enterprise/theme/clear and you'll see a button labeled "Export and reset theme". Clicking it will send you back to your site, which should have the default Stack Overflow design, and prompt you to save the exported settings.

After that you can apply new changes, reverting back to the version before the most recent changes.

Did this answer your question?