tailwind icon indicating copy to clipboard operation
tailwind copied to clipboard

question on dependancies... and older theme

Open bizappzone opened this issue 1 year ago • 3 comments

Added npm install --save @nativescript/tailwind tailwindcss

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

bizappzone avatar Jan 11 '25 19:01 bizappzone

For using tailwind no they are not.

rigor789 avatar Jan 11 '25 22:01 rigor789

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

bizappzone avatar Jan 15 '25 17:01 bizappzone

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();
}

rigor789 avatar Jan 15 '25 22:01 rigor789