Changing Themes

[mthor1979]

I like the option to change themes,I have everything working and it looks great.

the one thing I am having problems with is getting the theme to change since I am using angular-cli, since angular-cli does a build of files, I input the css files in a angular-cli.json file. (below) and when I run the app ng serve the files build and I am now not able to reference the style sheets to change the id's because there is no id when I do the angular-cli build. I know this is not a bug on you guys, but I am wondering if anyone has a workaround for applications that build the index page.

I have tried document.styleSheets but does not work.

Code: Select all

let themeLink: HTMLLinkElement = <HTMLLinkElement> document.getElementById('theme-css');
    let layoutLink: HTMLLinkElement = <HTMLLinkElement> document.getElementById('layout-css');

Code: Select all

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "resources/theme/theme-indigo.css",
        "resources/layout/css/animate.css",
        "resources/layout/css/layout-indigo.css",
        "resources/demo/css/fullcalendar.css",
        "../node_modules/primeng/resources/primeng.min.css"
      ],

[mthor1979]

I figured this out!! what I did what add the css through js, then all worked perfect

I added the below just above the Ultima theme

I am using angular-cli so I removed the theme-indigo and the layout-indigo from the angular-cli.json and add them in the app.component.ts ngAfterViewInit(){}

Code: Select all

if (/localhost:4200/.test(window.top.location.host)) {
      document.write('<link rel="stylesheet" id="theme-css" type="text/css" href="resources/theme/theme-indigo.css" />');
      document.write('<link rel="stylesheet" id="layout-css" type="text/css" href="resources/layout/css/layout-indigo.css" />');
    }
Ultima.init(this.el.nativeElement);

changeTheme(event, theme) {
    let themeLink: HTMLLinkElement = <HTMLLinkElement> document.getElementById('theme-css');
    let layoutLink: HTMLLinkElement = <HTMLLinkElement> document.getElementById('layout-css');

    themeLink.href = 'resources/theme/theme-' + theme + '.css';
    layoutLink.href = 'resources/layout/css/layout-' + theme + '.css';
    event.preventDefault();
  }

[st-clair-clarke]

@mthor1979
Hi,
I am also using angular-cli. How did you get over the problem I reported at http://forum.primefaces.org/viewtopic.php?f=42&t=47480?
Thanks

[mthor1979]

this is the only jquery ref I have (I think) ("assets/resources/demo/js/jquery.deps.js",) at the top of the scripts tag, I have moved my resources folder into assets so I can get the individual css files to change themes, if you put in the assets folder the files will get built into the dist folder upon build.

here are my sources

Code: Select all

{
  "project": {
    "version": "1.0.0-beta.17",
    "name": "connect-user"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "assets/resources/layout/css/animate.css",
        "assets/resources/demo/css/fullcalendar.css",
        "../node_modules/primeng/resources/primeng.min.css"
      ],
      "scripts": [
        "assets/resources/demo/js/jquery.deps.js",
        "assets/resources/layout/js/layout.js",
        "assets/resources/demo/js/charts.min.js",
        "assets/resources/demo/js/moment.js",
        "assets/resources/demo/js/fullcalendar.js",
        "assets/resources/demo/js/quill.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

Code: Select all

{
  "name": "connect-user",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "angular2-cookie": "^1.2.4",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.6.3",
    "material-css": "^0.7.0",
    "moment": "^2.15.1",
    "primeng": "^1.0.0-beta.17",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

if you have your project on github or somewhere I can clone the base project I can try to put it in a project folder and run it to help debug. also I am using angular-cli

angular-cli: 1.0.0-beta.17
node: 6.5.0
os: darwin x64

to upgrade cli go to there git repo and it is under update.