Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Kendo Theme Builder #297

Open
dlcole opened this issue Dec 8, 2021 · 1 comment
Open

Using Kendo Theme Builder #297

dlcole opened this issue Dec 8, 2021 · 1 comment

Comments

@dlcole
Copy link

dlcole commented Dec 8, 2021

Environment
✔ Component nativescript has 8.1.5 version and is up to date.
✔ Component @nativescript/core has 8.1.5 version and is up to date.
✔ Component @nativescript/ios has 8.1.0 version and is up to date.
✔ Component @nativescript/android has 8.1.1 version and is up to date.

Describe the bug
I'm trying to follow the instructions in this plugin's readme to create a custom theme that works with NativeScript-theme 2.0. The instructions read:

The theme now supports inheriting the Kendo UI ThemeBuilder theme variables. Just head there, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS that you can use to style your web app, and variables.scss - the one you need for your NativeScript theme.

OK, I followed the link to the Progress Sass Theme Builder. I have a NativeScript JavaScript project, so it wasn't clear which product I should choose. I selected UI for JSP by process of elimination. I created a theme and downloaded it, but instead of the two files referenced above I have three: .json, .scss, and .css. Now the instructions are no longer pertinent.

Maybe this is a doc error, or maybe the link is wrong and the Progress Sass Theme Builder is actually different from the Kendo UI ThemeBuilder. Additional searches haven't yielded any insights.

To Reproduce
Follow the instructions under Kendo UI ThemeBuilder support in this repository's readme.

Expected behavior
Create a theme, download it, and have it just as usable as any of the built-in themes, including css variables.

Sample project
n/a

Additional context

@dlcole dlcole changed the title Using Keno Theme Builder Using Kendo Theme Builder Dec 8, 2021
@dlcole
Copy link
Author

dlcole commented Dec 9, 2021

Looking further, I can see that the .scss file contains the variables previously in variables.scss, so to that extent the doc is just out of date. But, when I apply the variables as per the doc, none of the theme css variables are set, such as --light-primary, --light-accent, etc.

For example, if I choose the "Kendo UI for Angular" for the product, click "Start Theming", choose "Material" as the base theme, scroll to the bottom and click "Create", and then simply click on "Download", the resulting .scss file contains just this:

$border-radius: 2px;
$primary-palette-name: indigo;
$secondary-palette-name: pink;
$theme-type: light;
$adjust-contrast: true;

@import "~@progress/kendo-theme-material/dist/all.scss";

The instructions for using the theme builder indicate only the variables are needed, so I comment out the @import statement, save the .scss file in my app folder, and import it in _app-common.scss thusly:

@import 'test-theme'; // <- .scss variables created by Kendo Theme Builder

@import '@nativescript/theme/core';
// @import '@nativescript/theme/blue';

When I run with this on an iOS emulator, there are no visible changes to the UI. I am assuming the theme builder instructions are out of date, but this is such an advertised feature, how is it done? That is, how does one create a theme using the Kendo Theme Builder and include it in a NativeScript 8.1 JavaScript project using nativescript-theme 3.0.1?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant