英文:
vuetify changing font colors of data-table items-per-page
问题
<template>
<div class="container fill">
<BootstrapNavBar></BootstrapNavBar>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="mytable red yellow--text"
></v-data-table>
</div>
</template>
<script>
import BootstrapNavBar from "./BootstrapNavBar.vue";
import axios from "axios";
export default {
components: {
BootstrapNavBar,
},
data() {
return {
itemsPerPage: 5,
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name",
class: "white--text",
},
{ text: "Calories", value: "calories", class: "white--text" },
{ text: "Fat (g)", value: "fat", class: "white--text" },
{ text: "Carbs (g)", value: "carbs", class: "white--text" },
{ text: "Protein (g)", value: "protein", class: "white--text" },
{ text: "Iron (%)", value: "iron", class: "white--text" },
],
desserts: [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: "1%",
},
],
balances: [],
};
},
methods: {},
};
</script>
<style scoped>
.fill {
color: #e5e6e7;
min-height: 100%;
height: 100%;
}
.theme--light.v-data-table {
background-color: #282c30 !important;
color: rgb(255, 255, 255) !important;
}
/* Red parts trying to make white font */
.mytable .red, .mytable .yellow--text {
color: white !important;
}
/* Selector box */
.v-select.theme--light.v-input.v-input--selection-controls.v-input--is-label-active.v-input--is-dirty {
background-color: black !important;
}
/* Grayish color issue */
.theme--light.v-data-table {
background-color: #282c30 !important;
color: white !important;
}
</style>
英文:
I am struggling to find ways to change font-colors in data-table. I found ways to change color of headers and rows, but now I need to change the color of rows-per-page count selecter box (it is filled with black font, but selector box is white and fonts are black) and also < > arrow bars for page spans are left black but I want them white
<template>
<div class="container fill">
<BootstrapNavBar></BootstrapNavBar>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="mytable red yellow--text"
></v-data-table>
</div>
</template>
<script>
import BootstrapNavBar from "./BootstrapNavBar.vue";
import axios from "axios";
export default {
components: {
BootstrapNavBar,
},
data() {
return {
itemsPerPage: 5,
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name",
class: "white--text",
},
{ text: "Calories", value: "calories", class: "white--text" },
{ text: "Fat (g)", value: "fat", class: "white--text" },
{ text: "Carbs (g)", value: "carbs", class: "white--text" },
{ text: "Protein (g)", value: "protein", class: "white--text" },
{ text: "Iron (%)", value: "iron", class: "white--text" },
],
desserts: [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: "1%",
},
],
balances: [],
};
},
methods: {},
};
</script>
<style scoped>
.fill {
color: #e5e6e7;
min-height: 100%;
height: 100%;
}
.theme--light.v-data-table {
background-color: #282c30 !important;
color: rgb(255, 255, 255) !important;
}
</style>
Red parts trying to make white font
Selector box when clicked it is black fonts over white, and selected part is all white. I need here black background, and white fonts, selected one could be another color
also why is my data-table, grayish color. Is it possible to align it with the background fill color.
答案1
得分: 1
我明白你的意思，你想要将数据表格变成深色，包括下拉框和相关的字体、图标以及下拉项的文字要是对比度高的（白色）颜色。
通过使用以下两个技巧，你可以实现这个效果：
-
你不需要手动使用CSS来将表格变成深色并将内容变成白色，而是可以使用
dark属性。dark属性会将表格视为深色模式，自动将字体和图标的颜色变成白色。 -
深色模式不会改变选择框的背景颜色。因此，你需要使用手动的CSS来实现这个效果，如下所示：
.v-sheet.v-list {
// 这是深色模式的背景颜色
background: #1E1E1E !important;
}
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
// 未被选中的列表项
color: white !important;
}
这里是一个工作演示：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
class: 'white--text',
},
{
text: 'Calories',
value: 'calories',
class: 'white--text'
},
{
text: 'Fat (g)',
value: 'fat',
class: 'white--text'
},
{
text: 'Carbs (g)',
value: 'carbs',
class: 'white--text'
},
{
text: 'Protein (g)',
value: 'protein',
class: 'white--text'
},
{
text: 'Iron (%)',
value: 'iron',
class: 'white--text'
},
],
desserts: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: 7,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: 8,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: 16,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: 0,
},
],
}
},
})
<!-- language: lang-css -->
.v-sheet.v-list {
background: #1E1E1E !important;
}
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: white !important;
}
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</script>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<div id="app">
<v-app id="inspire">
<div class="container fill">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
dark
></v-data-table>
</div>
</v-app>
</div>
<!-- end snippet -->
希望这有所帮助。
<details>
<summary>英文:</summary>
If I understood correctly, you want the data table in dark color including the dropdown and the respected fonts, icons, and dropdown items' text to be in contrast (white) color.
By following these two tricks you can achieve this-
1. You don't need to use a manual CSS to make the table dark and its content to be white, **use a dark prop instead. The dark prop will treat the table as dark mode, which will auto-change the font and icon colors to white.**
2. Dark mode will not change the selection box's background color. So to do that, you need to use manual CSS like this-
.v-sheet.v-list {
// this is the dark mode's background color
background: #1E1E1E !important;
}
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
// list items that are not selected
color: white !important;
}
Here is a working demo-
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
class: 'white--text',
},
{
text: 'Calories',
value: 'calories',
class: 'white--text'
},
{
text: 'Fat (g)',
value: 'fat',
class: 'white--text'
},
{
text: 'Carbs (g)',
value: 'carbs',
class: 'white--text'
},
{
text: 'Protein (g)',
value: 'protein',
class: 'white--text'
},
{
text: 'Iron (%)',
value: 'iron',
class: 'white--text'
},
],
desserts: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: 7,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: 8,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: 16,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: 0,
},
],
}
},
})
<!-- language: lang-css -->
.v-sheet.v-list {
background: #1E1E1E !important;
}
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: white !important;
}
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</script>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<div id="app">
<v-app id="inspire">
<div class="container fill">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
dark
></v-data-table>
</div>
</v-app>
</div>
<!-- end snippet -->
Hope this helps.
</details>
# 答案2
**得分**: 0
```css
.theme--light.v-data-table {
background-color: #282c30 !important;
color: rgb(255, 255, 255) !important;
}
i.mdi-chevron-left, i.mdi-chevron-right, i.mdi-menu-down {
color: white !important;
}
.v-select__selections {
color: white !important;
}
英文:
Can you please try to play around with the classes mapped to the footer elements and then update the styles using custom CSS. Something like this :
i.mdi-chevron-left, i.mdi-chevron-right, i.mdi-menu-down {
color: white !important;
}
.v-select__selections {
color: white !important;
}
Demo :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
class: 'success--text title',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
<!-- language: lang-css -->
.theme--light.v-data-table {
background-color: #282c30 !important;
color: rgb(255, 255, 255) !important;
}
i.mdi-chevron-left, i.mdi-chevron-right, i.mdi-menu-down {
color: white !important;
}
.v-select__selections {
color: white !important;
}
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.1.5/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-app>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论