html:<style include="styles-micro-styles"></style>

<div class="theming-view">

	<section class="custom-hero dark-section v-padding--md">
		<div class="container-fluid">
			<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/theming/theming-icon-white.svg" alt="">
			<div class="custom-hero--content">
				<h1>Theming</h1>
				<p>Vaadin is a component-based UI framework for building web apps in Java. Your UI code works securely on the server, right next to your business logic that you can access with native Java API. </p>
			</div>
		</div>
	</section>

	<section class="main-content">
		<div class="theming-intro container-fluid container-padding--medium">
			<div class="flex-grid">
				<div class="flex-col">
					<p class="paragraph-lg" style="margin-top:0;">Vaadin separates the appearance of the user interface from its logic using themes. The built-in themes come with:
					</p><ul class="dotted-list">
						<li>Clean typographic hierarchy</li>
						<li>Carefully adjusted spacing of elements in all components</li>
						<li>Animations</li>
						<li>Hundreds of cohesive design decisions</li>
						<li>CSS variables for customizing fonts, colors, border radius, and spacing.</li>
						<li>Ability to override individual component styles</li>
					</ul>
				</div>
				<div class="flex-col">
					<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/theming/vaadin-components--home.png">
				</div>
			</div>
		</div>

		<div class="theming-benefits container-fluid">
			<h3>Vaadin theme benefits</h3>
			<div class="flex-grid">
				<div class="flex-col">
					<h5>For all screen sizes and pixel densities</h5>
					<p>Lumo uses CSS for all of the stylings, meaning there are no raster images used for any of the parts of the components. The built-in icon set uses resolution independent font icons.</p>
				</div>
				<div class="flex-col">
					<h5>Customizable and extensible</h5>
					<p>Both of the ready-made themes have a styling API you can use to easily customize aspects of the theme, such as fonts, colors, and rounded corners.</p>
				</div>
				<div class="flex-col">
					<h5>Light and dark themes</h5>
					<p>All ready-made themes include a dark version, in addition to the default light version. You can even use both variations at the same time, one section of your app being dark while the rest is light.</p>
				</div>
			</div>
		</div>

		<div class="theming-themes container-fluid container-padding--medium">

			<div class="flex-grid">
				<div class="flex-col">
					<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/theming/default-lumo.png">
					<h5>Lumo theme</h5>
					<p>All the Vaadin components implement the Lumo theme by default, which gives your application a coherent and polished look out-of-the-box. Lumo has a compact pre-set with reduced space between elements for when you have a lot of data on the display.</p>
					<a href="/docs/latest/styling/lumo" class="arrow-link">Read documentation</a>
				</div>
				<div class="flex-col">
					<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/theming/material.png">
					<h5>Material theme</h5>
					<p>The Material theme is an implementation of Google’s Material Design specs. The specs are followed whenever possible, and for features which are not described in the spec, we take inspiration from the guidelines in general and make them fit in seamlessly.</p>
					<a href="/docs/latest/styling/legacy/material-theme" class="arrow-link">Read documentation</a>
				</div>
			</div>
		</div>

	</section>

</div>