Hi there,
this weekend I started to make the default jitsi theme customizable. The idea behind was, to leave as much as possible unchanged, but give us the possibility to adjust jitsi fast and simple on our customers design. What have I did?
First I defined a preset of css global variables:
:root {
--body-background-color: #474747;
--body-font-family: -apple-system, BlinkMacSystemFont, open_sanslight, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--body-font-size: 14px;
--body-font-weight: 400;
--body-text-color: #f1f1f1;
--body-line-height: 1.4285714286;
--text-dark-color: #333;
--text-light-color: #f1f1f1;
--small-font-size: 12px;
--small-text-color: #707070;
--heading-1-3-font-family: Times, serif;
--heading-1-3-color: #333;
--heading-4-6-font-family: Times, serif;
--heading-4-6-color: #333;
--link-color: #95a5a6;
--link-hover-color: #7f8c8d;
--link-active-color: #7f8c8d;
--primary-color: #0c2461;
--primary-light-color: #1e3799;
--primary-dark-color: #061230;
--secondary-color: #4a69bd;
--secondary-light-color: #6a89cc;
--secondary-dark-color: #25345e;
--success-color: #20bf6b;
--success-light-color: #26de81;
--success-dark-color: #105f35;
--info-color: #2d98da;
--info-light-color: #45aaf2;
--info-dark-color: #164c6d;
--warning-color: #f7b731;
--warning-light-color: #fed330;
--warning-dark-color: #7b5b18;
--danger-color: #eb3b5a;
--danger-light-color: #fc5c65;
--danger-dark-color: #751d2d;
--modal-background-color: lilac;
--modal-border-color: #7f8c8d;
--navigation-background-color: pink;
--navigation-border-color: #7f8c8d;
--poweredby-text-color: #707070;
}
After this I started to replace the hard coded definitions with variables in all.css. Then I defined different color sets (yellow, red, blue, green, light, dark). That means I generated css files only containing the color definitons as shown above and saved them with their respective color name (yellow.css, red.css etc.). At the beginning of the reworked all.css (with variables instead of hard coded definitions) I have only to import the preferred color.css now to change the complete appearance.
Remarking that there are many inline styles, e.g. the popup panels background styling, I created a overrides.css, that contains all inline style definitions that should be overwritten. Added an import line to all.css, to load all the overrides for the inline styles.
Here’s the actual content from overrides.css:
/* Inline Style > Setting Panel */
.itZGfB {
color: var(--text-light-color) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
padding: 20px 0px 4px;
}
/* Inline Style > Modal Panels Background */
.eoRGoR, .CvzNc {
background-color: var(--primary-light-color) !important;
border-radius: 3px;
box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px, rgba(9, 30, 66, 0.08) 0px 2px 1px, rgba(9, 30, 66, 0.31) 0px 0px 20px -6px;
color: var(--text-light-color) !important;
}
/* Inline Style > Filmstrip Text */
.tOoji {
color: var(--text-light-color) !important;
}
/* ALL.CSS > Welcome Page */
.welcome .header .tab-container {
min-height: 150px !important;
max-width: calc(100% - 40px) !important;
width: 680px !important;
background: #f3f3f3 !important;
border-top: 2px solid var(--primary-color);
padding: 25px 30px !important;
}
.welcome-page-content {
margin-top: 0 !important;
}
Here’s the actual result:
All the changed files are licensed under GPL and free available. We like to give something back to this great project and remarked, that a lot of discussions are in the community about adjusting the default theme.
At this point your feedback is appreciated: Do you have some wishes, critics, improvements, requests …?
Best regards,
Jürgen
