Hi people
I find the dividers nice but visually confusing, as there is no difference between the title and the content/automation/whatever. So it would be great to darken the background of the separator a bit. This will create a more visual appealing ui, having a better ui sections.
Thanks
Great Idea ,
If you think it’s a good idea, you should vote for it. I did …
Suggested Reading:
More about Feature Requests .
If anyone really needs this:
customElements.whenDefined('ha-data-table').then(() => {
const Table = customElements.get('ha-data-table');
const { html, css } = Table.prototype;
const newStyle = css`
.mdc-data-table__cell.group-header {background-color: var(--primary-background-color);}`;
const newStyles = [].concat(Table.styles, newStyle);
Object.defineProperty(Table, 'styles', {value: newStyles, configurable: true, enumerable: false});
Object.defineProperty(Table, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
Just set any color if you do not like it.
home-assistant:dev
← ildar170975:data_table_collapsible_background
opened 12:22AM - 15 Oct 24 UTC
<!--
You are amazing! Thanks for contributing to our project!
Please, DO N… OT DELETE ANY TEXT from this template! (unless instructed).
-->
## Breaking change
<!--
If your PR contains a breaking change for existing users, it is important
to tell them what breaks, how to make it work again and why we did this.
This piece of text is published with the release notes, so it helps if you
write it towards our users, not us.
Note: Remove this section if this PR is NOT a breaking change.
-->
## Proposed change
Added a different background for collapsible rows.
Before:
![image](https://github.com/user-attachments/assets/6b87918e-6966-436f-a074-36332f8f5092)
![image](https://github.com/user-attachments/assets/03eb6033-15db-423d-a43d-1db5b3a85f47)
After:
![image](https://github.com/user-attachments/assets/27a00488-b029-4296-8846-c7183759fb4d)
![image](https://github.com/user-attachments/assets/7ca100eb-b8fd-4a63-a805-ceaf19067d2a)
## Type of change
<!--
What type of change does your PR introduce to the Home Assistant frontend?
NOTE: Please, check only 1! box!
If your PR requires multiple boxes to be checked, you'll most likely need to
split it into multiple PRs. This makes things easier and faster to code review.
-->
- [ ] Dependency upgrade
- [ ] Bugfix (non-breaking change which fixes an issue)
- [ ] New feature (thank you!)
- [ ] Breaking change (fix/feature causing existing functionality to break)
- [ ] Code quality improvements to existing code or addition of tests
## Example configuration
<!--
Supplying a configuration snippet, makes it easier for a maintainer to test
your PR.
-->
```yaml
```
## Additional information
<!--
Details are important, and help maintainers processing your PR.
Please be sure to fill out additional details, if applicable.
-->
- This PR fixes or closes issue: fixes #
- This PR is related to issue or discussion:
- Link to documentation pull request:
## Checklist
<!--
Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If you're unsure about any of them, don't hesitate to ask.
We're here to help! This is simply a reminder of what we are going to look
for before merging your code.
-->
- [x ] The code change is tested and works locally.
- [ ] There is no commented out code in this PR.
- [ ] Tests have been added to verify that the new code works.
If user exposed functionality or configuration variables are added/changed:
- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
<!--
Thank you for contributing <3
-->
[docs-repository]: https://github.com/home-assistant/home-assistant.io