How themes currently work #1608

PWagner1 · 2024-07-06T11:03:49Z

PWagner1
Jul 6, 2024
Maintainer

Based on discussions in #1607, this is how themes currently work. They consist of 3 main elements, which are:-

The 'main' class - This sets up the base elements for the theme, i.e. colours, images etc.
A 'base' class - which sets up tracking, border, 'appbutton' colours etc.
A 'color table' class - This basically takes the colours defined in the other 2 classes to create the theme.

Example of the 'main' colour array

   private static readonly Color[] _schemeOfficeColors =
        [
            Color.White, // TextLabelControl
            Color.White, // TextButtonNormal
            Color.White, // TextButtonChecked
            Color.FromArgb(137, 135, 133), // ButtonNormalBorder1
            Color.FromArgb(127, 125, 123), // ButtonNormalBorder2
            Color.FromArgb(10, 10, 10), // ButtonNormalBack1
            Color.FromArgb(41, 41, 41), // ButtonNormalBack2
            Color.FromArgb(164, 163, 163), // ButtonNormalDefaultBack1
            Color.FromArgb(114, 114, 114), // ButtonNormalDefaultBack2
            Color.FromArgb(204, 208, 214), // ButtonNormalNavigatorBack1
            Color.FromArgb(229, 232, 236), // ButtonNormalNavigatorBack2
            Color.FromArgb(10, 10, 10), // PanelClient
            Color.FromArgb(41, 41, 41), // PanelAlternative
            Color.White, // ControlBorder
            Color.FromArgb(167, 167, 167), // SeparatorHighBorder1
            Color.FromArgb(119, 119, 119), // SeparatorHighBorder2
            Color.FromArgb(10, 10, 10), // HeaderPrimaryBack1
            Color.FromArgb(41, 41, 41), // HeaderPrimaryBack2
            Color.FromArgb(164, 163, 163), // HeaderSecondaryBack1
            Color.FromArgb(114, 114, 114), // HeaderSecondaryBack2
            Color.White, // HeaderText
            Color.White, // StatusStripText
            Color.FromArgb(155, 163, 167), // ButtonBorder
            Color.FromArgb(221, 224, 227), // SeparatorLight
            Color.FromArgb(145, 153, 164), // SeparatorDark
            Color.FromArgb(228, 228, 228), // GripLight
            Color.FromArgb(77, 77, 77), // GripDark
            Color.FromArgb(41, 41, 41), // ToolStripBack
            Color.FromArgb(41, 41, 41), // StatusStripLight
            Color.FromArgb(10, 10, 10), // StatusStripDark
            Color.FromArgb(41, 41, 41), // ImageMargin
            Color.FromArgb(10, 10, 10), // ToolStripBegin
            Color.FromArgb(33, 33, 33), // ToolStripMiddle
            Color.FromArgb(54, 54, 54), // ToolStripEnd
            Color.FromArgb(178, 183, 191), // OverflowBegin
            Color.FromArgb(139, 147, 158), // OverflowMiddle
            Color.FromArgb(76, 83, 92), // OverflowEnd
            Color.FromArgb(76, 83, 92), // ToolStripBorder
            Color.FromArgb(10, 10, 10), //(47, 47, 47), // FormBorderActive
            Color.FromArgb(146, 146, 146), // FormBorderInactive
            Color.FromArgb(41, 41, 41), //(77, 77, 77), // FormBorderActiveLight
            Color.FromArgb(102, 102, 102), // FormBorderActiveDark
            Color.FromArgb(153, 153, 153), // FormBorderInactiveLight
            Color.FromArgb(171, 171, 171), // FormBorderInactiveDark
            Color.FromArgb(65, 65, 65), // FormBorderHeaderActive
            Color.FromArgb(167, 167, 167), // FormBorderHeaderInactive
            Color.FromArgb(42, 43, 43), // FormBorderHeaderActive1
            Color.FromArgb(74, 74, 74), // FormBorderHeaderActive2
            Color.FromArgb(146, 146, 146), // FormBorderHeaderInctive1
            Color.FromArgb(158, 158, 158), // FormBorderHeaderInctive2
            Color.FromArgb(255, 255, 255), // FormHeaderShortActive
            Color.FromArgb(167, 167, 167), // FormHeaderShortInactive
            Color.White, // FormHeaderLongActive
            Color.FromArgb(167, 167, 167), // FormHeaderLongInactive
            Color.FromArgb(88, 95, 104), // FormButtonBorderTrack
            Color.FromArgb(91, 105, 123), // FormButtonBack1Track
            Color.FromArgb(173, 199, 214), // FormButtonBack2Track
            Color.FromArgb(18, 18, 18), // FormButtonBorderPressed
            Color.FromArgb(0, 0, 0), // FormButtonBack1Pressed
            Color.FromArgb(65, 83, 102), // FormButtonBack2Pressed
            Color.White, // TextButtonFormNormal
            Color.White, // TextButtonFormTracking
            Color.White, // TextButtonFormPressed
            Color.White, // LinkNotVisitedOverrideControl
            Color.Purple, // LinkVisitedOverrideControl
            Color.Red, // LinkPressedOverrideControl
            Color.FromArgb(180, 210, 255), // LinkNotVisitedOverridePanel
            Color.Violet, // LinkVisitedOverridePanel
            Color.FromArgb(255, 90, 90), // LinkPressedOverridePanel
            Color.White, // TextLabelPanel
            Color.White, // RibbonTabTextNormal
            Color.FromArgb(41, 41, 41), // RibbonTabTextChecked
            Color.FromArgb(190, 190, 190), // RibbonTabSelected1
            Color.FromArgb(199, 250, 254), // RibbonTabSelected2
            Color.FromArgb(238, 239, 241), // RibbonTabSelected3
            Color.FromArgb(241, 241, 241), // RibbonTabSelected4
            Color.FromArgb(213, 217, 223), // RibbonTabSelected5
            Color.FromArgb(159, 156, 150), // RibbonTabTracking1
            Color.FromArgb(235, 194, 39), // RibbonTabTracking2
            Color.FromArgb(255, 255, 189), // RibbonTabHighlight1
            Color.FromArgb(249, 237, 198), // RibbonTabHighlight2
            Color.FromArgb(218, 185, 127), // RibbonTabHighlight3
            Color.FromArgb(254, 209, 94), // RibbonTabHighlight4
            Color.FromArgb(123, 111, 68), // RibbonTabHighlight5
            Color.FromArgb(54, 54, 54), // RibbonTabSeparatorColor
            Color.FromArgb(190, 190, 190), // RibbonGroupsArea1
            Color.FromArgb(210, 210, 210), // RibbonGroupsArea2
            Color.FromArgb(180, 187, 197), // RibbonGroupsArea3
            Color.FromArgb(235, 235, 235), // RibbonGroupsArea4
            Color.FromArgb(215, 219, 224), // RibbonGroupsArea5
            Color.FromArgb(174, 176, 180), // RibbonGroupBorder1
            Color.FromArgb(132, 132, 132), // RibbonGroupBorder2
            Color.FromArgb(182, 184, 184), // RibbonGroupTitle1
            Color.FromArgb(159, 160, 160), // RibbonGroupTitle2
            Color.FromArgb(183, 183, 183), // RibbonGroupBorderContext1
            Color.FromArgb(131, 131, 131), // RibbonGroupBorderContext2
            Color.FromArgb(190, 190, 190), // RibbonGroupTitleContext1
            Color.FromArgb(161, 161, 161), // RibbonGroupTitleContext2
            Color.FromArgb(101, 104, 112), // RibbonGroupDialogDark
            Color.FromArgb(235, 235, 235), // RibbonGroupDialogLight
            Color.FromArgb(170, 171, 171), // RibbonGroupTitleTracking1
            Color.FromArgb(109, 110, 110), // RibbonGroupTitleTracking2
            Color.FromArgb(10, 10, 10), // (79, 79, 79) // RibbonMinimizeBarDark
            Color.FromArgb(41, 41, 41), // (98, 98, 98) // RibbonMinimizeBarLight
            Color.FromArgb(182, 183, 183), // RibbonGroupCollapsedBorder1
            Color.FromArgb(112, 112, 112), // RibbonGroupCollapsedBorder2
            Color.FromArgb(64, Color.White), // RibbonGroupCollapsedBorder3
            Color.FromArgb(217, 217, 217), // RibbonGroupCollapsedBorder4
            Color.FromArgb(244, 244, 245), // RibbonGroupCollapsedBack1
            Color.FromArgb(200, 205, 212), // RibbonGroupCollapsedBack2
            Color.FromArgb(185, 192, 201), // RibbonGroupCollapsedBack3
            Color.FromArgb(235, 235, 235), // RibbonGroupCollapsedBack4
            Color.FromArgb(188, 193, 214), // RibbonGroupCollapsedBorderT1
            Color.FromArgb(116, 141, 187), // RibbonGroupCollapsedBorderT2
            Color.FromArgb(192, Color.White), // RibbonGroupCollapsedBorderT3
            Color.White, // RibbonGroupCollapsedBorderT4
            Color.FromArgb(246, 246, 246), // RibbonGroupCollapsedBackT1
            Color.FromArgb(214, 220, 228), // RibbonGroupCollapsedBackT2
            Color.FromArgb(203, 210, 221), // RibbonGroupCollapsedBackT3
            Color.FromArgb(235, 235, 235), // RibbonGroupCollapsedBackT4
            Color.FromArgb(160, 160, 160), // RibbonGroupFrameBorder1
            Color.FromArgb(194, 194, 194), // RibbonGroupFrameBorder2
            Color.FromArgb(239, 240, 241), // RibbonGroupFrameInside1
            Color.FromArgb(222, 225, 229), // RibbonGroupFrameInside2
            Color.FromArgb(214, 218, 223), // RibbonGroupFrameInside3
            Color.FromArgb(222, 225, 230), // RibbonGroupFrameInside4
            Color.FromArgb(255, 255, 255), // RibbonGroupCollapsedText (Old value 70, 70, 70)
            Color.FromArgb(158, 163, 172), // AlternatePressedBack1
            Color.FromArgb(212, 215, 216), // AlternatePressedBack2
            Color.FromArgb(124, 125, 125), // AlternatePressedBorder1
            Color.FromArgb(186, 186, 186), // AlternatePressedBorder2
            Color.FromArgb(43, 55, 67), // FormButtonBack1Checked
            Color.FromArgb(106, 122, 140), // FormButtonBack2Checked
            Color.FromArgb(18, 18, 18), // FormButtonBorderCheck
            Color.FromArgb(33, 45, 57), // FormButtonBack1CheckTrack
            Color.FromArgb(136, 152, 170), // FormButtonBack2CheckTrack
            Color.FromArgb(55, 55, 55), // RibbonQATMini1
            Color.FromArgb(100, 100, 100), // RibbonQATMini2
            Color.FromArgb(73, 73, 73), // RibbonQATMini3
            Color.FromArgb(12, Color.White), // RibbonQATMini4
            Color.FromArgb(14, Color.White), // RibbonQATMini5
            Color.FromArgb(100, 100, 100), // RibbonQATMini1I
            Color.FromArgb(170, 170, 170), // RibbonQATMini2I
            Color.FromArgb(140, 140, 140), // RibbonQATMini3I
            Color.FromArgb(12, Color.White), // RibbonQATMini4I
            Color.FromArgb(14, Color.White), // RibbonQATMini5I
            Color.FromArgb(141, 144, 147), // RibbonQATFullbar1                                                      
            Color.FromArgb(133, 135, 137), // RibbonQATFullbar2                                                      
            Color.FromArgb(93, 96, 100), // RibbonQATFullbar3                                                      
            Color.FromArgb(103, 103, 103), // RibbonQATButtonDark                                                      
            Color.FromArgb(225, 225, 225), // RibbonQATButtonLight                                                      
            Color.FromArgb(118, 128, 142), // RibbonQATOverflow1                                                      
            Color.FromArgb(55, 60, 67), // RibbonQATOverflow2                                                      
            Color.FromArgb(163, 168,
                170), // RibbonGroupSeparatorDark                                                      
            Color.FromArgb(230, 233,
                235), // RibbonGroupSeparatorLight                                                      
            Color.FromArgb(210, 217,
                219), // ButtonClusterButtonBack1                                                      
            Color.FromArgb(214, 222,
                223), // ButtonClusterButtonBack2                                                      
            Color.FromArgb(179, 188,
                191), // ButtonClusterButtonBorder1                                                      
            Color.FromArgb(145, 156,
                159), // ButtonClusterButtonBorder2                                                      
            Color.FromArgb(235, 235, 235), // NavigatorMiniBackColor                                                    
            Color.FromArgb(10, 10, 10), // GridListNormal1                                                    
            Color.FromArgb(41, 41, 41), // GridListNormal2                                                    
            Color.FromArgb(41, 41, 41), // GridListPressed1                                                    
            Color.FromArgb(61, 61, 61), // GridListPressed2                                                    
            Color.FromArgb(33, 33, 33), // GridListSelected                                                    
            Color.FromArgb(10, 10, 10), // GridSheetColNormal1                                                    
            Color.FromArgb(41, 41, 41), // GridSheetColNormal2                                                    
            Color.FromArgb(224, 224, 224), // GridSheetColPressed1                                                    
            Color.FromArgb(195, 195, 195), // GridSheetColPressed2                                                    
            Color.FromArgb(91, 91, 91), // GridSheetColSelected1
            Color.FromArgb(33, 33, 33), // GridSheetColSelected2
            Color.FromArgb(237, 237, 237), // GridSheetRowNormal                                                   
            Color.FromArgb(196, 196, 196), // GridSheetRowPressed
            Color.FromArgb(61, 61, 61), // GridSheetRowSelected
            Color.FromArgb(188, 195, 209), // GridDataCellBorder
            Color.FromArgb(91, 91, 91), // GridDataCellSelected
            Color.White, // InputControlTextNormal
            Color.FromArgb(167, 167, 167), // InputControlTextDisabled
            Color.FromArgb(137, 137, 137), // InputControlBorderNormal
            Color.FromArgb(204, 204, 204), // InputControlBorderDisabled
            Color.FromArgb(10, 10, 10), // InputControlBackNormal
            Color.FromArgb(102, 102, 102), // InputControlBackDisabled
            Color.FromArgb(78, 78, 80), // InputControlBackInactive
            Color.FromArgb(91, 91, 91), // InputDropDownNormal1
            Color.FromArgb(88, 88, 88), // InputDropDownNormal2
            Color.FromArgb(166, 166, 166), // InputDropDownDisabled1
            Color.Transparent, // InputDropDownDisabled2
            Color.FromArgb(41, 41, 41), // ContextMenuHeading
            Color.White, // ContextMenuHeadingText
            Color.FromArgb(54, 54, 54), // ContextMenuImageColumn
            Color.FromArgb(10, 10, 10), // AppButtonBack1
            Color.FromArgb(41, 41, 41), // AppButtonBack2
            Color.FromArgb(67, 66, 65), // AppButtonBorder
            Color.FromArgb(78, 78, 79), // AppButtonOuter1
            Color.FromArgb(47, 47, 47), // AppButtonOuter2
            Color.FromArgb(64, 64, 64), // AppButtonOuter3
            Color.FromArgb(107, 108, 113), // AppButtonInner1
            Color.FromArgb(67, 66, 65), // AppButtonInner2
            Color.FromArgb(38, 38, 38), // AppButtonMenuDocs
            Color.White, // AppButtonMenuDocsText
            Color.FromArgb(240, 241, 242), // SeparatorHighInternalBorder1
            Color.FromArgb(195, 200, 206), // SeparatorHighInternalBorder2
            Color.FromArgb(172, 172, 172), // RibbonGalleryBorder
            Color.FromArgb(218, 226, 226), // RibbonGalleryBackNormal
            Color.FromArgb(247, 247, 247), // RibbonGalleryBackTracking
            Color.FromArgb(195, 200, 209), // RibbonGalleryBack1
            Color.FromArgb(217, 220, 224), // RibbonGalleryBack2
            GlobalStaticValues.EMPTY_COLOR, // RibbonTabTracking3
            GlobalStaticValues.EMPTY_COLOR, // RibbonTabTracking4
            GlobalStaticValues.EMPTY_COLOR, // RibbonGroupBorder3
            GlobalStaticValues.EMPTY_COLOR, // RibbonGroupBorder4
            GlobalStaticValues.EMPTY_COLOR, // RibbonGroupBorder5
            Color.FromArgb(255, 255, 255), // RibbonGroupTitleText
            Color.FromArgb(225, 225, 225), // RibbonDropArrowLight
            Color.FromArgb(103, 103, 103), // RibbonDropArrowDark
            Color.FromArgb(137, 137, 137), // HeaderDockInactiveBack1
            Color.FromArgb(125, 125, 125), // HeaderDockInactiveBack2
            Color.FromArgb(46, 46, 46), // ButtonNavigatorBorder
            Color.White, // ButtonNavigatorText
            Color.FromArgb(76, 76, 76), // ButtonNavigatorTrack1
            Color.FromArgb(147, 147, 143), // ButtonNavigatorTrack2
            Color.FromArgb(66, 66, 66), // ButtonNavigatorPressed1
            Color.FromArgb(148, 148, 143), // ButtonNavigatorPressed2
            Color.FromArgb(91, 91, 91), // ButtonNavigatorChecked1
            Color.FromArgb(73, 73, 73), // ButtonNavigatorChecked2
            Color.FromArgb(201, 201, 201) // ToolTipBottom
        ];

