Ik vind de standaard blauwe kleuren van de header achtergrond aan de rechterkant niet mooi, zien er verbleekt uit (foto's onder), ik heb ze aangepast via een extra custom.css, ook de witte achtergrond aangepast door transparante motor foto, 10% doorlatend. Je kunt sinds december 2020 in de template nu ook een alternatieve kleur kiezen, bordeaux rood.
Hoe stel je de alternatieve kleur in, System, Site template styles, Cassiopeia defauts, Advanced, color theme: Alternative.

Verder heb ik de Menu kleuren aangepast, een Knop met afgeronde rand gemaakt, extreem grote titel van artikel h1 en Bold aangepast
en het edit icoon aangepast

Foto 1 Alternatieve bordeaux rode J 4 kleur, foto 2 mijn kleuren en achtergrond met blauw menu, foto 3 standaard blauw J 4
Hoe stel je de alternatieve kleur in, System, Site template styles, Cassiopeia defauts, Advanced, color theme: Alternative.


De lelijke standaard kleuren.

Aanpassen via custom.CSS Op de een of andere manier hadden aanpassingen in de standaard templates.css files geen effect (cache buffer legen) en ik las ergens dat je een eigen custom.css moet aanmaken met aanpassingen.
Naar deze custom.css moet ook verwezen worden dus ook verwijzing toegevoegd in index.php van de template.
Ik las recent dat sommige editors de naam custom.css al gebruiken, heb er daarom nu mycustom.css van gemaakt.

De verwijzing in templates/cassiopeia/index.php
JHtml::_('stylesheet', 'mycustom.css', array('version' => 'auto', 'relative' => true));  /* extra regel in index.php op regel 45 */

mycustom.css in map: templates/cassiopeia/css/mycustom.css
ik heb een eigen gemaakte witte transparante achtergrond met motorafbeelding toegevoegd, en heb de blauwe headerkleuren aangepast van lelijk paars naar blauw.
De foto, in een fotobewerkingsprogramma kies nieuw, afbeelding 1920x1080 transparant, vul de achtergrond met wit, de motorfoto is ook 1920x1080, kopieer de foto, ga naar de transparante foto, plak als nieuwe layer, kies bij transparantie 90% (-10%), kies opslaan als bg2.jpg. Upload naar templates/cassiopeia/images/

inhoud mycustom.css
body {
    background: #fff  url(../images/bg2.jpg)  repeat top center ;      /*  motor afbeelding transparant wit foto 10% */
    background-attachment: fixed;       }             /*   extra   */

H1, H2, H3,.... zijn extreem groot, Titel artikel was H2, nu H1, titel artikel was 2.5rem nu 1.3rem beter... er is nu ook verschil tussen kleiner of groter scherm. Het varieert wanneer je het volledig scherm langzaam kleiner maakt.... in mijn aanpassing was de titel alleen bij volledig scherm kleiner! Nu ook variabele titel aangepast, dat is die cal(1.1rem + 0.2vw) samen 1.3 rem.
in mycustom.css h1, h2, h3.... aangepast; 
9-3-2021 LET OP lettergrootte titel werd bepaald door h2, nu door H1 waardoor extreem groot, 2.5rem!

h1, .h1 {
  font-size: calc(1.1rem  + 0.2vw);       /* was  1.375rem + 1.5vw  nu 1.1rem + 0.2vw gelijk aan H1 bij 1200 scherm */
  color: #016799;        /* extra om de titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 1.3rem;        /* 2.5 was veel te groot nu 1.3 */
  color: #016799;        /* extra om de titelkleur artikel aan te passen */
  }
}

h2, .h2 {
  font-size: calc(1.1rem + 0.1vw);  /* was  1.2821rem + 0.3852vw  nu 1.1rem + 0.1vw gelijk aan H2 bij 1200 scherm */
  color: #016799;        /* extra was titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.2rem;        /* 2rem was veel te groot nu 1.2 */
  color: #016799;        /* extra was om de titelkleur artikel aan te passen */
  }
}

