Themes not working? Or Im doing something wrong here

[ScottLync]

Using latest https://github.com/ProfessionalWiki/chameleon/archive/refs/heads/master.zip

$egChameleonThemeFile = __DIR__ . '/themes/united.scss';
$egChameleonExternalStyleModules = [
	__DIR__ . '/themes/united_bootswatch.scss' => 'afterMain',
];

2 files from https://bootswatch.com/4/united/ to /var/www/html/themes/: _variables.scss renamed to -> united.scss _bootswatch.css renamed to -> united_bootswatch.scss

I tried clearing cookies, using other browsers. Theme is as default - white. Not getting any errors

[malberts]

What happens when you clear the MediaWiki SCSS cache as per these steps? https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#triggering-a-cache-update

[ScottLync]

What happens when you clear the MediaWiki SCSS cache as per these steps? https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#triggering-a-cache-update

LocalSettings.php at the end:

$egChameleonThemeFile = __DIR__ . '/themes/united/_variables.scss';

$egChameleonExternalStyleModules = [

__DIR__ . '/themes/united/_variables.scss' => 'afterFunctions',

__DIR__ . '/themes/united/bootstrap.min.css' => 'afterFunctions',

__DIR__ . '/themes/united/_bootswatch.scss' => 'afterMain',

];

\Bootstrap\BootstrapManager::getInstance()->addCacheTriggerFile( __DIR__ . '/united/_variables.scss' );

This should work? Nothing happens. Maybe im doing something wrong? I get no errors

[ScottLync]

Does anyone has this problem also?

[malberts]

There is not enough information here to debug anything.

Which version of MediaWiki are you using? Did you install with or without Composer? Can you confirm if you have the Bootstrap extension and the mediawiki/scss library? What is "Theme is as default - white."? Is that the default white Chameleon theme, or is that white as in no/broken styling? Did you try all 3 methods to clear the cache?

If you open your URL with ?debug=true while looking at your browser's developer tools, does it show any errors in the Chameleon CSS? If there is a SCSS compilation issue it will show an error when it tries to fetch the debug CSS:

[ScottLync]

I think its a mistake making just warnings instead of errors, on first setup page. I installed all its libraries, and it worked. If you call that \Bootstrap function to clear cache, you have to uncomment it.

That should be the problem for this.

..... Still dont know how to change nav bar and other components values. Need more tutorials for it

[krabina]

I am having the same problem. The themes only partly work. If I change from united to flatly, for example, the fonts and link colours change, but the navigation background does not change.

Software	Version
MediaWiki	1.35.5
PHP	7.4.27 (litespeed)
MariaDB	10.3.32-MariaDB
ICU	63.1
Lua	5.1.5
Chameleon	3.4.1 (6d731d0) 21:27, 16. Sep. 2021

[malberts]

This can probably do with better documentation. It's not that the theme is not working, it's rather because Chameleon has its own SCSS variables on top of the standard Bootstrap variables. Switching only the (non-Chameleon) theme won't affect those variables. In some cases you can try to override the Chameleon variables, in other cases you need to add additional Bootstrap classes.

For the NavbarHorizontal component, these are the Chameleon-specific colors (=light): https://github.com/ProfessionalWiki/chameleon/blob/f3f4358be03e4291131c485cb9e31be57424f7db/resources/styles/_variables.scss#L64-L66

Depending on what you want to do, e.g. if you wanted a dark navbar you can these 2 classes in the layout XML instead:

<component type="NavbarHorizontal" class="bg-dark navbar-dark">
    <component type="NavMenu"/>
    <component type="Menu" message="secondary-menu"/>
</component>

Some more info from the Bootstrap documentation: https://getbootstrap.com/docs/4.6/components/navbar/#color-schemes

[krabina]

While this works for the NavbarHorizontal, it does not work for the Pagetools, SearchBar and PersonalTools, and adding

<component type="PageTools" class="navbar-dark bg-primary flex-row" position="right" hideSelectedNameSpace="yes"/>

instead of just <component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/> does not change anything.

[malberts]

@krabina navbar-dark is a Bootstrap class that applies only to the navbar itself. Can you show a screenshot of what's happening and what you want to happen? Based on the above I assume some navbar components are still appearing as if they are supposed to be on a light navbar.

[krabina]

yes, exactly:

The main menu and footer are correct, Personal Tools, Page Tools menus are not and neither ist the search button.

[krabina]

I managed the search field and dropdown-menus, but can't get the font aweseome icons to change their color:

[krabina]

I finally managed. I think the trick was to set 'navbar-light-color' => "#f0f0f0"