---
title: "Theming: Distributing Shared Themes & Parts"
framework: vue
version: "36.1.0"
---
# Theming: Distributing Shared Themes & Parts
For organisations with multiple applications, you can create your own themes and parts to share styles between applications.
### Creating Themes From Scratch
Most applications create themes by starting with a built-in theme like `themeQuartz` and using the `withParams` and `withPart` methods to generate a customised version.
The `createTheme` function creates a new theme containing core styles but no parts. If you're going to change most of the parts anyway, starting from a new theme will reduce the bundle size compared to starting with a built-in theme.
```js
import { createTheme, iconSetMaterial, colorSchemeVariable } from 'ag-grid-community';
const myCustomTheme = createTheme()
// add just the parts you want
.withPart(iconSetMaterial)
.withPart(colorSchemeVariable)
// set default param values
.withParams({
accentColor: 'red',
iconSize: 18,
});
```
Note that the checkboxes in the example below are using the default styles from your web browser, because the parts containing their styles have not been added. This is useful if your application does not contain these features, or if you want a clean base upon which to apply your own checkbox styles.
#### Creating a Theme From Scratch
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AllCommunityModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowSelectionOptions,
Theme,
colorSchemeVariable,
createTheme,
enableDevValidations,
iconSetMaterial,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([AllCommunityModule]);
const myCustomTheme = createTheme()
// add just the parts you want
.withPart(iconSetMaterial)
.withPart(colorSchemeVariable)
// set default param values
.withParams({
accentColor: "red",
iconSize: 18,
});
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "make" },
{ field: "model" },
{ field: "price" },
]);
const rowData = ref(
(() => {
const rowData: any[] = [];
for (let i = 0; i < 10; i++) {
rowData.push({
make: "Toyota",
model: "Celica",
price: 35000 + i * 1000,
});
rowData.push({
make: "Ford",
model: "Mondeo",
price: 32000 + i * 1000,
});
rowData.push({
make: "Porsche",
model: "Boxster",
price: 72000 + i * 1000,
});
}
return rowData;
})(),
);
const theme = ref(myCustomTheme);
const defaultColDef = ref({
editable: true,
flex: 1,
minWidth: 100,
filter: true,
});
const rowSelection = ref({
mode: "multiRow",
checkboxes: true,
});
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
rowData,
theme,
defaultColDef,
rowSelection,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Creating a Theme From Scratch](https://www.ag-grid.com/examples/theming-distribution/creating-themes/vue3)
### Creating Your Own Parts
For organisations that create a library of reusable styles and share them among many applications, parts can be a convenient way to package up styles and parameters so that each application can use a subset of the whole library.
The benefit of using parts rather than adding CSS in your application stylesheets is that the CSS is scoped: the CSS you provide will only apply to grids with your theme applied, whereas by default CSS in your application stylesheets will apply to all grids unless you add rules to prevent it.
The `createPart` function creates a new part. It takes an options object with the following properties:
```js
import { createPart } from 'ag-grid-community';
const myCheckboxStyle = createPart({
// By setting the feature, adding this part to a theme will remove the
// theme's existing checkboxStyle, if any
feature: 'checkboxStyle',
params: {
// Declare parameters added by the custom CSS and provide default values
checkboxCheckedGlowColor: { ref: 'accentColor' },
checkboxGlowColor: { ref: 'foregroundColor', mix: 0.5 },
// If you want to provide new default values for parameters already defined
// by the grid, you can do so too
accentColor: 'red',
},
// Add some CSS to this part.
// If your application is bundled with Vite you can put this in a separate
// file and import it with `import checkboxCSS from "./checkbox.css?inline"`
css: `
.ag-checkbox-input-wrapper {
border-radius: 4px;
/* Here we're referencing the checkboxGlowColor parameter in CSS, we need
to add the --ag- prefix and use kebab-case */
box-shadow: 0 0 5px 4px var(--ag-checkbox-glow-color);
... css implementing the new checkbox style ...
`,
});
```
#### Creating Parts
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
GridState,
ModuleRegistry,
RowSelectionOptions,
Theme,
createPart,
enableDevValidations,
themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([AllEnterpriseModule]);
const myCheckboxStyle = createPart({
// By setting the feature, adding this part to a theme will remove the
// theme's existing checkboxStyle, if any
feature: "checkboxStyle",
params: {
// Declare parameters added by the custom CSS and provide default values
checkboxCheckedGlowColor: { ref: "accentColor" },
checkboxGlowColor: { ref: "foregroundColor", mix: 0.5 },
// If you want to provide new default values for parameters already defined
// by the grid, you can do so too
accentColor: "red",
},
// Add some CSS to this part.
// If your application is bundled with Vite you can put this in a separate
// file and import it with `import checkboxCSS "./checkbox.css?inline"`
css: `
.ag-checkbox-input-wrapper {
border-radius: 4px;
/* Here we're referencing the checkboxGlowColor parameter in CSS, we need
to add the --ag- prefix and use kebab-case */
box-shadow: 0 0 5px 4px var(--ag-checkbox-glow-color);
width: 16px;
height: 16px;
&.ag-checked {
box-shadow: 0 0 5px 4px var(--ag-checkbox-checked-glow-color);
&::before {
content: '✔';
position: absolute;
pointer-events: none;
inset: 0;
text-align: center;
line-height: 16px;
font-size: 14px;
}
}
}
.ag-checkbox-input {
width: 16px;
height: 16px;
margin: 0;
appearance: none;
-webkit-appearance: none;
border-radius: 4px;
&:focus {
box-shadow: 0 0 3px 3px yellow;
outline: none;
}
}
`,
});
const myCustomTheme = themeQuartz.withPart(myCheckboxStyle);
const VueExample = defineComponent({
template: `