Demos Back to Docs

Dark Theme

51 of 124
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).
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

Related Docs

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

Related Docs

Demo Gallery