You use this to create the main colours of the theme.

Arrays that you'd find in the 'base' classes

    private static readonly Color[] _appButtonNormal =
        [
            Color.FromArgb(243, 245, 248),
            Color.FromArgb(214, 220, 231),
            Color.FromArgb(188, 198, 211),
            Color.FromArgb(254, 254, 255),
            Color.FromArgb(206, 213, 225)
        ];

        private static readonly Color[] _appButtonTrack =
        [
            Color.FromArgb(255, 251, 230),
            Color.FromArgb(178, 178, 178),
            Color.FromArgb(176, 176, 176),
            Color.FromArgb(179, 179, 179),
            Color.FromArgb(160, 160, 160)
        ];

        private static readonly Color[] _appButtonPressed =
        [
            Color.FromArgb(235, 227, 196),
            Color.FromArgb(185, 185, 185),
            Color.FromArgb(35, 35, 35),
            Color.FromArgb(50, 50, 50),
            Color.FromArgb(100, 100, 100)
        ];

        private static readonly Color[] _buttonBorderColors =
        [
            Color.FromArgb(180, 180, 180), // Button, Disabled, Border
            Color.FromArgb(187, 186, 186), // Button, Tracking, Border 1
            Color.FromArgb(139, 139, 139), // Button, Tracking, Border 2
            Color.FromArgb(30, 30, 30), // Button, Pressed, Border 1
            Color.FromArgb(4, 3, 3), // Button, Pressed, Border 2
            Color.FromArgb(30, 30, 30), // Button, Checked, Border 1
            Color.FromArgb(4, 3, 3) // Button, Checked, Border 2
        ];

        private static readonly Color[] _buttonBackColors =
        [
            Color.FromArgb(250, 250, 250), // Button, Disabled, Back 1
            Color.FromArgb(250, 250, 250), // Button, Disabled, Back 2
            Color.FromArgb(91, 91, 91), // Button, Tracking, Back 1
            Color.FromArgb(129, 129, 129), // Button, Tracking, Back 2
            Color.FromArgb(121, 121, 121), // Button, Pressed, Back 1
            Color.FromArgb(91, 91, 91), // Button, Pressed, Back 2
            Color.FromArgb(91, 91, 91), // Button, Checked, Back 1
            Color.FromArgb(88, 88, 88), // Button, Checked, Back 2
            Color.FromArgb(41, 41, 41), // Button, Checked Tracking, Back 1
            Color.FromArgb(70, 70, 70) // Button, Checked Tracking, Back 2
        ];

