decap-cms
decap-cms copied to clipboard
decaporg
Customize the appearance (theming)
Is your feature request related to a problem? Please describe.
No. It is a feature request.
We can define a bunch of themes globally from which the user can select any theme of choice and add it in the config.yml file.
The globally define theme can include all the design elements: header, footer, buttons...
Describe the solution you'd like
What cannot be done?
This is my opinion 👇🏻👇🏻👇🏻
We cannot allow users to define their own customized theme where users can change the color of the text or button.
Additional context
I have also discussed about this in the NetlifyCMS community talk on 29-08-2018.
I would love to be able to do this so that I can give clients a custom themed CMS to edit their content, which would look very professional and provide a premium experience.
Hey guys,
any news on this / is there discussion happening about this somewhere else?
There hasn't been much chatter about this topic lately @rikurb8 Although the maintainers would love to see a feature like this implemented, there are still more pressing matters to work on. We're happy to support any effort to help this thing to the finish line though!
I've long thought we needed to split the UI components out so they could be replaced with custom ones, but I bet what people really want is just to change colors and maybe fonts? Most of this is already controlled by a set of variables, so in the future it could be feasible to theme through the CMS config: https://github.com/netlify/netlify-cms/blob/ccef446d72f96fa8d8db9bf2d0be5633eff79979/packages/netlify-cms-ui-default/src/styles.js#L4-L82
colors, fonts, logos, light and dark mode, that kind of stuff, yes. Basically so I can give the client a 'custom' CMS for thier custom site/app/thing that has their logo, colors, fonts, etc...
The only complicated part is doing this in a way that works for extensions, namely widgets.
Sent with GitHawk
I've long thought we needed to split the UI components out so they could be replaced with custom ones, but I bet what people really want is just to change colors and maybe fonts? Most of this is already controlled by a set of variables, so in the future it could be feasible to theme through the CMS config:
https://github.com/netlify/netlify-cms/blob/ccef446d72f96fa8d8db9bf2d0be5633eff79979/packages/netlify-cms-ui-default/src/styles.js#L4-L82
How do I go about accessing these variables in the index.html of the CMS UI? I tried adding a script HTML element in the head and changing the colors assigned but nothing happened.
https://github.com/numoonchld/nmc-ossu-bi-ncms/blob/master/admin/index.html
Consider the way tools like VuePress do themes: https://vuepress.vuejs.org/theme/using-a-theme.html#using-a-theme-from-a-dependency.
A very small simple set of files and directory structure leads to great ways to totally customize the layout and look of the site.
Hi @kenkoy, the CMS is a community based project. I you'd like to contribute to this issue, it might be better to follow https://github.com/netlify/netlify-cms/issues/2557
As a workaround, you can add this to the end of <head>:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkreader.min.js"></script>
<script>
DarkReader.enable();
</script>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
The color contrasts are all inaccessible. I have perfect vision and the gray on gray is hard to read for me.
