Ribbon Theme

[fraxzi]

Hi All,

Anyone so kind to share Ribbon Style Office 2016 Dark Theme?

Highly appreciated.

[Antonio Linares]

Do you mean this look ?

[richard-service]

Do you mean this look ?

Antonio,

I think so and like it.

[James Bott]

The short answer is that creating a dark theme is not easy.

I have been working on the Ribbonbar for a couple of weeks. It is a very complex set of code which includes several classes. And there are at most, a half-dozen comments in the entire set of classes, so there is a huge learning curve.

There are a number of limitations that prevent you from making changes to colors without resorting to modifing the classes. For example, many of the colors are hardcoded with manifest constants and/or RGB values, so you can't easily override existing colors. Also, the basic ribbonbar is already drawn at the end of the New() method so you can't change lots of things outside the class. One would like to just be able to do:

oRBar:= TRibbonbar():new(...)
oRBar:nClrRBar := RBG(54,54,54)

For some colors you can do this, but for others you can't. Actually most of the colors are arrays for use in creating gradients so you would have to do something like this:

oRBar:aGrad:= { { 1, RGB( 255, 255, 255 ), RGB( 229, 233, 238 ) } }

Some are also double gradients (4 color values) and others contain IIF() code so they are double-double array codeblocks. Whew!

And there are other issues. The ribbonbar uses outlines (actually double outlines) around the bar and the tabs and the same colors are used for the group separator bars. My objective was originally just to make the bar look like MS Word 2016 (i.e. Windows 10 look). Windows 10 has a very clean a flat look with no gradients or outlines. Thus MS Word has no outlines around the bar or tabs. I can color the outlines the same color as the bar so it seems to disappear, but then the group separator bars also disappear. Thus code in the classes must be changed to draw them each separately and in different colors or gradients.

Additionally, a new style 2018 needs to be created and we still have to maintain the other 4 styles, 2010, 2013, 2015 and 2016 so all changes are going to have to be tested with all styles. And let's throw in a dark theme option for the 2018 style. So that is at least six styles that are going to have to be supported. The existing code is close to 4000 lines in five classes.

Now you can see that adding a dark theme is not a simple task. First we have to create the Windows 10 design, then we have to provide a dark version.

It may sound like I am being critical, however to be clear, whoever wrote the ribbonbar code did a great job on a very complex project. As is common, later one can often see better ways to do some of it. It happens to me often. My intent here is just to point out that creating a dark theme is way more complex that it may seem.

An idea I have had is to use some type of configuration file that stores all the colors and the Ribbonbar class reads them in. This way we could add many themes by only adding to the configuration file. We would probably also need to write a program just to enter the data for the configuration file.

[Antonio Linares]

James,

The dark mode from your screenshot looks quite similar

How have you implemented it ?

[Silvio.Falconi]

perhaps we can change color of rbtn

[Enrico Maria Giordano]

What about the title bar? It should be dark as well.

EMG

[James Bott]

How have you implemented it?

Antonio, the answer to that is not simple, nor would it be useful right now, since I am using modified versions of the ribbonbar classes. Additionally, I did this quick-and-dirty to just show that it can be done, but also there are still limitations, like the outlines.

As I mentioned previously, many of the colors are either manifest constants or RGB values which means in order to change the colors you have to replace the entire arrays. I would like to convert all these values to class variables which could then be changed by a single change to a variable (or set of two variables in the case of gradients).

perhaps we can change color of rbtn?

Silvio, I'm not sure why you would want that? The ones shown in my example are the same as MS Word. The buttons inherit the color of the ribbonbar. I have not seen any ribbonbars that have different colored buttons, and my intent is to emulate Microsoft's look. Of course, if you really wanted something like that it is possible but would require changes to the class code.

Hmm, maybe you are referring to selected (on/off) buttons?

What about the title bar? It should be dark as well.

Enrico, I agree. I did a cursory search for "windows 10 titlebar color" on the Internet but only found how to change all the Windows apps titlebar's color but not a single app. Do you know how?

[Enrico Maria Giordano]

What about the title bar? It should be dark as well.

Enrico, I agree. I did a cursory search for "windows 10 titlebar color" on the Internet but only found how to change all the Windows apps titlebar's color but not a single app. Do you know how?

No, sorry.

EMG

[Antonio Linares]

Enrico, I agree. I did a cursory search for "windows 10 titlebar color" on the Internet but only found how to change all the Windows apps titlebar's color but not a single app. Do you know how?

Please review FWH\samples\skin1.prg and skin2.prg

[James Bott]

Antonio,

I looked at skin1 and skin2 but they are not using windows with title bars so I am not sure how that helps?

[fraxzi]

Yes guys... Exactly like that.
As much as possible not to modify internal class ... if can be avoided..

I been working with this but still a lot of tweaking ... I already replaced some color schemed of "Outlook2010" to suited the theme I hope to implement..

I patterned mine from Outlook 2016

[James Bott]

Frances,

Impressive!

I find it interesting that Outlook 2016 and Word 2016 have different dark themes. Word's theme is much darker. Are there two dark themes to pick from? I don't have a copy of Office 2016 here to look at--I am using screenshots.

[Silvio.Falconi]

at school we have office 2016
and I 'm trying to recreate it but I have problems
it's as 2016 release but the button color background are changed
on this forum I allready list my modify ( together Josè of alanit and Antonio)

I had modify the ribbon class and add l2016 with some colors I change the

METHOD SetStyles( l2010, l2013, l2015, nTopMargin, nClrPaneRB, nClrBoxOut, nClrBoxIn,;
nClrBoxSelOut, nClrBoxSelIn, aGrad, aGradFld, aGradHigh, aGradOver, l2016 ) CLASS TRibbonBar

I send to linares my modifies

on prg
#define COLOR_MENUHILIGHT 29 //051,153,255

IF IsWindows10()
::oRebar:l2016:=.t.
::oRebar:nRoundBox := 0
::oRebar:nClrPaneRB := GetSysColor( COLOR_MENUHILIGHT )
else
::oRebar:l2010:=.t.
endif
we add also the possibility to click on the top and hide ribbonbar
we add also a toolbutton at left to hide/show the Explorer Menu if there was

then the rbtn are change at the end

type

For x= 1 TO 71
oBtn[x]:bClrGradNormal = { | lInvert | If( ! lInvert,;
{ { 1, RGB( 225, 225,225 ), RGB( 225, 225, 225 ) } },;
{ { 1, RGB( 229,241,251 ), RGB( 229,241,251 ) } } ) }
next x





I saw the word 2016 have the tabs more big I think we can make it

[James Bott]

Silvio wrote: At school we have office 2016 and I 'm trying to recreate it but I have problems. It's as 2016 release but the button color background are changed.

Ok, I think you are referring to the button highlight color when the cursor is over the button, rather than the button color? Note that there are also pressed and not-pressed colors. And each one can be a double array, so there are a total of 4 colors and two other values that determine the type of graduation.

Code: Select all  Expand view

    DEFAULT bClrGradNormal := { | lPressed | if ( lPressed,;
        { ;
          { 2/5, nRGB( 254, 215, 169 ), nRGB( 251, 179, 99 ) } , ;
          { 3/5, nRGB( 250, 155,  50 ), nRGB( 253, 239,  173 ) } ;
        },;
        {;
          { 2/5, nRGB( 255, 253, 222 ), nRGB( 255, 231, 147 ) } , ;
          { 3/5, nRGB( 255, 215,  86 ), nRGB( 255, 231,  153 ) } ;
        } ) }
 

I am still trying to figure out the best way to do this. You can change the hover over color by passing this complicated array, but you have to do this with every button. Ideally, we need to do it so that It is applied to all the buttons, and there must be a way since that is the default behavior. Also we need to be able to turn off the outline of this highlighted color box. Office 2016 doesn't use outlines.