search

Armaldio / ttv-desktop-lite

The Lightweight Desktop App For Twitch.TV
MIT License
2 stars 0 forks source link

Change Deep CSS Styling For Specific Elements #34

Closed TheRealDannyyy closed 6 years ago

TheRealDannyyy commented 6 years ago

Some things like buttons cannot be edited using traditional CSS. A manual "Theme change" on the 3rd party design website or another workaround is needed.

Armaldio commented 6 years ago

For everything that is related to colors, there is a theme file: twitchy-desktop-lite\src\theme\theme.js You can define key-pair values of colors: primary: '#6441a5',

To use it in html, just add a class like this: class="primary" and the backgrnoud color will be of the same colored you defined in the config file. If you want to apply the color to the text, use class="primary--text" If you want to vary tones, you can use the following: class="text--{lighten|darken}-{n}" (ex: class="text--darken-3")

For more information: https://vuetifyjs.com/en/style/colors

TheRealDannyyy commented 6 years ago

I did some really dirty CSS workarounds. I managed to edit the buttons but the text coloring inside the textarea + labels is impossible to change.

Any suggestions?

TheRealDannyyy commented 6 years ago

Implemented textarea coloring workaround using CSS filters. Menu design work is done for now. Closing.