blocks|key|3001690|text|因为我使用了自定义主题，所以我让它变得非常简单。我使用了切换按钮，每次都会执行所需的代码段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001691|JavaScript.getCurrent().execute("document.body.className+=+document.body.className.replace(\"theme1\",\"theme2\");+");

JavaScript.getCurrent().execute("document.body.className+=+document.body.className.replace(\"theme2\",\"theme1\");+");|code-block|syntax|javascript|3001692|我的css文件将如下所示。|3001693|.theme1+.v-button+{
+++/*+some+css+attribute+*/
}

.theme2+.v-button+{
+++/*+some+css+attribute+*/
}|3001694|相信我；主题切换非常非常快，因为浏览器本身会切换主题，而不是要求Vaadin服务器进行切换。|3001695|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Since I used custom themes, I have made it pretty simple. I used a toggle button and executed the required piece of code every time.

<pre><code>JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme1\",\"theme2\"); ");

JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme2\",\"theme1\"); ");
</code></pre>

My css file will be like this.

<pre><code>.theme1 .v-button {
 /* some css attribute */
}

.theme2 .v-button {
 /* some css attribute */
}
</code></pre>

Believe me; the theme switch is very very fast since the browser itself do the trick to switch the theme rather than asking the Vaadin server to do the switch.

blocks|key|877161|text|在Vaadin7中，'setTheme()‘方法已经被新的注解@主题所取代。在Vaadin+7中，“即时主题改变”是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|877162|在这篇Vaadin+Forum+Thread中有一个关于Vaadin7的主题变化的讨论，你应该看看它。|offset|length|877163|entityMap|0|LINK|mutability|MUTABLE|url|https://vaadin.com/forum#!/thread/1154742^0|0|3|J|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

In Vaadin 7 the method 'setTheme()' has been replaced with the new Annotation @Theme. The "on the fly theme change" is not possible in Vaadin 7.

There is a disucssion in this <a href="https://vaadin.com/forum#!/thread/1154742" rel="noreferrer">Vaadin Forum Thread</a> about the on fly theme change in Vaadin 7. You should have a look on it.

blocks|key|3001699|text|在Vaadin7.3.0：https://vaadin.com/wiki/-/wiki/Main/Changing%2Btheme%2Bon%2Bthe%2Bfly中引入了setTheme功能|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3001700|entityMap|0|LINK|mutability|MUTABLE|url|https://vaadin.com/wiki/-/wiki/Main/Changing%2Btheme%2Bon%2Bthe%2Bfly^0|D|1P|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

setTheme functionality has been introduced in Vaadin 7.3.0: <a href="https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly" rel="noreferrer">https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly</a>

blocks|key|1265491|text|你可以在Vaadin+7上试试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265492|1265493|在根UI中创建您自己的UIProvider+|ordered-list-item|1265494|Switch主题在UIProvider中，并触发页面重新加载|1265495|1265496|DynamicThemeUIProvider.java|1265497|public+class+DynamicThemeUIProvider+extends+UIProvider+{
++++private+String+currentTheme+=+"reindeer";

++++@Override
++++public+Class<?+extends+UI>+getUIClass(UIClassSelectionEvent+event)+{
++++++++return+DemoUI.class;
++++}

++++public+void+setTheme(String+theme)+{
++++++++currentTheme+=+theme;
++++}

+++++public+String+getTheme(UICreateEvent+event)+{
+++++++++return+currentTheme;
+++++}
}|code-block|syntax|javascript|1265498|DemoUI.java|1265499|public+class+DemoUI+extends+UI+{
++++private+DynamicThemeUIProvider+provider;
++++@Override
++++protected+void+init(VaadinRequest+request)+{
++++++++provider+=+new+DynamicThemeUIProvider();
++++++++getSession().addUIProvider(provider);
++++}

++++public+DynamicThemeUIProvider+getDynamicThemeUIProvider()+{
++++++++return+provider;
++++}
}|1265500|然后在切换主题的组件上：|1265501|@Override
public+void+valueChange(ValueChangeEvent+event)+{
++++DemoUI+ui+=+(DemoUI)+getUI();
++++DynamicThemeUIProvider+uiProvider+=+ui.getDynamicThemeUIProvider();

++++if+(uiProvider+==+null)+{
++++++++return;
++++}

++++uiProvider.setTheme("reindeer");
++++try+{
++++++++String+value+=+(String)+event.getProperty().getValue();
++++++++uiProvider.setTheme(value.toLowerCase());
++++}+catch+(Exception+e)+{
++++++++e.printStackTrace();
++++}

++++ui.getPage().getJavaScript().execute("document.location.reload(true)");+//+page+refresh
}|1265502|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|12|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|15|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|17|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|18|8|@]|9|@]|A|$]]|$1|V|3|W|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|X|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|Y|$]]

