https://github.com/oruga-ui/theme-oruga

🦋 Customization of Oruga components with a custom styling
https://github.com/oruga-ui/theme-oruga

css oruga theme ui ux

Last synced: 3 months ago
JSON representation

🦋 Customization of Oruga components with a custom styling

• Host: GitHub
• URL: https://github.com/oruga-ui/theme-oruga
• Owner: oruga-ui
• License: mit
• Created: 2023-07-11T11:06:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-08T15:39:24.000Z (3 months ago)
• Last Synced: 2024-11-09T12:03:58.880Z (3 months ago)
• Topics: css, oruga, theme, ui, ux
• Language: SCSS
• Homepage: https://oruga-ui.com
• Size: 472 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


    





  🦋 Default theme for Oruga without any dependencies





    

        

    

    

        

    

    

        

    

    

        

    



### Install

```sh

npm install @oruga-ui/theme-oruga

```

or

```sh

yarn add @oruga-ui/theme-oruga

```

### Configure

```js

import { createApp } from 'vue'

import App from './App.vue'

// import Oruga

import Oruga from '@oruga-ui/oruga-next'

// import Oruga theme styling

import '@oruga-ui/theme-oruga/dist/oruga.css'

createApp(App)

    .use(Oruga)

    .mount('#app')

```

The Oruga Default theme uses the default classes set by Oruga and doesn't come with any JS configuration at all. The `oruga.css` contains the full Oruga style (the default style used for documentation). 

### Customization (SASS/SCSS)

For customasing any SASS variables you have to set them pefore the SCSS Import.

```scss

// Include any default variable overrides here (though functions and maps won't be available here)

// ...

// Include the full Oruga theme here

@import "/node_modules/@oruga-ui/theme-oruga/dist/scss/oruga";

// Then add additional custom code here

// ...

```

### Override default config

In case you want to replace the default style of a component you can override or add new classes; more details about components customization on https://oruga-ui.com/documentation/#customization

```js

import { createApp } from 'vue'

import Oruga from '@oruga-ui/oruga-next'

import '@oruga-ui/theme-oruga/dist/oruga.css'

const customConfig = {

    checkbox: {

        override: true,

        rootClass: 'checkbox'

    }

}

createApp(App)

    .use(Oruga, customConfig)

    .mount('#app')

```

## Contributors

Thank you to everyone involved for improving this project, day by day 💚



  



[Complete list](CONTRIBUTORS.md).

## License

Code released under [MIT](https://github.com/oruga-ui/theme-oruga/blob/main/LICENSE) license.