We Keep Coding

Can I pass CSS Variables to Vuetify theme colors?

I'm using Vue 2 with Nuxt. How can I achieve that Vuetify puts everywhere, where the color is used a CSS Variable use var(--X)?
I want to dynamically change the colors of the Vue theme.
{
theme: {
themes: {
light: {
primary: 'var(--primaryColor)', // <== Put CSS Variables in here
secondary: 'var(--secondaryColor)'
},
},
},
}
When I'm doing this all the colors are just white #FFFFFF.

You're doing this configuration in nuxt.config.js I guess? That file have no idea about any kind of window or CSS so far.
You would need to either import hardcoded CSS variables from elsewhere or write them there directly (since it's quite at the apex, it's totally fine). The #fff fallback is probably a fallback in case of undefined or alike.
As of directly changing the colors of Vuetify, here is the section regarding the customization, I quote
Under the hood, Vuetify will generate css classes based upon these values that will be accessible in the DOM. These classes will follow the same markup as other helper classes, primary or secondary--text for example. If you supply an entire color object (as in colors.purple above), the lighten/darken variations will be used directly instead of being generated.
These values will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.
Updating those values could hence be done like that
// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'
// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'
PS: The great thing is that the lighten/darken variants will also be done for you.

React - Overlap css files

I have a theme feature in my web-app with two bootstarp css files, one for each theme. I wanna toggle between them but when the end result that they are overlapping.
handleThemeToggleClick(dark){
var new_theme = !this.state.dark_theme
if(new_theme)
{
import("./css/bootstrap-darkly.min.css");
this.setState({
dark_theme: new_theme,
});
}
else{
import("./css/bootstrap-simplex.min.css");
this.setState({
dark_theme: new_theme,
});
}
}
Is there a way to un-import a file in react? Please Help me

Un-importing the css file wouldn't make a difference. The css styles would've been applied already so they won't just go away unless the user refreshes the browser.
Instead you can re-write all your CSS properties so that your styles don't clash.

How to set 'local storage for attribute in jquery'?

I'm developing my own site and it supports multi themes for example (light & dark) theme when you click on option it apply theme and no problem to face but when you reload page you have then to choose theme again.
I've tried to fix that by adding key and value for local storage and I saw a lot of tutorials about it and no progress.
HTML Code
Head
<link rel=stylesheet" href="view/light-view.css">
default theme it will changes after user choose theme and replace light-view.css with theme name.
Body
<span class="mode-toggler" data-value="view/light-view.css">Light</span>
<span class="mode-toggler" data-value="view/dark-view.css">Dark</span>
set data-value into css default theme after click I achieve this by jquery
jQuery Code
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value");
});

So firstly you need to set in localstorage, the user selected theme:
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value"));
// set localstorage
localstorage.setItem("selectedTheme", $(this).attr("data-value"));
});
And when you load the webpage next time, you will have to check for selectedTheme even before your page has loaded. Just include this script in you head tag.
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = localstorage.getItem("selectedTheme") || "view/light-view.css";
document.head.appendChild(link);
</script>
But I am afraid that this might lead to a flicker because at first, the raw html(without CSS) will get painted in your browser and then the whole of CSS gets inserted and DOM repaints with CSS. You can solve this by removing theme related CSS in a separate file(say darktheme.css) and put all other CSS in a constant css file(styles.css). While the page loads, load it with styles.css and load the *theme.css through script tag.

ng2-ckeditor - how to customise the css loaded inside the editor itself?

I need to customise the ENTER key behaviour of ng2-ckeditor. I understand there is a config option as explained here.
However as that link explains, I should use custom css:
If you want to change it to control paragraph spacing, you should use
stylesheets instead. Edit the contents.css file and set up a suitable
margin value for <p> elements, for example:
p { margin: 0; }
According to this SO question I can load a custom CSS file using a config option, like this:
config.contentsCss = 'mystyles.css'
I tried adding a single file to my project and setting the config in angular 2 component, but the file does not appear to load.
private setConfig(): void {
this.ckConfig = {
height: '250',
extraPlugins: 'divarea',
contentsCss: '/theme/styles/ckeditor.css',
toolbar: [... toolbar configurations ...]
};
}
So how can I get ng2-ckeditor to load this file?

This breaks if you have the DIVAREA plugin activated
Edit (from comment):
This is because contentsCss does not load when using DIVAREA. Makes sense since the CSS would need to be scoped to inside the DIV (easy with iFrame).
Maybe new CSS layers could help here?
github.com/ckeditor/ckeditor4/issues/4640 github.com/ckeditor/ckeditor4/issues/4642

how to remove the style tags from the header section

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website

As of my understanding, you are using Angular Material Design and it is responsible for adding the style tags in your head section. It all happens under the hood, you can follow this link to know more. I think you no need to worry about removing this style tags and all because it came as functionality. Angular Material Design dynamically inject this style tags for theming purpose.
Reference: https://material.angularjs.org/latest/Theming/05_under_the_hood
Thank you.
EDIT
If you don't want to generate themes by default then you can use
$mdThemingProvider.generateThemesOnDemand(true);
Example:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider, $provide) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
$provide.value('themeProvider', $mdThemingProvider);
})
.run(['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
//create new theme
themeProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange')
.backgroundPalette('yellow');
//reload the theme
$mdTheming.generateTheme('default');
//optional - set the default to this new theme
themeProvider.setDefaultTheme('default');
}]);
Reference: https://material.angularjs.org/latest/Theming/04_multiple_themes

If you want to remove all the style tags :
var st = document.getElementsByTagName('style');
and add a loop to remove all of them.
for(i = 0 ; i < st.length ; i++){
st[i].parentNode.removeChild(st[i]);
}

Please Try with below JQuery code
$('style[md-theme-style]').remove();

Reason :
Angular-material includes some default theme css as a constant variable.
You can check here(angular-material.js).
When we load this library in the browser it adds lots of style tags dynamically into the <HEAD> section of the Page.
How to disable ?
You can override the constans.It will result in not adding theme classes on components.
angular(myApp, [ ngMaterial, myAppModules ]).constant("$MD_THEME_CSS","");
You can also look into the angular-material.js. This solution is also proposed in library itself.

Have you tried to disable theme generation before and then enable the one you want?
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
//themes are still defined in config, but the css is not generated
$mdThemingProvider.theme('altTheme')
.primaryPalette('purple')
.accentPalette('green');
//generate the predefined theme named altTheme
$mdTheming.generateTheme('altTheme');
});

When material.js loads into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:
git clone https://github.com/angular/material.git
Then install dependancies:
cd material
npm install
Then go to gulp/util.js and change line 53 from:
var jsProcess = series(jsBuildStream, themeBuildStream() )
to be:
var jsProcess = series(jsBuildStream)
Then run the build process:
gulp build