How is this supposed to work?

Created on 28 November 2024, 21 days ago

Problem/Motivation

Sorry for the unspecific title, but I don't get how this theme is supposed to work.

I followed the instructions on https://docs.varbase.vardot.com/10.0.x/developers/theme-development-with... to create a subtheme and looked at the SCSS files and components. I then tried to just change some of the main colors in the theme. However, when I override variables in the supposed places, e.g. in _subthemename-variables.scss, they don't really seem to take effect. I can make it slightly work if I change some of the import orders in some files, but not consistently. For example, shouldn't a change of $primary change the primary color and derivatives everywhere?
Or maybe just as an example, how to change the background color of the footer, which is #084298 by default? I tried the variables I could find, but nothing worked.
If I change very basic things such as $body-bg, it seems to work on just some custom pages, not on any of the layouts or views for example.
I'm really confused by how this should work. Is there some example subtheme to vartheme_bs5 which demonstrates e.g. changing of the main colors? I think that would greatly help.

Best Greetings and thanks for your great work on Varbase

Steps to reproduce

Generate a subtheme from vartheme_bs5 and try overriding just the primary colors (e.g. buttons, links, CTAs, header, footer).

Proposed resolution

Remaining tasks

✅ File an issue about this project
❌ Addition/Change/Update/Fix to this project
❌ Testing to ensure no regression
➖ Automated unit/functional testing coverage
➖ Developer Documentation support on feature change/addition
➖ User Guide Documentation support on feature change/addition
➖ UX/UI designer responsibilities
➖ Accessibility and Readability
❌ Code review from 1 Varbase core team member
❌ Full testing and approval
❌ Credit contributors
❌ Review with the product owner
❌ Update Release Notes and Update Helper on new feature change/addition
❌ Release

Varbase update type

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

API changes

Data model changes

Release notes snippet

💬 Support request

Status

Active

Version

3.0

Component

Code

Created by

🇩🇪Germany scroogie

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @scroogie
Comment 16 days ago →
🇩🇪Germany scroogie
Okay, I found out that the footer color is set in the page-footer organism inside the components. While it uses $primary, it's not recompiled if I don't override it, so it stays the shaded original $primary color. That makes sense.

However, following the guide in https://docs.varbase.vardot.com/10.0.x/developers/theme-development-with... I'm not able to override it.

I copied the organism folder, added replaces: 'varbase_components:footer' in the page-footer.component.yml and uncommented the corresponding line in webpack.config.components.js. However, even if I hardcode values in that component, they don't take effect, no matter how often I run yarn components:build or yarn theme:full-build or whatever.

Does anyone have any idea what else I could try?
Comment 16 days ago →
🇩🇪Germany scroogie
Okay, got it. Sorry for the noise.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024