h3, .h3 {
  font-size: calc(1.0rem + 0.15vw);   /* was  1.3rem + 0.6vw  nu 1.0rem + 0.15vw gelijk aan H3 bij 1200 scherm */
  color: #016799;        /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.15rem;        /* 1.75 was veel te groot 1.15 */
  color: #016799;        /* extra om kleur H3 aan te passen */
  }
}


h4, .h4 {
  font-size: calc(1.0rem + 0.1vw);   /* was 1.275rem + 0.3vw  nu 1.0rem + 0.1vw gelijk aan H3 bij 1200 scherm */
  color: #016799;            /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.1rem;         /* 1.5 was veel te groot 1.1 */
  color: #016799;        /* extra om kleur H4 aan te passen */

  }
}


h5, .h5 {
  font-size: 1.05rem;        /* 1.25rem standaard nu 1.05 aangepast  */
  color: #016799;        /* extra om kleur H5 aan te passen */
}

h6, .h6 {
  font-size: 1.0rem;        /* 1rem standaard nu 1.0 aangepast  */
  color: #016799;        /* extra om kleur H6 aan te passen */
}

                   /*   EXTRA  dit is om de te vette tekst minder vet te maken bij titels, was 700 nu 600 in font weigth: var   700  */
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-weight: var(--cassiopeia-font-weight-headings, 600);
}

b, strong {
color: #016799;            /* extra om de vetgedrukte tekst een zachtere en eigen kleur geven, blauw op deze site */
font-weight: 600 !important;  /* extra om de vetgedrukte tekst iets minder vet te maken font-weight: 600 was 700? */
}

In het origineel is h6 nu 1 rem, h5 1.2 en wordt extreem groot, titel h1 2.5 belachelijk groot.

Mijn h1 met kleurtje

Mijn h2 met kleurtje

Mijn h3 met kleurtje

Mijn h4 met kleurtje

Mijn h5 met kleurtje
Mijn h6 met kleurtje

 

Font Wijzigen Je kunt onder system, site template styles, cassiopeia defaults, bij advanced  de fonts aanpassen.
OP dit moment gebruik ik gewoon de standaard font, bij System, site template styles, cassiopeia defaults,
bij advanced, Fonts Scheme: None    is gewoon goed leesbaar, niks aan doen.

Of je kunt de font in je eigen custom.css doen;  {
 font-family: "Fira Sans", Arial, sans-serif;   /* Font veranderen, standaard: "Fira Sans", Arial, sans-serif  of   */
Het best leesbaar lijkt Arial, dat kies je zo:
 font-family: Arial, sans-serif;  } /* Font veranderen, of kies deze: Arial, sans-serif, "Fira Sans"  */
 
OP dit moment gebruik ik de standaard font, bij System, site template styles, cassiopeia defaults, bij advanced, Fonts Scheme: None    gewoon goed leesbaar, niks aan doen.

De blauwe headerkleuren aanpassen
Deze info is nu ook beschikbaar.....
Omdat je nu ook in Cassiopeia een andere alternatieve kleur kunt kiezen wordt het nu veel makkelijker de kleuren aan te passen. De code daarvoor heb ik gekopieerd naar mijn custom file en daar pas je de 3 kleuren aan. De Code;

