How to customize Confluence Data Center editor's color palette
Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.
Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Purpose
In some cases, you might like to change or edit the default Confluence editor's text color palette. Be it by limiting to certain colors only, or maybe add additional custom colors. This is how it looks like by default:
There is no simple configuration to change this, but it is still can be implemented by following the steps below.
Solution
The content on this page includes steps to customize or extend Atlassian software (adding/changing CSS rules, HTML, JavaScript, etc.). Per the Atlassian Support Offerings, support does not include customizations made to Atlassian products. Be aware that this material is provided for your information only and using it is done so at your risk.
If you have any questions about this or any customization, please ask the community at Atlassian Answers or consider working with an Atlassian Solution Partner.
We’ve released a dark theme in Confluence 9.0. The workaround below won’t work in Confluence 9.0, and all font colors on a page will default to the existing editor color palettes.
For Confluence 4.x up to Confluence 5.6.x
The following steps were tested against Confluence 4.3.3 and 5.2.3 as the time this document was written. There could be slight changes or difference in other versions.
Edit the following files
- You might either use a decent archiving tools that can auto update the ZIP/JAR files upon modification (e.g. WinRAR, 7zip in Windows, or GNOME Archiver tool in Linux), or follow How to edit files in Confluence JAR files
Modify these lines:
#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '800000','FF6600','808000','008000','008080','0000FF','666699','808080', 'FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','999999', 'FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','C0C0C0', 'FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF'])This site http://www.colorpicker.com/ can be handy in getting the hex color code you are looking for.
For example, this change:
#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '817339','827B60','C9C299','C8B560','ECD672','FFE87C','ECE5B6','FFF8C6'])will change the colour picker to be like this:
- Save it.
- Clear Confluence plugins cache
For Confluence 5.7 onwards The following steps were tested against Confluence 6.15.7. There could be slight changes or difference in other versions.
Edit the following file
For Confluence 5.7 and Above<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/atlassian-editor-x.x.jar/templates/color-picker.soyFor Confluence 8.x<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/com.atlassian.plugins.atlassian-editor-x.x.jar/templates/color-picker.soyLocate the following block:
{let $colors: [ [ 'hex' : '000000', 'name' : getText('tinymce.colorpicker.black') ], [ 'hex' : '993300', 'name' : getText('tinymce.colorpicker.burntOrange') ], [ 'hex' : '333300', 'name' : getText('tinymce.colorpicker.darkOlive') ], [ 'hex' : '003300', 'name' : getText('tinymce.colorpicker.darkGreen') ], [ 'hex' : '003366', 'name' : getText('tinymce.colorpicker.darkAzure') ], [ 'hex' : '000080', 'name' : getText('tinymce.colorpicker.navyBlue') ], [ 'hex' : '333399', 'name' : getText('tinymce.colorpicker.indigo') ], [ 'hex' : '333333', 'name' : getText('tinymce.colorpicker.veryDarkGray') ], [ 'hex' : '800000', 'name' : getText('tinymce.colorpicker.maroon') ], [ 'hex' : 'FF6600', 'name' : getText('tinymce.colorpicker.orange') ], [ 'hex' : '808000', 'name' : getText('tinymce.colorpicker.olive') ], [ 'hex' : '008000', 'name' : getText('tinymce.colorpicker.green') ], [ 'hex' : '008080', 'name' : getText('tinymce.colorpicker.teal') ], [ 'hex' : '0000FF', 'name' : getText('tinymce.colorpicker.blue') ], [ 'hex' : '666699', 'name' : getText('tinymce.colorpicker.grayishBlue') ], [ 'hex' : '7A869A', 'name' : getText('tinymce.colorpicker.gray') ], [ 'hex' : 'FF0000', 'name' : getText('tinymce.colorpicker.red') ], [ 'hex' : 'FF9900', 'name' : getText('tinymce.colorpicker.amber') ], [ 'hex' : '99CC00', 'name' : getText('tinymce.colorpicker.yellowGreen') ], [ 'hex' : '339966', 'name' : getText('tinymce.colorpicker.seaGreen') ], [ 'hex' : '33CCCC', 'name' : getText('tinymce.colorpicker.turquoise') ], [ 'hex' : '3366FF', 'name' : getText('tinymce.colorpicker.royalBlue') ], [ 'hex' : '800080', 'name' : getText('tinymce.colorpicker.purple') ], [ 'hex' : 'A5ADBA', 'name' : getText('tinymce.colorpicker.mediumGray') ], [ 'hex' : 'FF00FF', 'name' : getText('tinymce.colorpicker.magenta') ], [ 'hex' : 'FFCC00', 'name' : getText('tinymce.colorpicker.gold') ], [ 'hex' : 'FFFF00', 'name' : getText('tinymce.colorpicker.yellow') ], [ 'hex' : '00FF00', 'name' : getText('tinymce.colorpicker.lime') ], [ 'hex' : '00FFFF', 'name' : getText('tinymce.colorpicker.aqua') ], [ 'hex' : '00CCFF', 'name' : getText('tinymce.colorpicker.skyBlue') ], [ 'hex' : '993366', 'name' : getText('tinymce.colorpicker.redViolet') ], [ 'hex' : 'C1C7D0', 'name' : getText('tinymce.colorpicker.lightGray') ], [ 'hex' : 'FF99CC', 'name' : getText('tinymce.colorpicker.pink') ], [ 'hex' : 'FFCC99', 'name' : getText('tinymce.colorpicker.peach') ], [ 'hex' : 'FFFF99', 'name' : getText('tinymce.colorpicker.lightYellow') ], [ 'hex' : 'CCFFCC', 'name' : getText('tinymce.colorpicker.paleGreen') ], [ 'hex' : 'CCFFFF', 'name' : getText('tinymce.colorpicker.paleCyan') ], [ 'hex' : '99CCFF', 'name' : getText('tinymce.colorpicker.lightSkyBlue') ], [ 'hex' : 'CC99FF', 'name' : getText('tinymce.colorpicker.plum') ], [ 'hex' : 'FFFFFF', 'name' : getText('tinymce.colorpicker.white') ] ] /}You can add and remove colours from the above array. For example if you would like to add skyBlue, just add the following into the above array.
[ 'hex' : '0770e3', 'name' : getText('tinymce.colorpicker.skyBlue') ]Please note that not all colours has their labels defined in
tinymce.colorpicker. As such, to ensure that the colours would display with the correct labels you can instead add the colour into the array with this format[ 'hex' : '0770e3', 'name' : 'skyBlue']
- Save it.