Is it possible to change the styling of the sidebar

Reposted from Tina Slack. Originally asked by ‘Xavier Mirabelli-Montan’

@ncphi responded:
Sure is! We don’t have it documented though. You can pass a theme object to the Gatsby config. Here’s an example in Grande:https://github.com/tinacms/tina-starter-grande/blob/master/gatsby-config.js

gatsby-config.js

const theme = require("./content/settings/theme.json")
const site = require("./content/settings/theme.json")

module.exports = {
plugins: [
  {
      resolve: "gatsby-plugin-tinacms",
      options: {
        sidebar: {
          hidden: process.env.NODE_ENV === "production",
          position: "displace",
          theme: {
            color: {
              primary: {
                light: theme.color.primary,
                medium: theme.color.primary,
                dark: theme.color.primary,
              },
            },
          },
        },
        plugins: ["gatsby-tinacms-git", "gatsby-tinacms-remark"],
      },
    },
]

This file has the interface for the theme objecthttps://github.com/tinacms/tinacms/blob/master/packages/@tinacms/styles/src/Styles.tsx

packages/@tinacms/styles/src/Styles.tsx

1 Like