you can try this for Vaadin 7:

<ol>
<li>Create your own UIProvider</li>
<li>Register your UIProvider in root UI</li>
<li>Switch theme in UIProvider and trigger page reload</li>
</ol>

DynamicThemeUIProvider.java

<pre class="lang-java prettyprint-override"><code>public class DynamicThemeUIProvider extends UIProvider {
 private String currentTheme = "reindeer";

 @Override
 public Class&lt;? extends UI&gt; getUIClass(UIClassSelectionEvent event) {
 return DemoUI.class;
 }

 public void setTheme(String theme) {
 currentTheme = theme;
 }

 public String getTheme(UICreateEvent event) {
 return currentTheme;
 }
}
</code></pre>

DemoUI.java

<pre class="lang-java prettyprint-override"><code>public class DemoUI extends UI {
 private DynamicThemeUIProvider provider;
 @Override
 protected void init(VaadinRequest request) {
 provider = new DynamicThemeUIProvider();
 getSession().addUIProvider(provider);
 }

 public DynamicThemeUIProvider getDynamicThemeUIProvider() {
 return provider;
 }
}
</code></pre>

Then on a component which switches the theme:

<pre class="lang-java prettyprint-override"><code>@Override
public void valueChange(ValueChangeEvent event) {
 DemoUI ui = (DemoUI) getUI();
 DynamicThemeUIProvider uiProvider = ui.getDynamicThemeUIProvider();

 if (uiProvider == null) {
 return;
 }

 uiProvider.setTheme("reindeer");
 try {
 String value = (String) event.getProperty().getValue();
 uiProvider.setTheme(value.toLowerCase());
 } catch (Exception e) {
 e.printStackTrace();
 }

 ui.getPage().getJavaScript().execute("document.location.reload(true)"); // page refresh
}
</code></pre>

blocks|key|120075|text|关于图表的主题:只需在ComboBox或OptionGroup+(用于单选按钮)的侦听器中的某处设置一个开关，即可执行以下ChartOptions静态方法调用，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|120076|ChartOptions.get().setTheme(new+VaadinTheme())|code-block|syntax|javascript|120077|然后|120078|ChartOptions.get().setTheme(new+SkiesTheme())|120079|等。|120080|还有GridTheme()；GrayTheme()和HighChartsDefaultTheme()；您甚至可以扩展基本主题来创建您自己的主题(参见Vaadin书)。|120081|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Regarding themes for charts:
simply have a switch somewhere inside a listener of either a ComboBox or an OptionGroup (for radio buttons) to make a the following ChartOptions static method call, e.g.:

<pre><code>ChartOptions.get().setTheme(new VaadinTheme())
</code></pre>

then

<pre><code>ChartOptions.get().setTheme(new SkiesTheme())
</code></pre>

etc.

there's also GridTheme(); GrayTheme() and HighChartsDefaultTheme(); you can even extend the base theme to create your own theme (look that up in the Book of Vaadin).

blocks|key|1260872|text|从Vaadin7.3开始，你可以使用UI#setTheme()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1260873|entityMap|0|LINK|mutability|MUTABLE|url|https://vaadin.com/api/com/vaadin/ui/UI.html#setTheme(java.lang.String)^0|I|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Since Vaadin 7.3 you can use <a href="https://vaadin.com/api/com/vaadin/ui/UI.html#setTheme(java.lang.String)" rel="nofollow">UI#setTheme()</a>

blocks|key|3001739|text|在Vaadin7和更高版本中，我们有一个称为@+Theme+(yourThemeName)的注解，它基于您在这里给出的主题名称，它将重定向到在调用Init方法之前调用的特定.scss+Style.This注解。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001740|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In Vaadin 7 and higher Versions we have an Annotation called @Theme(yourThemeName)
based on the Theme name which you give here it will redirect to that specific .scss Style.This annotation is called before the Init method is called.

I am doing a project in Vaadin 7. In that I need to change the theme of a page.

In Vaadin 6, there is a function called 'setTheme()'. so that I can change the theme using that function wherever I want in my code.

But, In Vaadin 7, I couldn't find any like that.

I know there will be a way to do it. 

And also how to apply changes on the UI when I change a theme?

Will it be changed automatically? (or)

ICEPush gonna help me?

Change themes in Vaadin 7 via code

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在用Vaadin 7做一个项目。因为我需要改变页面的主题。在Vaadin6中，有一个名为'setTheme()‘的函数。这样我就可以在代码中的任何地方使用该函数更改主题。但是，在Vaadin 7中，我找不到这样的东西。我知道会有办法做到这一点的。它会自动更改吗？(或)ICEPush会帮我吗？

问通过代码更改Vaadin 7中的主题
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过代码更改Vaadin 7中的主题EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过代码更改Vaadin 7中的主题
EN