Chameleon skin theme not loading properly

[Newman22]

MediaWiki version: 1.36.2
PHP version: 7.4.33 (fpm-fcgi)
Chameleon version: 4.0.0
Bootstrap (extension) version: 4.5.0

Hello. I finally installed dependencies on Chameleon, however there is something wrong. I noticed that the theme for my skin is not loading properly. The skin appears to be stripped down to basics, even when I tried to customize it (see the screenshot). Does anything seem to be missing? How do I fix the navigation bar? Thank you for reading.

[WouterRademaker]

We need a little more information to help you.
How and why did you choose these versions of Chameleon and Bootstrap?
How did you apply the theme?

[Newman22]

I chose those versions of Chameleon and Bootstrap because they were the latest versions available at the time I downloaded them, and I thought it was suitable with the version of MediaWiki I am currently using on my wiki family.

I read the Customization document and applied the theme by downloading the SCSS files from Bootswatch's website, and then uploading them to my skin's /themes directory and adding them to my Localsettings.php. I also added layouts to my Localsettings.php.

Here is the code that I put in my Localsettings.php:

$egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/standard.xml';
$egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/navhead.xml';
$egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/clean.xml';

$egChameleonExternalStyleModules = [
	__DIR__ . '/skins/Chameleon/resources/styles/themes/darkly.scss' => 'afterFunctions',
	
	__DIR__ . '/skins/Chameleon/resources/styles/themes/darkly_bootswatch.scss' => 'afterMain',
	
];

[malberts]

@Newman22 Does the default skin look correct when you remove your customisations?

Look at the documentation for using custom themes: https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#changing-styles-themes
You are incorrectly adding both SCSS files in $egChameleonExternalStyleModules but you should use $egChameleonThemeFile.

Also, make sure you are getting the Bootswatch 4.x version of the SCSS file and not the 5.x version. The latter will probably break since some variables changed between Bootstrap 4 and 5.

[iamkloudz]

@Newman22 Does the default skin look correct when you remove your customisations?

Look at the documentation for using custom themes: https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#changing-styles-themes You are incorrectly adding both SCSS files in $egChameleonExternalStyleModules but you should use $egChameleonThemeFile.

Also, make sure you are getting the Bootswatch 4.x version of the SCSS file and not the 5.x version. The latter will probably break since some variables changed between Bootstrap 4 and 5.

I duplicate exactly what's in the example. Actually it doesn't show correctly. The nav bar is gray. And the texts are orange, unlike how the theme shows.

[Newman22]

Actually, I finally fixed it, so the skin is now loading properly on my installation. I think there was something wrong with the require versions and the ComposerPackageModifier.php file.

@Newman22 Does the default skin look correct when you remove your customisations?

Look at the documentation for using custom themes: https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#changing-styles-themes You are incorrectly adding both SCSS files in $egChameleonExternalStyleModules but you should use $egChameleonThemeFile.

Also, make sure you are getting the Bootswatch 4.x version of the SCSS file and not the 5.x version. The latter will probably break since some variables changed between Bootstrap 4 and 5.

Actually, I finally fixed it, so the skin is now loading properly on my installation. I think there was something wrong with the require versions and the ComposerPackageModifier.php file. Thank you for the advice though.