Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

• Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
• Fluent UI - based on the Fluent UI by Microsoft
• Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
• Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

Especially with dark themes such as Metro Black, the traditional browser scrollbar does not really fit. I know scrollbar customization is not available in all browsers, but no fallback support is required (as the css is simply ignored by these browsers), and I believe it would greatly benefit users of the browsers that are supported.

A new Kendo UI theme which is in compliance with and extends Zurb Foundation styles -> http://foundation.zurb.com/sites/docs/kitchen-sink.html

Let developers of MVC Extensions apps vote on their favorite themes to be upgraded from "legacy" status to officially supported status for Kendo UI Web:  I vote for Vista theme

All the themes has Mobile support except the kendo.bootstrap-v4, we need the mobile support for new bootstrap v4.

current bootstrap 4 css : https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap-v4.min.css

Expected Mobile Support css : https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap-v4.mobile.min.css

Let us know whether do you need Office 365-like skin?

Bug report

Reproducible with the Default and Bootstrap SASS themes.

Reproduction of the problem

Reproducible in the demos.

1. Resize the browser window making it more narrow (screencast)

Current behavior

Icons are misaligned.

Expected/desired behavior

Icons are properly aligned.

Environment

• Kendo UI version: 2019.3.917
• jQuery version: x.y
• Browser: [all]

Fluent UI is used in all major Microsoft 365 Apps. 

Why not make a Fluent UI theme for Blazor components? 

https://developer.microsoft.com/en-us/fluentui/#/controls/web

In the attached sample you will see that the textbox (the second input) is 2px taller than the numeric textbox (the first input). Both of them are several pixels taller than the combo box and date picker.

---

ADMIN EDIT

Related to this issue in the themes repo about improving bootstrap integration.

A workaround can be adding specific height to the widgets you use through the bootstrap classes, for example:

<style>
    input.k-textbox.form-control,
    k-datetimepicker.form-control,
    .k-widget.k-combobox.k-header.form-control {
        height: calc(2.25rem) !important;
    }
</style>

<div class="container-fluid border pt-md-3">
    <div class="row">
        <h5 class="pl-3 pb-3">nach Geschäftsfall suchen</h5>
    </div>
    <EditForm Model="SuchParameter" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallJahr">Fall-Jahr</label>
            </div>
            <div class="col-md-8">
                <TelerikNumericTextBox Id="fallJahrTelerik" @bind-Value="SuchParameter.Jahr" Class="form-control" Arrows="false" />
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallNummer">Fall-Nr.</label>
            </div>
            <div class="col-md-8">
                <TelerikTextBox Id="fallNummer" @bind-Value="SuchParameter.Nummer" Class="form-control" />
            </div>
        </div>

        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="geschaeftsArt">Geschäftsart</label>
            </div>
            <div class="col-md-8">
                <TelerikComboBox Id="geschaeftsArt" ValueChanged="@( (string c) => OnGeschaeftsArtChanged (c))" Value="selectedGeschaeftsArt" ValueField="Art" TextField="Art" ValueExpression="@( () => selectedGeschaeftsArt )"
                                 Data="@GeschaeftsArten" Placeholder="Geschäftsart auswählen" ClearButton="true" Width="100%" 
                                 Class="form-control"/>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="posteingang">Posteingang </label>
            </div>
            <div class="col-md-8">
                <TelerikDateTimePicker Id=posteingang @bind-Value="@selectedTime" Format="dd.MM.yyyy" Width="100%"
                                       Class="form-control"></TelerikDateTimePicker>
            </div>
        </div>

        <button type="submit" class="btn btn-block btn-primary">Suchen</button>
        <ValidationSummary />
    </EditForm>
</div>

@code{
    public class TheFormModel
    {
        public int Jahr { get; set; }
        public string Nummer { get; set; }
    }

    public class ComboModel
    {
        public string Art { get; set; }
    }

    TheFormModel SuchParameter { get; set; } = new TheFormModel();
    string selectedGeschaeftsArt { get; set; }
    List<ComboModel> GeschaeftsArten { get; set; } = Enumerable.Range(1, 5).Select(x => new ComboModel { Art = $"Art {x}" }).ToList();
    DateTime selectedTime { get; set; }

    void HandleValidSubmit()
    {

    }

    void OnGeschaeftsArtChanged(string v)
    {
        selectedGeschaeftsArt = v;
    }
}

