{"id":22079883,"url":"https://github.com/stack-stark/angular-theme","last_synced_at":"2025-03-23T20:43:45.638Z","repository":{"id":38657886,"uuid":"221182100","full_name":"stack-stark/angular-theme","owner":"stack-stark","description":"angular主题动态切换","archived":false,"fork":false,"pushed_at":"2023-01-07T11:39:48.000Z","size":3792,"stargazers_count":2,"open_issues_count":27,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T04:19:22.254Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stack-stark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-12T09:42:37.000Z","updated_at":"2023-07-10T08:18:05.000Z","dependencies_parsed_at":"2023-02-07T01:30:51.632Z","dependency_job_id":null,"html_url":"https://github.com/stack-stark/angular-theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fangular-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fangular-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fangular-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fangular-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stack-stark","download_url":"https://codeload.github.com/stack-stark/angular-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245168810,"owners_count":20571799,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-30T23:11:35.358Z","updated_at":"2025-03-23T20:43:45.603Z","avatar_url":"https://github.com/stack-stark.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"1.安装npm包\n``` bash\nnpm install css-loader less less-loader node-less postcss-loader  --save\n```\n``` bash\nnpm i -D @angular-builders/custom-webpack\n```\n\n2.批量将.css文件改成.less\n\n3.src下新建styles.less文件,ant.less文件\nstyles.less\n``` less\n.themeMixin(@rules) {\n    :host-context(.blue) {\n        @import \"./theme/blue.less\";\n        @rules();\n    }\n\n    :host-context(.black) {\n        @import \"./theme/black.less\";\n        @rules();\n    }\n\n    :host-context(.green) {\n        @import \"./theme/green.less\";\n        @rules();\n    }\n}\n```\nant.less,用于引入Zorro样式\n``` less\n@import \"../node_modules/ng-zorro-antd/ng-zorro-antd.less\";\n```\n4.src下新建theme文件夹,文件夹内新建主题less文件blue.less等等\n``` less\n@html-selector: html;\n@primary-color: #1890FF;\n```\n\n5.引入color.less文件到assets下\n\n6.修改index.html文件,为body加入初始类名\n``` html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003eColor\u003c/title\u003e\n  \u003cbase href=\"/\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n\u003c/head\u003e\n\u003cbody class=\"blue\"\u003e\n  \u003capp-root\u003e\u003c/app-root\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n7.修改angular.json文件\n(1).修改schematics\n``` json\n\"schematics\": {\n    \"@schematics/angular:component\": {\n        \"styleext\": \"less\"\n    }\n},\n```\n(2)修改builder\n``` json\n\"builder\": \"@angular-builders/custom-webpack:browser\",\n```\n(3)修改styles\n``` json\n \"styles\": [\n    \"src/styles.less\",\n    \"src/ant.less\"\n],\n```\n8.app.component.ts增加切换代码\n``` js\nimport { Component, OnInit } from '@angular/core';\nimport { Platform } from '@angular/cdk/platform';\nimport { NzMessageService } from 'ng-zorro-antd';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.less']\n})\nexport class AppComponent implements OnInit {\n  constructor(\n    private platform: Platform,\n    private message: NzMessageService\n  ) {\n\n  }\n  title = 'color';\n\n  private lessLoaded = false;\n\n  ngOnInit() {\n    this.initColor();\n  }\n\n  /**\n   * 设置初始颜色\n   */\n  private initColor() {\n    if (!this.platform.isBrowser) {\n      return;\n    }\n    const node = document.createElement('link');\n    node.rel = 'stylesheet/less';\n    node.type = 'text/css';\n    node.href = '/assets/color.less';\n    document.getElementsByTagName('head')[0].appendChild(node);\n  }\n\n  /**\n   * 切换颜色\n   * @param res\n   */\n  public changeColor(res: any) {\n    if (!this.platform.isBrowser) {\n      return;\n    }\n    const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js';\n    if (this.lessLoaded) {\n      this.changeTheme(res);\n    } else {\n      (window as any).less = {\n        async: true\n      };\n      this.loadScript(lessUrl).then(() =\u003e {\n        this.lessLoaded = true;\n        this.changeTheme(res);\n      });\n    }\n  }\n\n  /**\n   * 切换主题处理\n   * @param res\n   */\n  private changeTheme(res) {\n    (window as any).less\n    .modifyVars({\n      '@primary-color': res,\n    })\n    .then(() =\u003e {\n      const body = document.body;\n      const cl = body.classList[0];\n      body.classList.remove(cl);\n      body.classList.add(res);\n      console.log(`应用成功`);\n      this.message.create('success', `应用成功`);\n      window.scrollTo(0, 0);\n    });\n  }\n\n  /**\n   * 加载less\n   * @param src\n   */\n  private loadScript(src: string) {\n    return new Promise((resolve, reject) =\u003e {\n      const script = document.createElement('script');\n      script.type = 'text/javascript';\n      script.src = src;\n      script.onload = resolve;\n      script.onerror = reject;\n      document.head!.appendChild(script);\n    });\n  }\n}\n\n```\n9.component使用,需要引入src下的styles.less\n``` less\n@import \"../../styles.less\";\n.themeMixin({\n  p {\n    color: @primary-color;\n  }\n  .todo{\n      border: 1px solid @primary-color;\n      font-size: 16px;\n      height: 200px;\n      width: 100vw;\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstack-stark%2Fangular-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstack-stark%2Fangular-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstack-stark%2Fangular-theme/lists"}