[Typhoon] Feature request: Adjustable background color of the markdown coding area

[DiesDasJenes]

Aloha, thanks for the great theme. I am using the markdown coding area a lot for my posts and I would love to see the blue background of the code block to be adjustable or to be removed. I tried different highlighting of the code parts and the blue background doesn't help with the readability. I would use transparent for the background but i believe there are people who would like to have a different background color.

Thanks for reading. Cheers

[rhukster]

This is configurable via the tailwind.config.js file. This is where the overrides and customization for the tailwind 'typography' plugin reside:

typography: (theme) => ({
        DEFAULT: {
          css: {
            color: 'inherit',
            lineHeight: 'inherit',
            maxWidth: 'inherit',
            a: {
              transition: 'all 500ms',
              color: theme('colors.primary.DEFAULT'),
              '&:hover': {
                color: theme('colors.primary.darker')
              },
              textDecoration: 'none'
            },
            strong: {
              color: 'inherit'
            },
            code: {
              backgroundColor: theme('colors.gray.100'),
              color: theme('colors.indigo.600'),
              fontWeight: 'inherit'
            },
            pre: {
              backgroundColor: theme('colors.blue.100'),
              backgroundOpacity: theme('opacity-50'),
              color: theme('colors.blue.800'),
            },
          }
        }
      }),

The bit you want to change is the pre section (code blocks) and potentially the code section (inline code). After changing you will have to build the 'develop' and the 'production' css with:

npm run build
npm run prod

[DiesDasJenes]

Aloha, thanks for the answer. Would that approach not be overwritten by the next update of grav or the theme?

[rhukster]

Yes it would be lost if you update Typhoon (not Grav), but that's why we recommend using Typhoon as a basis for your own custom theme development. If you want to start customizing it, you should create your own theme by copying Typhoon via DevTools plugin:

bin/gpm install devtools
bin/plugin devtools new-theme

Of course you should monitor any updates in Typhoon and see if those are things you want or need in your custom theme going forward. You might need to manually update your custom theme as needed.