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

question on dependancies... and older theme #193

Open
bizappzone opened this issue Jan 11, 2025 · 3 comments
Open

question on dependancies... and older theme #193

bizappzone opened this issue Jan 11, 2025 · 3 comments

Comments

@bizappzone
Copy link

Added npm install --save @nativescript/tailwind tailwindcss

removed ..
"@nativescript/theme": "~3.1.0",
"nativescript-theme-core": "~1.0.4",
Are these required ?

@rigor789
Copy link
Member

For using tailwind no they are not.

@bizappzone
Copy link
Author

Perfect. Thanks.
Looking to implement a theme switcher. The sample has a config of
darkMode: ['class', '.ns-dark'],

So switching theme light/dark. On main application Gridlayout would I apply class=ns-dark, or ns-light? Any thoughts on approach to theme switching?

tailwindcss rocks ;)

cheers,
Aj

@rigor789
Copy link
Member

I've made a quick util for this, see https://x.com/igor_randj/status/1834615699974529313

import { Application, CSSUtils } from '@nativescript/core';

export function toggleGlobalClass(className: string) {
  const rootView = Application.getRootView();
  const enabled = rootView.cssClasses.has(className);

  if (enabled) {
    CSSUtils.removeSystemCssClass(className);
    rootView.cssClasses.delete(className);
    // also remove from all modals
    rootView._getRootModalViews().forEach((view) => {
      view.cssClasses.delete(className);
      view._onCssStateChange();
    });
  } else {
    CSSUtils.pushToSystemCssClasses(className);
    rootView.cssClasses.add(className);
    // also add to all modals
    rootView._getRootModalViews().forEach((view) => {
      view.cssClasses.add(className);
      view._onCssStateChange();
    });
  }
  rootView._onCssStateChange();
}

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

2 participants