主题系统对我不起作用，我也不知道为什么

Question

这是瓦丁流动新手。

我跟踪了一个关于主题的Youtube视频，也使用了初学者应用程序，我仍然无法实现我的主题。据我所知，看看检验员，他们似乎并没有装货。二次核对姓名、位置等

​

​

styles.css含量

@font-face {
    font-family: "LuckiestGuy";
    src: url("./fonts/Luckiest_Guy/LuckiestGuy-Regular.ttf");
}
@font-face {
    font-family: "digital7";
    src: url("./fonts/digital-7/digital-7 (mono).ttf");
}
html {
    --lumo-font-family:
    --lumo-base-color: #000000;
    --lumo-primary-color: #000000;
    --lumo-primary-text-color: #ffffff;
}
body {
    background: rgb(0, 0, 0);
    text-color: rgb(255, 255, 255);
}
.page {
    background: rgb(0, 0, 0);
    text-color: rgb(255, 255, 255);
}
.logo {
    filter: drop-shadow(0 0 3rem blue);
    width: 650px;
}

我对css文件进行了大量的编辑，试图让它正常工作，所以不是100%干净。我甚至不能使任何路线/布局的背景变成黑色。

Answer 1

我的猜测是，您要么缺少了@Theme注释，要么没有从styles.css中导入额外的CSS文件。

要启用自定义主题机制，需要确保在实现@Theme("my-theme-name")的类上有AppShellConfigurator注释。例如，在Spring应用程序中，可以有一个应用程序配置类，如下所示：

@Theme("my-theme-name")
public class Application extends SpringBootServletInitializer
                         implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

然后(假设您没有在组件的阴影DOM中进行样式化)您可以将您的样式放在：

1. 直接frontend/themes/my-theme-name/styles.css
2. 或者在另一个从使用styles.css导入的CSS文件中。例如，如果您在frontend/themes/my-theme-name/fonts/my-fonts.css中有样式，那么您应该在styles.css中添加以下行

@import url('./fonts/my-fonts.css');

有关使用CSS设计Vaadin的更多信息，请查看此指南。