@ionic/angular#DomController TypeScript Examples

The following examples show how to use @ionic/angular#DomController. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: expandable-header.directive.ts    From Uber-ServeMe-System with MIT License 5 votes vote down vote up 
constructor(private element: ElementRef, private renderer: Renderer2, private  domCtrl: DomController) {
  }
Example #2
Source File: board-theme-switcher.service.ts    From casual-chess with GNU General Public License v3.0 5 votes vote down vote up 
constructor(private domCtrl: DomController, @Inject(DOCUMENT) private document) {
    this.themes = [
      {
        name: 'brown',
        styles: [
          { themeVariable: '--chess-white-background', value: '#F3E1C2' },
          { themeVariable: '--chess-white-color', value: '#C39976' },
          { themeVariable: '--chess-black-background', value: '#C39976' },
          { themeVariable: '--chess-black-color', value: '#F3E1C2' },
        ]
      },
      {
        name: 'blue',
        styles: [
          { themeVariable: '--chess-white-background', value: '#E4E9EB' },
          { themeVariable: '--chess-white-color', value: '#9DB1BB' },
          { themeVariable: '--chess-black-background', value: '#9DB1BB' },
          { themeVariable: '--chess-black-color', value: '#E4E9EB' },
        ]
      },
      {
        name: 'green',
        styles: [
          { themeVariable: '--chess-white-background', value: '#FFFEE4' },
          { themeVariable: '--chess-white-color', value: '#97B378' },
          { themeVariable: '--chess-black-background', value: '#97B378' },
          { themeVariable: '--chess-black-color', value: '#FFFEE4' },
        ]
      },
      {
        name: 'grey',
        styles: [
          { themeVariable: '--chess-white-background', value: '#AAAAAA' },
          { themeVariable: '--chess-white-color', value: '#888888' },
          { themeVariable: '--chess-black-background', value: '#888888' },
          { themeVariable: '--chess-black-color', value: '#AAAAAA' },
        ]
      },
      {
        name: 'pink',
        styles: [
          { themeVariable: '--chess-white-background', value: '#FFF2F2' },
          { themeVariable: '--chess-white-color', value: '#BC4545' },
          { themeVariable: '--chess-black-background', value: '#BC4545' },
          { themeVariable: '--chess-black-color', value: '#FFF2F2' },
        ]
      },
      {
        name: 'navy',
        styles: [
          { themeVariable: '--chess-white-background', value: '#ECECEC' },
          { themeVariable: '--chess-white-color', value: '#385170' },
          { themeVariable: '--chess-black-background', value: '#385170' },
          { themeVariable: '--chess-black-color', value: '#ECECEC' },
        ]
      },
      {
        name: 'dark-green',
        styles: [
          { themeVariable: '--chess-white-background', value: '#E0EFBA' },
          { themeVariable: '--chess-white-color', value: '#467A4B' },
          { themeVariable: '--chess-black-background', value: '#467A4B' },
          { themeVariable: '--chess-black-color', value: '#E0EFBA' },
        ]
      },
      {
        name: 'black-white',
        styles: [
          { themeVariable: '--chess-white-background', value: '#F2F2F2' },
          { themeVariable: '--chess-white-color', value: '#0C0C0C' },
          { themeVariable: '--chess-black-background', value: '#0C0C0C' },
          { themeVariable: '--chess-black-color', value: '#F2F2F2' },
        ]
      }
    ]
  }