---

If I place the DateRangePicker inside a TelerikForm, the start and end input fields are stacked vertically.

If I were to place the control just inside a div, they are arranged horizontally.

How can I get the control to arrange itself horizontally when inside a form?

---

ADMIN EDIT

Here is a reproducible that begins with a short CSS workaround (remove the style to see the issue):

<style>
    .k-form .k-daterangepicker-wrap .k-floating-label-container {
        display: inline-block;
        width: auto;
    }
</style>



<div class="demo-section k-form k-form-vertical">
    <div class="k-form-field">
        <label for="outbound-date" class="k-label k-form-label">Travel Date</label>
        <div class="k-form-field-wrap">
            <TelerikDateRangePicker @bind-StartValue="@StartValue"
                                    @bind-EndValue="@EndValue"
                                    StartId="outbound-date">
            </TelerikDateRangePicker>
        </div>
    </div>
    <div class="k-form-field">
        <p>The selected travel date is: <strong>@StartValue.Value.ToLongDateString()</strong> and <strong>@EndValue.Value.ToLongDateString()</strong></p>
    </div>
</div>

<div class="demo-section">
    <h4><label for="outbound-date">Book your flight tickets</label></h4>

    <TelerikDateRangePicker @bind-StartValue="@StartValue"
                            @bind-EndValue="@EndValue"
                            StartId="outbound-date">
    </TelerikDateRangePicker>

    <div class="mt-lg">
        <h6 class="kd-demo-heading mt-sm">Selected Dates</h6>
        <div><strong>Departure: </strong> @StartValue?.ToString("dd MMM yyyy")</div>
        <div><strong>Return: </strong> @EndValue?.ToString("dd MMM yyyy")</div>
    </div>
</div>

@code {
    public DateTime? StartValue { get; set; } = new DateTime(2020, 4, 3);
    public DateTime? EndValue { get; set; } = new DateTime(2020, 4, 10);
}

---

Hi there,

as we are building apps for SharePoint and Office we are in need of a theme that looks like Office 365. Kendo UI for jQuery has that but there's a big shift towards building those apps with Typescript and React. Unfortunately the Kendo UI React package doesn't provide an Office 365 theme so everything we build doesn't integrate well to the look and feel of SharePoint and Office. 

It would be great if you were able to migrate that theme over from jQuery to the React components.

Thanks and kind regards

  Christian

For now 2 css are used (kendo.common.css and kendo.theme_name.css) for whatever widgets are present on the page. Would be nice to have styles for different widgets separated into single css files (as it is in jQueryUI), so that, if I need only a DropDownList on the page, I include something line "kendo.core.css" and "kendo.dropdown.css" and the whole css framework would not be downloaded each time.

Since there will be a theme for Microsoft SharePoint 2013/Office365 it would be nice if there would be a theme for Microsoft Dynamics CRM 2015. This would be really helpful.

All of your templates use the exact same sprites.   Your themes just change the colors, which we can do from the themebuilder.   I think it would be more beneficial to have some different 'looks'.   For example, you have the 'Legacy' MVC themes available.  Not only do they use a different set of sprites, but they look different and there are like 13 of them.  

As Kendo UI is now, there are 5 themes and they are all pretty much the same, with different colors.

Please provide other options.  Please make the MVC 'Legacy' themes part of the standard Kendo themes.  Please provide different icon sets.

Maybe we could even pick a theme and pick an icon set or a look, etc.

add a new theme/style according  Atlassian User interface guidelines see: https://docs.atlassian.com/aui/latest/docs/inline-dialog.html would allow to integrate kendoui elements in all Atlasssian Products 

Bug report

Reproduction of the problem

1. Open the following Demo with one of the SASS themes.
2. Open the filter menu for the ProductName column

Current behavior

There is an additional border around the search input. The border appears when Sass is used.

Expected/desired behavior

The additional border should be removed.

Environment

• Kendo UI version: 2020.3.915
• Browser: [all]