fix(VEditDialog): apply theme classes to content

[KaelWD]

Description

fixes #5127
alternative to #5150

Also DRYed up ThemeProvider when inheriting from root

Markup:

<template>
  <v-app v-bind="{ dark }">
    <v-toolbar app dark color="primary">
      <v-menu>
        <v-btn slot="activator">menu - root</v-btn>
        <v-list>
          <v-list-tile>
            <v-list-tile-title>list - {{ dark ? 'dark' : 'light' }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
      <v-menu light>
        <v-btn slot="activator">menu - light</v-btn>
        <v-list>
          <v-list-tile>
            <v-list-tile-title>list - light</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
      <v-menu dark>
        <v-btn slot="activator">menu - dark</v-btn>
        <v-list>
          <v-list-tile>
            <v-list-tile-title>list - dark</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>

      <v-divider vertical></v-divider>

      <v-dialog>
        <v-btn slot="activator">dialog - root</v-btn>
        <v-card>
          <v-card-text>dialog - {{ dark ? 'dark' : 'light' }}</v-card-text>
        </v-card>
      </v-dialog>
      <v-dialog light>
        <v-btn slot="activator">dialog - light</v-btn>
        <v-card>
          <v-card-text>dialog - light</v-card-text>
        </v-card>
      </v-dialog>
      <v-dialog dark>
        <v-btn slot="activator">dialog - dark</v-btn>
        <v-card>
          <v-card-text>dialog - dark</v-card-text>
        </v-card>
      </v-dialog>

      <template slot="extension">
        <v-select v-bind="{ items }" label="self - inherit"></v-select>
        <v-select v-bind="{ items }" label="self - light" light></v-select>
        <v-select v-bind="{ items }" label="self - dark" dark></v-select>

        <v-divider vertical class="mx-3"></v-divider>

        <v-select v-bind="{ items }" label="menu - inherit"></v-select>
        <v-select v-bind="{ items }" label="menu - light" menu-props="light"></v-select>
        <v-select v-bind="{ items }" label="menu - dark" menu-props="dark"></v-select>
      </template>
    </v-toolbar>

    <v-content>
      <v-container>
        <v-switch v-model="dark" label="dark"></v-switch>
        <v-menu>
          <v-btn slot="activator">menu</v-btn>
          <v-list>
            <v-list-tile>
              <v-list-tile-title>list - {{ dark ? 'dark' : 'light' }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-menu light>
          <v-btn slot="activator">menu - light</v-btn>
          <v-list>
            <v-list-tile>
              <v-list-tile-title>list - light</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-menu dark>
          <v-btn slot="activator">menu - dark</v-btn>
          <v-list>
            <v-list-tile>
              <v-list-tile-title>list - dark</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>

        <v-dialog>
          <v-btn slot="activator">dialog - root</v-btn>
          <v-card>
            <v-card-text>dialog - {{ dark ? 'dark' : 'light' }}</v-card-text>
          </v-card>
        </v-dialog>
        <v-dialog light>
          <v-btn slot="activator">dialog - light</v-btn>
          <v-card>
            <v-card-text>dialog - light</v-card-text>
          </v-card>
        </v-dialog>
        <v-dialog dark>
          <v-btn slot="activator">dialog - dark</v-btn>
          <v-card>
            <v-card-text>dialog - dark</v-card-text>
          </v-card>
        </v-dialog>

        <v-select v-bind="{ items }" label="self - inherit"></v-select>
        <v-select v-bind="{ items }" label="self - light" light></v-select>
        <v-select v-bind="{ items }" label="self - dark" dark></v-select>

        <v-select v-bind="{ items }" label="menu - inherit"></v-select>
        <v-select v-bind="{ items }" label="menu - light" menu-props="light"></v-select>
        <v-select v-bind="{ items }" label="menu - dark" menu-props="dark"></v-select>

        <v-edit-dialog>
          VEditDialog - inherit
          <v-text-field slot="input"></v-text-field>
        </v-edit-dialog>

        <v-edit-dialog light>
          VEditDialog - light
          <v-text-field slot="input"></v-text-field>
        </v-edit-dialog>

        <v-edit-dialog dark>
          VEditDialog - dark
          <v-text-field slot="input"></v-text-field>
        </v-edit-dialog>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      dark: false,
      items: Array.from({ length: 6 }, (_, i) => `Item ${i}`)
    })
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[codecov]

Codecov Report

Merging #5152 into master will decrease coverage by 0.01%.
The diff coverage is 77.77%.

@@            Coverage Diff             @@
##           master    #5152      +/-   ##
==========================================
- Coverage   88.86%   88.84%   -0.02%     
==========================================
  Files         230      230              
  Lines        5458     5467       +9     
  Branches     1398     1401       +3     
==========================================
+ Hits         4850     4857       +7     
- Misses        485      487       +2     
  Partials      123      123

Impacted Files	Coverage Δ
src/components/VDataTable/VEditDialog.js	22.58% <ø> (ø)	⬆️
src/components/VDialog/VDialog.js	71.92% <ø> (ø)	⬆️
src/components/VMenu/mixins/menu-generators.js	84% <ø> (ø)	⬆️
src/components/VMenu/VMenu.js	87.5% <100%> (+0.54%)	⬆️
src/util/ThemeProvider.ts	100% <100%> (ø)	⬆️
src/mixins/themeable.ts	91.3% <66.66%> (-8.7%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c014f4...80188c3. Read the comment docs.

[johnleider]

This is light but says dark

Not sure if this is just the template:

[KaelWD]

Yeah the light/dark there is for the select, not the menu. The dark edit dialog has always done that, the whole thing's a clusterfuck anyway so I didn't bother changing it.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord