APEX 5 Colour Contrast

During the APEX 5 early adopter I remember a bit of discussion going around regarding the colour contrast.

I would have been one of the complainers, and it's one topic I forgot to raise with the team when I met them at Kscope.

Use of APEX 5 is ramping up at my current site and I couldn't go any further without having a little play. A while ago I used some filters in my ad blocker extension to trim the fat from the OTN forums pages.


I'm come across an even better Chrome extension since then called Stylebot and now it's really easy to manipulate pages you regularly visit.

For instance, when you open the extension you can nominate elements on the page then declaratively define some attributes to use every time that page loads on the specified site.

Stylebot interface

After farming the blue colours from APEX 4.2, I applied this to the region titles when editing component properties. I personally found this so much easier to scan the page and look for the attributes I need.

Modified on the left, original on the right.

Shared component properties

It's almost like the difference between quickly reading a mixed case sentence and READING SOMETHING LIKE THIS WITH NO HEIGHT DIFFERENCE WITHIN THE WORDS.

I did the same thing for the Shared Components home page, though this UI will also be revamped like the page designer at some point in the future

Shared Components

Speaking of the I gave the same treatment to the property palette in the page designer.

Page Designer properties

People have already asked for me to post my tweaks, and it turns out Stylebot allows you to share them so here is mine:
Oracle APEX 5 fitted with 4.2 contrast

No doubt I'll make adjustments in future as I explore the environment and see what works, I'll be sure to keep it up to date. I'm happy to hear suggestions, and perhaps news from the APEX development team that they're thinking of adding built-in styling options to the development environment, kind of like skins.

For completion, here are the styles I used so far.

@import url(http://fonts.googleapis.com/css?family=Georgia);

/* Component properties */

div.a-Region-header {
    background-color: #cfdef0;
    border-style: none;
    border-width: 1px;
    border-color: rgb(170, 170, 170);
}

h2.a-Region-title {
    font-weight: bold;
    font-family: Helvetica;
    font-size: 14px;
}

span.a-LinksList-label {
    font-size: 14px;
}

label.a-Form-label {
    font-size: 13px;
}

li.apex-rds-item.apex-rds-after a span {
    font-size: 13px;
}

li.apex-rds-item.apex-rds-first.apex-rds-selected.apex-rds-item--hint a span {
    font-size: 13px;
}

/* Frame some buttons */

div.a-Region-headerItems--buttons button {
    border-style: solid;
    border-width: 1px;
    border-color: #949494;
}

button.a-Button {
    border-width: 1px;
    border-style: none;
    border-color: #949494;
}

/* Page designer properties */

div.a-PropertyEditor-propertyGroup-header {
    background-color: #cfdef0;
}

/* Component view */

div.aRegionHeading {
    background-color: #e8e8e8;
}

div.aRegionHeading h1 {
    font-weight: bold;
}

Happy APEXing!