Example #3
Source File: theme-switcher.service.ts    From casual-chess with GNU General Public License v3.0 4 votes vote down vote up 
constructor(private domCtrl: DomController, @Inject(DOCUMENT) private document) {
    this.themes = [
      {
        name: 'light blue',
        mainColor: '#3880ff',
        styles: [
          // primary
          { themeVariable: '--ion-color-primary', value: '#3880ff' },
          { themeVariable: '--ion-color-primary-rgb', value: '56,128,255' },
          { themeVariable: '--ion-color-primary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-primary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-primary-shade', value: '#3171e0' },
          { themeVariable: '--ion-color-primary-tint', value: '#4c8dff' },
          // secondary
          { themeVariable: '--ion-color-secondary', value: '#0cd1e8' },
          { themeVariable: '--ion-color-secondary-rgb', value: '12,209,232' },
          { themeVariable: '--ion-color-secondary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-secondary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-secondary-shade', value: '#0bb8cc' },
          { themeVariable: '--ion-color-secondary-tint', value: '#24d6ea' },
          // tertiary
          { themeVariable: '--ion-color-tertiary', value: '#7044ff' },
          { themeVariable: '--ion-color-tertiary-rgb', value: '112,68,255' },
          { themeVariable: '--ion-color-tertiary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-tertiary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-tertiary-shade', value: '#633ce0' },
          { themeVariable: '--ion-color-tertiary-tint', value: '#7e57ff' },
          // success
          { themeVariable: '--ion-color-success', value: '#10dc60' },
          { themeVariable: '--ion-color-success-rgb', value: '16,220,96' },
          { themeVariable: '--ion-color-success-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-success-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-success-shade', value: '#0ec254' },
          { themeVariable: '--ion-color-success-tint', value: '#28e070' },
          // warning
          { themeVariable: '--ion-color-warning', value: '#ffce00' },
          { themeVariable: '--ion-color-warning-rgb', value: '255,206,0' },
          { themeVariable: '--ion-color-warning-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-warning-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-warning-shade', value: '#e0b500' },
          { themeVariable: '--ion-color-warning-tint', value: '#ffd31a' },
          // danger
          { themeVariable: '--ion-color-danger', value: '#f04141' },
          { themeVariable: '--ion-color-danger-rgb', value: '245,61,61' },
          { themeVariable: '--ion-color-danger-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-danger-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-danger-shade', value: '#d33939' },
          { themeVariable: '--ion-color-danger-tint', value: '#f25454' },
          // dark
          { themeVariable: '--ion-color-dark', value: '#222428' },
          { themeVariable: '--ion-color-dark-rgb', value: '34,34,34' },
          { themeVariable: '--ion-color-dark-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-dark-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-dark-shade', value: '#1e2023' },
          { themeVariable: '--ion-color-dark-tint', value: '#383a3e' },
          // medium
          { themeVariable: '--ion-color-medium', value: '#989aa2' },
          { themeVariable: '--ion-color-medium-rgb', value: '152,154,162' },
          { themeVariable: '--ion-color-medium-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-medium-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-medium-shade', value: '#86888f' },
          { themeVariable: '--ion-color-medium-tint', value: '#a2a4ab' },
          // light
          { themeVariable: '--ion-color-light', value: '#f4f5f8' },
          { themeVariable: '--ion-color-light-rgb', value: '244,244,244' },
          { themeVariable: '--ion-color-light-contrast', value: '#000000' },
          { themeVariable: '--ion-color-light-contrast-rgb', value: '0,0,0' },
          { themeVariable: '--ion-color-light-shade', value: '#d7d8da' },
          { themeVariable: '--ion-color-light-tint', value: '#f5f6f9' },
          // app colors
          { themeVariable: '--ion-background-color', value: '#ffffff' },
          { themeVariable: '--ion-overlay-background-color', value: '#ffffff' },
          { themeVariable: '--ion-text-color', value: '#000000' },
          { themeVariable: '--ion-item-background', value: '#ffffff' }
        ]
      },
      {
        name: 'dark',
        mainColor: '#000000',
        styles: [
          { themeVariable: '--ion-color-primary', value: '#000000' },
          { themeVariable: '--ion-color-primary-rgb', value: '0,0,0' },
          { themeVariable: '--ion-color-primary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-primary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-primary-shade', value: '#000000' },
          { themeVariable: '--ion-color-primary-tint', value: '#1a1a1a' },
          
          { themeVariable: '--ion-color-secondary', value: '#444444' },
          { themeVariable: '--ion-color-secondary-rgb', value: '68,68,68' },
          { themeVariable: '--ion-color-secondary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-secondary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-secondary-shade', value: '#3c3c3c' },
          { themeVariable: '--ion-color-secondary-tint', value: '#575757' },
          
          { themeVariable: '--ion-color-tertiary', value: '#797979' },
          { themeVariable: '--ion-color-tertiary-rgb', value: '121,121,121' },
          { themeVariable: '--ion-color-tertiary-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-tertiary-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-tertiary-shade', value: '#6a6a6a' },
          { themeVariable: '--ion-color-tertiary-tint', value: '#868686' },

          { themeVariable: '--ion-color-success', value: '#508364' },
          { themeVariable: '--ion-color-success-rgb', value: '5,78,34' },
          { themeVariable: '--ion-color-success-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-success-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-success-shade', value: '#04451e' },
          { themeVariable: '--ion-color-success-tint', value: '#1e6038' },

          { themeVariable: '--ion-color-warning', value: '#ffab66' },
          { themeVariable: '--ion-color-warning-rgb', value: '119,60,0' },
          { themeVariable: '--ion-color-warning-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-warning-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-warning-shade', value: '#693500' },
          { themeVariable: '--ion-color-warning-tint', value: '#85501a' },

          { themeVariable: '--ion-color-danger', value: '#8a0b0b' },
          { themeVariable: '--ion-color-danger-rgb', value: '138,11,11' },
          { themeVariable: '--ion-color-danger-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-danger-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-danger-shade', value: '#790a0a' },
          { themeVariable: '--ion-color-danger-tint', value: '#962323' },

          { themeVariable: '--ion-color-dark', value: '#f4f4f4' },
          { themeVariable: '--ion-color-dark-rgb', value: '244,244,244' },
          { themeVariable: '--ion-color-dark-contrast', value: '#000000' },
          { themeVariable: '--ion-color-dark-contrast-rgb', value: '0,0,0' },
          { themeVariable: '--ion-color-dark-shade', value: '#d7d7d7' },
          { themeVariable: '--ion-color-dark-tint', value: '#f5f5f5' },
          
          { themeVariable: '--ion-color-medium', value: '#d5d6d9' },
          { themeVariable: '--ion-color-medium-rgb', value: '213,214,217' },
          { themeVariable: '--ion-color-medium-contrast', value: '#000000' },
          { themeVariable: '--ion-color-medium-contrast-rgb', value: '0,0,0' },
          { themeVariable: '--ion-color-medium-shade', value: '#bbbcbf' },
          { themeVariable: '--ion-color-medium-tint', value: '#d9dadd' },
          
          { themeVariable: '--ion-color-light', value: '#3f3f3f' },
          { themeVariable: '--ion-color-light-rgb', value: '63,63,63' },
          { themeVariable: '--ion-color-light-contrast', value: '#ffffff' },
          { themeVariable: '--ion-color-light-contrast-rgb', value: '255,255,255' },
          { themeVariable: '--ion-color-light-shade', value: '#373737' },
          { themeVariable: '--ion-color-light-tint', value: '#525252' },

          { themeVariable: '--ion-background-color', value: '#383838' },
          { themeVariable: '--ion-overlay-background-color', value: '#111111' },
          { themeVariable: '--ion-text-color', value: '#dfdfdf' },
          { themeVariable: '--ion-item-background', value: '#222222' }
        ]
      }
    ];
  }