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?
Related
Hi I am using Tailwind Components and is looking very good, but the buttons are not working (the buttons on the navbar when you resize), I didn't put the JavaScript because I did not find it.
https://tailwindui.com/components
I am using this one
https://www.dropbox.com/s/cfs78mm0cozfwql/Screenshot%202020-06-25%2016.52.59.png?dl=0
The buttons in the tailwind components are skeleton buttons. Tailwind only provides css not the js (action) part of it. You will have to create your own javascript code for that.
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.
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.
When I use Aptana in Eclipse, I like the Cobalt theme for my Javascript. However, this theme ends up making my SVN diff-ing nearly impossible for my Java files, because the background is dark blue, and the text is black in the compare editor.
I've look all over the preferences in Eclipse, and can't figure out a way to only use the Aptana Cobalt theme for editing my Javascript files.
Here are the things I've tried:
- I've made the Aptana JavaScript editor the default for ".js" files
- I've made the default for ".txt" and ".java" the normal editors (non-Aptana, whatever they are)
- I've tried setting the theme, and making sure that General > Appearance > Colors and Fonts still has all the defaults
- I've verified that if I changed the theme to something with a white background, my diff-ing editor gets changed and becomes readable
What else can I do?! I just want to use Aptana for Javascript, not my default diff theme.
I had the same problem. No idea wether it has been resolved yet, but I found a temporary solution which might help. I changed the default editor for Javascript in Preferences > General > Editors > File Associations. When you select ".js" from the upper list, you'll see all the possible editors in the bottom list. I made "Javascript Source Editor" my default editor. This editor uses the default theme settings.
There currently isn't a way to achieve this. I would suggest to create a JIRA ticket at http://jira.appcelerator.org/browse/APSTUD.