I want to add a couple of themes on my Angular app and I would like to let users to do it by theirselft.
I just want to make some changes to colours, so this should affect just few rows of my SCSS files:
styles.scss
html, body {
background-color: black;
}
app/app.component.scss
.title {
color: green;
}
.subtitle {
color: grey;
}
.text {
color: white;
}
How to make it changeable by the user at runtime?
I searched and searched on Google and even here on SO (for example this question), but all the answers deal with loading different style files at compile time, but this could not let users to change the theme when the app is running.
Related
We are using a class on the html-element to determine whether the user is in dark or light mode of the app.
<html class="dark-mode"></html>
This class is added using Renderer2 in a service that detects the selected setting of the user. This works fine so far.
Now, we have to adjust all the components to look good in the dark mode as well. But the problem is Angular's ViewEncapsulation.
What we thought would come in handy, is to simply update the SCSS of the component:
.headline {
color: black;
.dark-mode & {
color: white;
}
}
Or in plain CSS:
.headline {
color: black;
}
.dark-mode .headline {
color: white;
}
Now this doesn't work, because the class .dark-mode seems to be encapsulated, as expected.
How can we solve this problem?
:host-context provides access to css classes above the :host. By using :host-context you are able to check if any of the parents of the host have a specific css class and apply styling:
:host-context(.dark-mode) h2 {
color: white;
}
Documentation: https://angular.io/guide/component-styles#host-context
I don't know how to better name this topic
but idea is the following. I want to show different color for a component depends on a parent class.
for this project I use webpack, vue, vue-loader, sass.
I have a sass file this file contents all settings for pages what color should use for specific page
$colors: ".page-home" blue, ".page-about" green;
#each $i in $colors {
$page: nth($i, 1);
$color: nth($i, 2);
#{$page} .component_1, .component_2, .component_n {
color: $color;
}
}
I have a component is written as vue component
#import "colors";
.compoent_1 {
border:1px solid black
}
A issue is I have a lot of components and it very difficult to support the colors file in consistency. When I want to add a new component or remove an old one I always have to go to this file and edit it is annoying me
So how I see the solution is create a main file.
.page-home:blue;
.page-about: green;
I'd like write components in the following style
.component {
border:1px solid black;
color: $PAGE_COLOR;
}
and this code should generate
.page-home .component_1, .component_2, .component_n {
color: blue;
}
.page-about .component_1, .component_2, .component_n {
color: green;
}
thats all. thanks for any suggestion
I have a Gtk app I'm releasing for windows and I'm trying to do a little bit of syle via css. I put the following css (for tesing) in MYAPP\etc\gtk-3.0\gtk.css but nothing changes.
*
{
background-color: #FF0000;
color: #00FF00;
}
GtkMenuItem
{
color: #FF0000;
margin: 5px;
}
GtkTextView
{
background-color: #000000;
}
Is the file in the wrong location?
Yes, the location is wrong.
According to the documentation you should save it under datadir/share/themes/theme-name/gtk-3.0/gtk.css that, on Windows and supposing you are using the standard Adwaita theme, should be YOURAPP\share\themes\Adwaita\gtk-3.0\gtk.css.
I am in the process of creating a module for a WordPress theme which allows users to change the primary colour. Rather than doing an overkill and implementing a LESS compiler, I will do it this way:
Here's the original stylesheet:
.header a:hover
{
color: #fff;
width: 123px;
height: 456px;
}
.header
{
background-color: #000;
width: 100%;
height: 200px;
}
Now, I need a way to parse a stylesheet like the above and extract all styles that contain a certain colour. Maybe a tool where I can enter the colors "#fff" and "#000" which then extracts the following:
.header a:hover
{
color: #fff; // matched (removed the rest)
}
.header
{
background-color: #000; // matched (removed the rest)
}
This way, I could simply include the above in a PHP file and render the respective primary colours dynamically to override the default stylesheet.
Does anybody know if there's a tool for this? It would make it a lot easier than searching the colours manually and extracting the styles.
I would create a dynamic file in PHP and specify the header as CSS:
header('Content-Type: text/css');
Use echo to add lines to the current CSS file! Make variables for all the colors you want. You can pass the selected colors with GET or POST requests. Notice that if you browser-cache the CSS files you should exclude the dynamic ones!
I am learning the E4. Trying to add styling css to my simple RCP. I've use the TabFolder & TabItem in my code, but when I tried:
CTabFolder, CTabItem {
background-color: red;
}
It does not affect the UI, then I tried
TabFolder, TabItem {
background-color: red;}
This does not work, either.
I did a quick search in internet and found that all the samples are using CTabFolder, CTabItem. And nobody tells the TabFolder, TabItem
I got confused on it. What's the difference between them? And what kind of css could work properly for components TabFolder, TabItem?
I suggest you to use the CSS Spy and CSS Scratchpad, to see the available properties, and test the possible combinations.
For a list of SWT - CSS mappings for CTabFolder, you can visit this page: https://wiki.eclipse.org/E4/CSS/SWT_Mapping#Widget:_CTabFolder
Below, you can see a CSS with a simple example
CTabFolder Composite {
background-color: pink;
}
CTabFolder CTabItem {
background-color: lime;
color: green;
}
CTabFolder CTabItem:selected {
background-color: blue;
color: white;
}
And then see the result in the image below, applied using the CSS Scratchpad