Dark Theme

52 of 125

Change themes easily by changing the theme attribute on <zing-grid>. Choose from these built-in themes: Android, Black, Dark, or iOS. For the default theme, just omit the attribute (or set the value to default).

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/6140SLQI

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      min-height: 400px;
    }

    zing-grid[loading] {
      height: 412px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="Dark Theme" editor="modal" editor-controls layout-controls pager page-size="4" theme="dark" data='[
        {
          "name": "Zeus",
          "breed": "Great Dane"
        },
        {
          "name": "Koda",
          "breed": "breed"
        },
        {
          "name": "Ziva",
          "breed": "Cane Corso"
        },
        {
          "name": "Doug",
          "breed": "Pug"
        },
        {
          "name": "Jenny",
          "breed": "Corgi"
        },
        {
          "name": "Rico",
          "breed": "Golden Retriever"
        }
      ]'>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
    <zing-grid 
      caption="Dark Theme" 
      editor="modal" 
      editor-controls
      layout-controls
      pager
      page-size="4"
      theme="dark"
      data='[
        {
          "name": "Zeus",
          "breed": "Great Dane"
        },
        {
          "name": "Koda",
          "breed": "breed"
        },
        {
          "name": "Ziva",
          "breed": "Cane Corso"
        },
        {
          "name": "Doug",
          "breed": "Pug"
        },
        {
          "name": "Jenny",
          "breed": "Corgi"
        },
        {
          "name": "Rico",
          "breed": "Golden Retriever"
        }
      ]'>
    </zing-grid>
  </body>
</html>

.zg-body {background:#e6e6e6;}

zing-grid[loading] { min-height:400px; }

// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Dark Theme

Full Code

Related Docs

Related Docs

Demo Gallery