.container-header {
  position: relative;
  z-index: 10;
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

:root {
  --cassiopeia-color-primary: #016799;   /* kleur 1 links bg 016799 algemene basis kleur aanpassen   */
  --cassiopeia-color-link: #01349B;        /*  224faa  link algemene basis kleur aanpassen   */
  --cassiopeia-color-hover: #1b578f;      /*  kleur 2 rechts 1b578f en hover algemene basis kleur aanpassen   */
}

Menu in kleur
Nog wat eigen aanpassingen, Menu in kleur of Transparant kan ook.
De info over hoe menu aan te passen is nog niet beschikbaar, nog in bewerking.
Menu kleur achtergrond nu in het blauw, link wit

Top menu dropdown menu
Normaal witte achtergrond blauwe links, nu ook blauwe achtergrond gemaakt met witte links.
De info over hoe menu aan te passen is nog niet beschikbaar, nog in bewerking.

22-03-2021 Update edit bugje, het staat er nog steeds doorheen maar het is transparant gemaakt, voor mij nog niet helemaal de oplossing maar er wordt aan gewerkt, alleen nog probleem bij top Menu, footer en main-bottom, de rest acceptabel. Mijn oplossing

Laatste beta 7 versie, update beta 7 van 22-01-2021. Bug edit iconen dwars door alles heen indien ingelogd.
Dat ze door alles heen stonden was al zo maar nu ook witte achtergrond, ook in standaard template.
In sommige modules zoals Login, Zoeken (op positie:sitebar-), hoofdmenu kun je het edit bugje oplossen door title weergave op aan te zetten, dit helpt niet bij top-menu positie: menu
Dit bugje is overigens alleen zichtbaar voor de administrator indien ingelogd voorzijde, dus niet zo belangrijk.

Ik heb via mycustum.css het volgende aangepast

/*    de edit knop staat over de tekst van menu, search en sitemenu-'s heen, oplossing voor nu; */

.btn.jmodedit {
  position: absolute;    /* oud op relative, nu weer op  org: absolute */
  top: 15px;        /* was 0, nu 15px ter voorkomen van tekst over elkaar in top-menu  */
  right: 0; 
  left: auto;
  z-index: 900;
  color: #7AC143;    /* extra groene tekst 7AC143 was color: var(--cassiopeia-color-link); */
  background-color: rgba(255, 255, 255, 0.0);   /*  bg kleur met optie transparantie, kleur 255 3x en transparantie van 0.0 tot 0.99.  zet border ook op 0 indien bg 0.0  */
/* background-color: transparent; OUD, new zie hierboven,  was white nu transparent, popup witte bg kleur van edit knop  */
  border: 0px solid #dfe3e7;        /* border 2 nu op 0 */
  border-radius: 0.25rem;        /* nvt indien border 0 */

}

Dat ziet er dan zo uit... update 25 maart 2021

Eigen knop met of zonder rand

Knop met afgeronde rand - Code in de link: id="boventitel"

Knop zonder rand - Code in de link: id="boventitel100"

In het mycustom.css bestand;
#boventitel
{
background-color:#016799;       /* maakt knop met border met blauwe achtergrond    background-color:#1b578d;      */ 
color: #ffffff;                         /* link kleur wit #ffffff   */
text-decoration: none;          /* onderlijnen uit */
padding: 4px 5px 4px 5px;       /* bepaald ruimte om tekst  4px 5px 4px 5px     */
border: 2px solid #CCCCCC; /* border grote 2   */
border-radius: 0.35rem;        /* afgeronde rand */
line-height: 2.5em;             /* extra ruimte onder blauwe vak voor de tekst, hierdoor bij td boventitel een mindere ruimte opgeven  */
}

#boventitel100    /*  om link in table wit te maken    */ Opmerking zie ook info Tabel maken
{
background-color:#016799;        /* blue #1a799e  fel  0a7ede  5488b4  0099cc 537FAE  1B94BB nu 016799  */ 
color: #ffffff;                           /* link kleur wit #ffffff   */
padding: 4px 5px 4px 5px;       /* bepaald ruimte om tekst  4px 5px 4px 5px     */
text-decoration: none;            /* onderlijnen aan of uit werkt */
border: 0px solid #CCCCCC; /* border grote uit 0   */

}

* De naam 'boventitel' is gebruikt omdat dit in al mijn joomla 3.9 sites ook zo is, zodat ze bij migratie naar joomla 4 ook nog werken. Ze werden als losse knop gebruikt maar ook om de tabelkleuren aan te passen, het is mogelijk dat dit nog conflicten geeft met joomla 4 tabel.