PWagner1 · 2024-07-12T11:13:54Z

PWagner1
Jul 12, 2024
Maintainer Author

Official ribbon colours

O2k10

0 replies

giduac · 2024-07-12T11:46:44Z

giduac
Jul 12, 2024
Maintainer

@Wagnerp
cc.: @Smurf-IV & @Ahmed-Abdelhameed

Can you add some more information to the topic start:

About the things that prove problematic over and over again ?
Are there any ideas how things/work around theming can be simplified ?
Would it be possible to devise a standard way that aids in creating colour pairs ?
How many of those colour pairs are there in a theme ?

0 replies

PWagner1 · 2024-07-12T12:50:13Z

PWagner1
Jul 12, 2024
Maintainer Author

@giduac

About the things that prove problematic over and over again ?

Seems that there is a fundamental design flaw that dates back to 4.x, which does not go well with modern design shifts.

Are there any ideas how things/work around theming can be simplified ?

Better labelling of what each colour does, rather than random names. This can & should be part of https://github.com/Krypton-Suite/Standard-Toolkit-Online-Help. At the moment, it's like poking a stick in the dark & hoping for the best :)

Would it be possible to devise a standard way that aids in creating colour pairs ?

Might be better to completely overhaul how themes work, to have all colours for a theme in a separate file, possibly to use a key/value pair?

How many of those colour pairs are there in a theme ?

Counting all arrays, spanning 2 files per theme ~ 10 - 15?

cc. @Smurf-IV & @Ahmed-Abdelhameed

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How themes currently work #1608

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

How themes currently work #1608

PWagner1 Jul 6, 2024 Maintainer

Replies: 3 comments

PWagner1 Jul 12, 2024 Maintainer Author

giduac Jul 12, 2024 Maintainer

PWagner1 Jul 12, 2024 Maintainer Author

PWagner1
Jul 6, 2024
Maintainer

PWagner1
Jul 12, 2024
Maintainer Author

giduac
Jul 12, 2024
Maintainer

PWagner1
Jul 12, 2024
Maintainer Author