I am trying to change theme in my project with the following code in the app.scss file
It seems that if I just have the first set of two #imports, the $base-color: green does not take effect. If I have just the second set of #imports, it looks fine.
If I have both the set of #imports, there appears to be a hybrid theme in some way between cupertino and the default, but in green. I don't understand why the second one won't supercede the first one
$base-color: green;
#import 'sencha-touch/cupertino-classic';
#import 'sencha-touch/cupertino-classic/all';
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
Related
How can I override some default values from primereact e.g. the primary color?
I read that i have to override the values by adding the following code in the proviced override.scss
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
Unfortunately, my changes are not applied when working with e.g. a button-class (which is working with the primary color). I also read that the overrides must happen before the actual class is created.
How can I do that? Do I need to run a SCSS-command?
In my remember, You can override variables in overrides/_layout_variables.scss or overrides/_theme_variables.scss files. Also you may need to upgrade your version to the latest.
You can override variable for some more specific rule
e.g.
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
.somePage {
--primaryColor: blue;
// So primaryColor will be blue for all rules in scope of .somePage
}
Well to overwrite SCSS/SASS/LESS variables in general you could do the following (The process does also work with less instead of .scss)
Create a new .scss file
Instead of directly including the frameworks (doesnt matter which one you use) .scss include your OWN created .scss file (step 1)
Import the framework's .scss file in your own, custom .scss file
Compile your own .scss file using e.g. node-sass
Example of your own .scss file
#import "node_modules/path_to_the_libaries_scss_file.scss";
// Overwrite colors like this:
$primary-color: #ff5b00;
This have been asked several times but I can't seem to get an updated answer.
I've been trying to load a fontawesome icon in my .scss and I specifically followed this instruction https://fontawesome.com/how-to-use/on-the-web/using-with/sass but I'm still just getting squares.
Here are my codes
_fontawesome.scss
#import './scss/fontawesome.scss';
#import './scss/solid.scss';
.user {
#extend %fa-icon;
#extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}
index.js
<span className="user" />
_variables.scss
$fa-font-path: "../webfonts" !default;
My directory
public/
fontawesome/
scss/
webfonts/
_fontawesome.scss
If it helps, I'm using this for react and I can perfectly use FontAwesome as a component using npm, but I have this case where I need to use it in the scss.
Please help! Thank you!
how you don't use the font awesome CDN ? it's works perfectly for me.
And it would keep you from getting bored with it :(
something like that to your and it's works:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
I'll take a closer look at your problem, but tomorrow because it's to late :p
I am trying to create a custom theme by changing the default colors on carbon.
I have imported the carbon components scss files and I set the variable $carbon-theme as recommended but it is not working. I have imported them in my main index.scss file. I would eventually like to change the color variables and create a customized theme.
This is my index.scss file
#import 'carbon-components/scss/globals/scss/styles.scss';
#import '#carbon/themes/scss/themes';
#include carbon--theme($carbon--theme--g100);
body {
background-color: $ui-02;
}
This is the mixin I am trying to create.
#mixin custom-color {
$focus: green;
}
The above does not work. The theme does not change to the expected dark gray background. How do I do this? Also, how would I create the mixin to set other colors?
#import '#carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
#include carbon--theme();
#import 'carbon-components/scss/globals/scss/styles.scss';
body {
background-color: $ui-02;
}
And not put it into index.scss, put it into App.scss and import it in App.js
works for me, hope this work.
I'm styling a MERN project and I'd like to change the default font that Reactstrap (https://reactstrap.github.io/) uses for my React frontend. I've found some answers for changing the default Bootstrap 4 fonts, but I'm not sure how (or if) to apply those to Reactstrap -- any help or leads much appreciated!
You can import a css file in the entry file of the application. The css file can contain #import tags to load your custom font. Then you can set the font-family in the body selector tag.
# In entry file
import '/assets/css/mycssfile.css';
# In mycssfiles.css
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', sans-serif;
}
I found I can use this css link:
https://unpkg.com/#blueprintjs/core#^1.11.0/dist/blueprint.css for blueprint. Where do I get the CSS for the datetime module from?
It looks like this at the moment:
You must import the correct styles for DateRangeInput
#import "~normalize.css/normalize.css";
#import "~#blueprintjs/icons/lib/css/blueprint-icons.css";
#import "~#blueprintjs/core/lib/css/blueprint.css";
#import "~#blueprintjs/datetime/lib/css/blueprint-datetime.css";
i have already these
#import "~normalize.css";
#import "~#blueprintjs/core/lib/css/blueprint.css";
#import "~#blueprintjs/icons/lib/css/blueprint-icons.css";
added these css
#import "~#blueprintjs/datetime/lib/css/blueprint-datetime.css";
date picker working as well