Is there a way to apply SASS stylesheets to an Angular 5 project conditionally.
For example, in my app.component.ts file I can set a variable theme = blue or theme = green and somehow tell Angular to use a different color scheme for the application?
I have been trying to figure out a way to do this for a long time. Does anyone have any ideas? Currently, I set the stylesheets in the Angular Cli config.
Related
I'm currently writing a NativeScript Angular application. Now I want to properly implement dark mode. (There is already some kind of automatic dark mode when using #NativeScript/Theme, but that doesn't work properly)
The way I currently style my components is:
I have a _variables.scss file where I declare variables (For example: $bg: #fff)
and a _app-common.scss file where common styles for labels buttons etc. are defined
and for every component it's own scss file using _variables.scss
I know that I can switch Theme using Theme.setMode()
How can I set the variables in _variables.scss according to the selected Theme?
I'm trying to implement switchable themes for a project, it's a Mendix project, but let's suppose it's a website.
There are many different pages, and different elements on each page.
All styles for them are written in SASS. The pages and elements use values from one separate SASS file with variables - variables-1.
I have a second SASS file with the same variables but different values - variables-2.
Problem:
I need to change the color theme of the website on a button click. So basically I need all the elements to take colors from the different set of variables when I click a button.
I see two options here:
Compile 2 css files and switch between them: link all sass files to variables-1, compile CSS file, then link all sass files to variables-2, compile second css file. Switch between them on a button click.
In this option, colors won't be assigned dynamically, and every time when I make changes I will have to manually link each sass file to different variables, or change variables values, and recompile everything. Also I won't be able to continue working on the project and switch themes at the same time.
Predefine color themes in mixins, compile css classes for each theme like in this article, and use some custom js logic to assign corresponding classes to the elements.
Most likely won't work, since there are too many elements in the project, and would be too complicated to change class for each one.
How can I solve this problem?
You can't dynamically change sass variables in the browser. Here is a more detailed explanation:
Changing variables values scss
A possible solution for you is to add or remove a class to the body that represents the theme. Then, for example, if body has class "dark-theme", background color is black and so on.
I decided to convert a landing page to an AngularJS website, because I needed to add an admin section. To separate the website section from the admin section, I created two modules: website and admin.
The original website has been made with Bootstrap 3, and has a style.css that is custom CSS for all the Bootstrap and the website in general.
On the Angular version, I can load the website properly after I installed Bootstrap 3, and in the root-level style.css I do the following :
#import './app/website/assets/css/style.css';
The issue is that I don't want this CSS to be loaded for the full website (website + admin). With this configuration, the admin section is also affected by the CSS.
The import only works if it is in style.css. If I move the import to the website module in the root component.css styles won't load at all.
I know it must have something to do something with style scoping and ng-deep.
EDIT: The only way I can have the website load properly with the CSS imports within its own module is :
encapsulation: ViewEncapsulation.None
As of right now, there is no way to import css at the module level. Global styles are applied globally, and the default ViewEncapsulation makes it so that component specific styles don't bleed out to the rest of the app.
If I move the import to the website module in the root component.css
styles won't load at all.
Importing that css at the modules root component only applies the styles to that one component. I also wouldnt look too hard at ng-deep as it is / will be deprecated https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Without knowing how many components are in WebsiteModule or what styles.css looks like, I'll present two options.
1) Rename styles.css (could get confusing since it's not going to be global anymore), import it in each of the components in WebsiteModule.
If that turns out to be too tedious (one bazillion components in WebsiteModule), then
2) I would take a good hard look at the styles.css in question, and see what styles should be applied globally.
Turning off ViewEncapsulation should be a last resort IMO.
TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?
I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:
<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>
And, normally you would just use a link tag to get the styles in there:
<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">
..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.
This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.
I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.
So far, I have been loving how low-configuration the build with vue-cli has been:
vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT
...but its output is always the two files:
./dist/vue-COMPONENT_NAME.js
./dist/vue-COMPONENT_NAME.css
Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?
I have the following module config for my Angular MD theme.
.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette(color).accentPalette('orange');
}]);
I want to be able to change the primaryPalette dynamically using the variable color (I want to use a themechanger on my site). However I can't seem to access the config section at runtime, and I also am not able to use the $mdThemingProvider anywhere out of the config section. Any ideas how to solve this?
https://material.angularjs.org/#/Theming/03_configuring_a_theme