When ever i use any element-plus component there is always a default style and color given to it.
for example
<el-button type="primary">Primary</el-button>
it has a default color of blue. changing the color of a button is easy but there are some components that are quite difficult to change their styling
I'm trying to find the main file where I can change the styling to my linking.
when I use inspect on the browser it tells me the index.css is in node-modules/element-plus/dist/index.css but when i navigate to the folder its not in there
In your style.css of your project you can create a class in which you override the element plus variables. Then you just need to add this class to the component which is supposed to have that style. This way you only make your changes in the style.css file and add them to the individual components (or your app div in index.html) using the custom class.
For example if you want to change the el-color-primary variable, you add this class in your style.css:
.custom-color-theme {
--el-color-primary: #80e268;
}
And add the custom-color-theme css class to the component which is supposed to use it (in this example a container with the loading animation:
<el-container
v-loading="loading"
element-loading-text="Loading..."
class="custom-color-theme"
> ...
</el-container>
This and more information is in their documentation: https://element-plus.org/en-US/guide/theming.html