A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/oruga-ui/theme-oruga below:

oruga-ui/theme-oruga: 🦋 Customization of Oruga components with a custom styling

🦋 Default theme for Oruga without any dependencies

npm install @oruga-ui/theme-oruga

or

yarn add @oruga-ui/theme-oruga
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)

In order to customize any SASS variables, you have to set them before the SCSS Import.

// 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
// ...

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

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");

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

Complete list.

Code released under MIT license.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4