From c2f76529bf66748c60c94e43dbadd480eff07026 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Mu=CC=88ller?= Date: Wed, 18 Dec 2024 13:54:55 +0100 Subject: [PATCH] feat: implement custom stylesheet id and theme scope Closes #4065 --- packages/docs/src/pages/en/features/theme.md | 40 +++++++++++-------- .../src/composables/__tests__/theme.spec.ts | 27 +++++++++++++ packages/vuetify/src/composables/theme.ts | 38 +++++++++++++----- 3 files changed, 78 insertions(+), 27 deletions(-) diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md index fd24610f66f..2cf0d263ff6 100644 --- a/packages/docs/src/pages/en/features/theme.md +++ b/packages/docs/src/pages/en/features/theme.md @@ -21,10 +21,10 @@ Customize your application's default text colors, surfaces, and more. Easily mod ## API -| Feature | Description | -| - | - | -| [useTheme](/api/use-theme/) | The theme composable allows you to get information about, and modify the current theme | -| [v-theme-provider](/api/v-theme-provider/) | The theme provider component modifies the theme of all its children | +| Feature | Description | +| ------------------------------------------ | -------------------------------------------------------------------------------------- | +| [useTheme](/api/use-theme/) | The theme composable allows you to get information about, and modify the current theme | +| [v-theme-provider](/api/v-theme-provider/) | The theme provider component modifies the theme of all its children | @@ -42,8 +42,8 @@ import { createVuetify } from 'vuetify' export default createVuetify({ theme: { - defaultTheme: 'dark' - } + defaultTheme: 'dark', + }, }) ``` @@ -76,7 +76,7 @@ const myCustomLightTheme = { 'border-color': '#000000', 'border-opacity': 0.12, 'high-emphasis-opacity': 0.87, - 'medium-emphasis-opacity': 0.60, + 'medium-emphasis-opacity': 0.6, 'disabled-opacity': 0.38, 'idle-opacity': 0.04, 'hover-opacity': 0.04, @@ -89,7 +89,7 @@ const myCustomLightTheme = { 'theme-on-kbd': '#FFFFFF', 'theme-code': '#F5F5F5', 'theme-on-code': '#000000', - } + }, } export default createVuetify({ @@ -162,13 +162,13 @@ This is used when you need to change the theme during runtime ``` @@ -230,7 +230,9 @@ Custom properties for colors are a list of `red, green, blue`, so the `rgb()` or ```html