search

jaohara / ui-component-library

A Component library for various UI elements that I have built for use in my personal projects.
0 stars 0 forks source link

Import `globals.css` in main build entry point (`index.js`) #9

Closed jaohara closed 7 months ago

jaohara commented 7 months ago

Because I'm using Vite, I can include CSS directly as a module in my JS and it will be bundled in.

Normally, we want to include the globals.css file described in #8 via a <style> tag before other stylesheets are imported in the project's main HTML file. Because I'm intending to use this as a library, I need to import the stylesheet in the project's main entry point as defined in vite.config.js.

jaohara commented 7 months ago

Created a variables.scss file in /src/styles/ that holds all of the CSS custom properties, as well as the default light and dark theming. Dark mode is handled by adding a .dark class name to the root DOM element, and that will cause the variables to switch from the light mode vars to the dark mode vars.