Oracle APEX theming might not be the first thing you think about when building an application—but it should be part of your development plan. A well-themed app helps reinforce your company’s brand, can improve usability, and give your users confidence in the tool you’ve built. Fortunately, APEX makes it easy to get started. In this guide, we’ll walk through the basics of using Theme Roller to customize colors and logos, how to add an app icon and favicon, and when it makes sense to layer in your own CSS for even more control.
1. Getting Started with Theme Roller
Theme Roller is APEX’s built-in visual theming tool. It lets you modify your app’s appearance without touching a single line of code. It’s perfect for beginners and seasoned developers alike—especially if you’re shy about writing CSS. You’ll find Theme Roller by running your app in developer mode and clicking the paint roller icon in the developer toolbar.
In addition to adjusting color palettes, logos, and icons, Theme Roller gives you control over a wide range of design settings: container, button, and form item border radius; background and text colors for multiple interface elements; and padding values that control spacing between layout components. These fine-tuning options make it easy to align your APEX app with your brand’s visual identity while maintaining a consistent user experience.
Another major benefit of using Theme Roller is its built-in color contrast analysis, which can help you ensure your color combinations meet accessibility guidelines. This is particularly useful for designing apps that are inclusive to users with visual impairments or other accessibility needs.
Customizing the Color Palette
Theme Roller is centered around color customization. You can quickly update the app’s primary, accent, and neutral colors to match your brand, in addition to the text and background colors noted above. These color roles are intelligently applied across Universal Theme components—from headers and buttons to cards and badges.
A good tip is to start with your brand’s primary and secondary colors and let APEX handle the rest. (Your marketing department will be more than happy to share the official HEX values with you—and they’ll be thrilled you asked!) You can always fine-tune individual components later, but defining those main roles gets you a lot of the way there.
Saving and Applying Your Theme
When you’re happy with your changes, save them as a named Theme Style. This makes it easy to roll back changes or switch between multiple brand styles (e.g., “Internal” vs. “Client-Facing”) or even between light and dark themes. You can set the default Theme Style under User Interface Attributes so it’s applied across your app, even when deploying to new environments. Another major benefit of saving a custom theme is that you can export it separately—making it easy to include in a code repository or apply to another app in a different workspace.
2. Adding Your Logo and Application Icon
Branding isn’t complete without a proper logo, application icon, and favicon. These small touches help your app feel more professional and polished.
Adding Your Company Logo
To add your logo, you have a couple of options. The most direct method is using Shared Components > User Interface Attributes > Logos, where you can upload an image and assign it to appear in places like the navigation bar or login page. Alternatively, you can add your logo directly within the Theme Roller by clicking the “Edit Logo” option in the developer toolbar. From there, you can choose whether to use an image, text, a combination of both, or even specify a custom URL where your logo is stored.
Make sure to preview your logo on different screen sizes to ensure it looks good across devices. One reason you might choose to include plain text alongside your logo is if your organization has multiple applications and you want to distinguish them with a simple text label—such as “HR Portal” or “Analytics Dashboard”—without altering the core logo. This approach helps clarify the purpose of the app at a glance, especially in environments where users interact with several APEX apps under the same brand umbrella.
Setting an Application Icon
Oracle APEX uses an application icon setting that populates across multiple places in your app, including the login screen and the browser tab favicon. Like your company logo, you can also add your icon directly in the Theme Roller using the “Edit Icon” option in the developer toolbar. From here, you can upload a large version of your icon, and APEX will automatically resize it for use across the application. Or you can manually upload your icon at different sizes in order to have more fine-grain control over its appearance.
To configure this, go to Shared Components > User Interface Attributes > Icon. APEX allows you to upload five sizes of icons: 32 x 32 pixels, 144 x 144 pixels (rounded), 192 x 192 pixels, 256 x 256 pixels (rounded), and 512 x 512 pixels. These icons are used in various contexts depending on device and browser, so it’s a good idea to provide versions in each size for best results.
Make sure your icon design is legible and clean even at smaller sizes, especially the 32 x 32-pixel version that appears in browser tabs, where it is scaled down to 16 x 16 pixels. Your company’s creative department may even have different versions of this icon optimized for these different sizes.
3. Going Beyond Theme Roller: CSS Customizations
While Theme Roller is great for quick visual edits, sometimes you’ll want more control than it can offer. That’s where CSS comes in.
APEX’s Universal Theme makes customizing the style of your application even easier by relying heavily on CSS variables. Most visual aspects of your application—from background and border colors to padding and spacing—can be adjusted by changing the value of a CSS variable. For example:
- –ut-body-title-background-color controls the background color of the Title region.
- –ut-region-buttons-padding-x adjusts the horizontal padding in the buttons area of a standard APEX region.
- –ut-field-label-font-weight controls the font weight of field labels (normal, bold, or any value between 100–900).
There are literally hundreds of these CSS variables available, giving you fine-grained control without having to write custom rules for every component. The real power comes from setting these values at the :root level of your stylesheet. Once a variable is changed there, it automatically applies throughout your entire application.
Setting Up Custom Fonts
While Universal Theme uses a clean and modern system font stack by default, setting up a custom font is a great way to align your application more closely with your organization’s branding or give your UI a more distinct personality. To use a custom font, you can link to a Google Font, Adobe Font, or host your own font files in your app’s Static Application Files. Once uploaded, reference the font in a CSS rule:
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body {
font-family: 'Inter', sans-serif;
}
Adding Brand Colors with CSS Variables
If you need additional brand colors or want more control over how they’re applied, you can define your own CSS variables in a custom stylesheet.
When it comes to application design, you’ll often need more colors than you think. As highlighted in Refactoring UI by Adam Wathan and Steve Schoger, a good UI palette typically includes a range of neutral grays, multiple shades of each brand color, and semantic colors for statuses, warnings, and errors. All in, it’s not uncommon to need ten or more colors with 5–10 shades each for a complex interface.
To help build out a palette like this, consider using Tints.dev—a tool inspired by the Refactoring UI approach. You can input a single brand color and generate a full range of complementary shades, ready for use in your application. The output is copy-paste ready for your CSS root declaration:
:root {
--color-green-50: #deffe4;
--color-green-100: #b7fec6;
--color-green-200: #2ffd7b;
--color-green-300: #2aea71;
--color-green-400: #26d767;
--color-green-500: #22c55e;
--color-green-600: #189a48;
--color-green-700: #0f7334;
--color-green-800: #074d21;
--color-green-900: #022a0f;
--color-green-950: #011a07;
}
Once defined, you can use these variables throughout your components:
.t-Button--custom {
background-color: var(--color-green-100);
color: var(--color-green-700);
}
Common Style Overrides
A few areas where you might want to use custom CSS:
- Adjusting card or region padding
- Changing button border radius or hover states
- Controlling form field spacing and alignment
- Styling interactive elements like tabs or badges
Most of these elements can be adjusted by editing Universal Theme’s CSS variables, but if you need a custom version of a button, card, or other component, you can assign it a unique CSS class and write styles specifically for that use case. Keep your overrides simple and purposeful—don’t recreate the wheel unless you have to.
4. Tips for Managing and Maintaining Your Theme
A good theme doesn’t just look nice—it’s easy to manage and update. Here are a few practical tips to keep your customizations under control.
Use Named Theme Styles for Clarity
Whenever you make updates using Theme Roller, save your changes as a clearly named Theme Style (e.g., “Brand v2.0”). This helps with version tracking and makes it easier to deploy changes across environments.
Centralize Your CSS
One of the most common pitfalls in APEX theming is scattering CSS in too many places. Here’s how to keep things organized:
- Never use page-level CSS. It might feel quick and easy to drop styles into the Page Designer’s “CSS” section—but this becomes a nightmare to maintain as your app grows. Styles should live in one place, not 50. Centralizing your CSS in a shared file is a lot like creating a reusable package or module in code: it makes updates easier, improves consistency, and eliminates duplication. Once your styles are centralized, you can reuse your classes throughout the application by simply applying them—rather than rewriting the same rules on every page where you want them to apply.
- Theme Roller CSS vs. External CSS Files:
- Theme Roller CSS: Great for small adjustments. The CSS is stored with your theme style, which is nice for quick changes.
- Pros: Fast to access, bundled with your visual theme.
- Cons: Not as portable across apps, not version-controlled, and the built-in Theme Roller editor is small and can be awkward to use for editing CSS—especially if you’re trying to preview your changes in real time.
- External CSS File (in Application Files or Workspace Files): Ideal for teams or complex projects.
- Pros: Easier to maintain, reuse, and track via Git or other tools. Keeps logic separate from styling.
- Cons: Slightly more setup required, but worth it long-term.
- Theme Roller CSS: Great for small adjustments. The CSS is stored with your theme style, which is nice for quick changes.
Store Custom Assets Strategically
If your theme uses custom fonts, background images, or icons, upload them to Static Application Files (for app-specific assets) or Workspace Files (if you want to share across multiple apps). Use versioned filenames (e.g., custom-theme-v2.css) to prevent caching issues during updates.
Once uploaded, you’ll also need to add the filename of your CSS file under Shared Components > User Interface Attributes > CSS. Be sure to select the minified version (APEX creates one automatically) to improve performance and load times.
Making the Most of Oracle APEX Theming
Theming in APEX doesn’t have to be intimidating. With tools like Theme Roller and a few well-placed CSS files, Oracle APEX theming gives you the flexibility to bring your brand to life in your application without sacrificing maintainability. Define your core styles, manage them smartly, and you’ll set yourself up for consistent, beautiful applications—no matter how many you build.
Want help building a custom theme or taking your APEX apps to the next level? Contact our team to see how we can support your development goals.
