Set dark theme as default

Ask for Help
,
1

Greetings!

I’m not sure if you this is currently possible in self hosted, but I’d like to be able to limit theme choices or at least set dark theme as default, some I think can leverage conditionals formating in a streamlined fashion for all users.
I’ve got a a few tables with specific color ingredients that just doesn’t work with light mode and also they’re embedded in a website that has dark theme, not sure whether I can control an embedded table’s theme that’s displayed to the public (not logged in) users.

Is there something I can can do about it?

2

Hmm, in self-hosted Grist you can add custom css:

But I don’t know if it is possible to actually trigger dark mode this way - @georgegevoian might know.

3

Hi @Darius_St_Clair.

You can try Paul’s suggestion with the CSS snippet at the bottom of this message. (Sorry for the length - I’m not able to upload just the file.)

Note that enabling custom CSS will disable all theme preferences, preventing you from switching to light mode. Also, there are a few things that can’t currently be customized via custom CSS, like the colors used by the formula editor, so this won’t be a 100% match for the Grist dark theme.

Site-level theme preferences were among some of the ideas that were brought up for future enhancements to themes, which would work well for the use case of enforcing a particular theme. It’s not on our immediate roadmap, but we’re always listening to feedback from our users to prioritize what we work on next.

George

:root {
  --grist-theme-text: #EFEFEF;
  --grist-theme-text-light: #A4A4A4;
  --grist-theme-text-dark: #FFFFFF;
  --grist-theme-text-error: #FF6666;
  --grist-theme-text-danger: #FFA500;
  --grist-theme-text-disabled: #A4A4A4;
  --grist-theme-page-bg: #262633;
  --grist-theme-page-backdrop: black;
  --grist-theme-page-panels-main-panel-bg: #32323F;
  --grist-theme-page-panels-left-panel-bg: #262633;
  --grist-theme-page-panels-right-panel-bg: #262633;
  --grist-theme-page-panels-top-header-bg: #32323F;
  --grist-theme-page-panels-bottom-footer-bg: #32323F;
  --grist-theme-page-panels-border: #57575F;
  --grist-theme-page-panels-border-resizing: #1DA270;
  --grist-theme-page-panels-side-panel-opener-fg: #A4A4A4;
  --grist-theme-page-panels-side-panel-opener-active-fg: #FFFFFF;
  --grist-theme-page-panels-side-panel-opener-active-bg: #1DA270;
  --grist-theme-add-new-circle-fg: #FFFFFF;
  --grist-theme-add-new-circle-bg: #157A54;
  --grist-theme-add-new-circle-hover-bg: #0A5438;
  --grist-theme-add-new-circle-small-fg: #FFFFFF;
  --grist-theme-add-new-circle-small-bg: #1DA270;
  --grist-theme-add-new-circle-small-hover-bg: #157A54;
  --grist-theme-top-bar-button-primary-fg: #1DA270;
  --grist-theme-top-bar-button-secondary-fg: #A4A4A4;
  --grist-theme-top-bar-button-disabled-fg: #69697D;
  --grist-theme-top-bar-button-error-fg: FF6666;
  --grist-theme-notifications-panel-header-bg: #262633;
  --grist-theme-notifications-panel-body-bg: #32323F;
  --grist-theme-notifications-panel-border: #69697D;
  --grist-theme-toast-text: #FFFFFF;
  --grist-theme-toast-text-light: #929299;
  --grist-theme-toast-bg: #040404;
  --grist-theme-toast-error-icon: #D0021B;
  --grist-theme-toast-error-bg: #D0021B;
  --grist-theme-toast-success-icon: #009058;
  --grist-theme-toast-success-bg: #009058;
  --grist-theme-toast-warning-icon: #F9AE41;
  --grist-theme-toast-warning-bg: #DD962C;
  --grist-theme-toast-info-icon: #3B82F6;
  --grist-theme-toast-info-bg: #3B82F6;
  --grist-theme-toast-control-fg: #16B378;
  --grist-theme-toast-control-info-fg: #87B2F9;
  --grist-theme-tooltip-fg: white;
  --grist-theme-tooltip-bg: rgba(0, 0, 0, 0.75);
  --grist-theme-tooltip-icon: #A4A4A4;
  --grist-theme-tooltip-close-button-fg: white;
  --grist-theme-tooltip-close-button-hover-fg: black;
  --grist-theme-tooltip-close-button-hover-bg: white;
  --grist-theme-modal-bg: #32323F;
  --grist-theme-modal-backdrop: rgba(0,0,0,0.6);
  --grist-theme-modal-border: #57575F;
  --grist-theme-modal-border-dark: #69697D;
  --grist-theme-modal-border-hover: #A4A4A4;
  --grist-theme-modal-shadow-inner: #000000;
  --grist-theme-modal-shadow-outer: #000000;
  --grist-theme-modal-close-button-fg: #A4A4A4;
  --grist-theme-modal-backdrop-close-button-fg: #1DA270;
  --grist-theme-modal-backdrop-close-button-hover-fg: #157A54;
  --grist-theme-popup-bg: #32323F;
  --grist-theme-popup-shadow-inner: #000000;
  --grist-theme-popup-shadow-outer: #000000;
  --grist-theme-popup-close-button-fg: #A4A4A4;
  --grist-theme-progress-bar-fg: #1DA270;
  --grist-theme-progress-bar-error-fg: #FF6666;
  --grist-theme-progress-bar-bg: #69697D;
  --grist-theme-link: #1DA270;
  --grist-theme-link-hover: #1DA270;
  --grist-theme-hover: rgba(111,111,117,0.6);
  --grist-theme-hover-light: rgba(111,111,117,0.4);
  --grist-theme-cell-editor-fg: #FFFFFF;
  --grist-theme-cell-editor-bg: #32323F;
  --grist-theme-cursor: #1DA270;
  --grist-theme-cursor-inactive: rgba(29,162,112,0.5);
  --grist-theme-cursor-readonly: #A4A4A4;
  --grist-theme-table-header-fg: #EFEFEF;
  --grist-theme-table-header-selected-fg: #EFEFEF;
  --grist-theme-table-header-bg: #262633;
  --grist-theme-table-header-selected-bg: #414358;
  --grist-theme-table-header-border: #57575F;
  --grist-theme-table-header-border-dark: #69697D;
  --grist-theme-table-body-bg: #32323F;
  --grist-theme-table-body-border: #69697D;
  --grist-theme-table-add-new-bg: #4A4A5D;
  --grist-theme-table-scroll-shadow: #000000;
  --grist-theme-table-frozen-columns-border: #A4A4A4;
  --grist-theme-table-drag-drop-indicator: #A4A4A4;
  --grist-theme-table-drag-drop-shadow: rgba(111,111,117,0.6);
  --grist-theme-card-compact-widget-bg: #262633;
  --grist-theme-card-compact-record-bg: #32323F;
  --grist-theme-card-blocks-bg: #404150;
  --grist-theme-card-form-label: #A4A4A4;
  --grist-theme-card-compact-label: #A4A4A4;
  --grist-theme-card-blocks-label: #A4A4A4;
  --grist-theme-card-form-border: #69697D;
  --grist-theme-card-compact-border: #69697D;
  --grist-theme-card-editing-layout-bg: rgba(85, 85, 99, 0.2);
  --grist-theme-card-editing-layout-border: #69697D;
  --grist-theme-card-list-form-border: #57575F;
  --grist-theme-card-list-blocks-border: #57575F;
  --grist-theme-selection: rgba(22,179,120,0.15);
  --grist-theme-selection-opaque-fg: white;
  --grist-theme-selection-opaque-bg: #2F4748;
  --grist-theme-selection-opaque-dark-bg: #253E3E;
  --grist-theme-widget-bg: #32323F;
  --grist-theme-widget-border: #57575F;
  --grist-theme-widget-active-border: #1DA270;
  --grist-theme-widget-inactive-stripes-light: #262633;
  --grist-theme-widget-inactive-stripes-dark: #32323F;
  --grist-theme-pinned-doc-footer-bg: #32323F;
  --grist-theme-pinned-doc-border: #57575F;
  --grist-theme-pinned-doc-border-hover: #A4A4A4;
  --grist-theme-pinned-doc-editor-bg: #57575F;
  --grist-theme-raw-data-table-border: #57575F;
  --grist-theme-raw-data-table-border-hover: #A4A4A4;
  --grist-theme-control-fg: #1DA270;
  --grist-theme-control-primary-fg: #FFFFFF;
  --grist-theme-control-primary-bg: #1DA270;
  --grist-theme-control-secondary-fg: #A4A4A4;
  --grist-theme-control-hover-fg: #157A54;
  --grist-theme-control-primary-hover-bg: #157A54;
  --grist-theme-control-secondary-hover-fg: #EFEFEF;
  --grist-theme-control-secondary-hover-bg: #57575F;
  --grist-theme-control-disabled-fg: #A4A4A4;
  --grist-theme-control-disabled-bg: #69697D;
  --grist-theme-control-primary-disabled: #5F8C7B;
  --grist-theme-control-border: #11B683;
  --grist-theme-checkbox-bg: #32323F;
  --grist-theme-checkbox-disabled-bg: #69697D;
  --grist-theme-checkbox-border: #69697D;
  --grist-theme-checkbox-border-hover: #57575F;
  --grist-theme-move-docs-selected-fg: #FFFFFF;
  --grist-theme-move-docs-selected-bg: #1DA270;
  --grist-theme-move-docs-disabled-bg: #69697D;
  --grist-theme-filter-bar-button-saved-fg: #FFFFFF;
  --grist-theme-filter-bar-button-saved-bg: #555563;
  --grist-theme-filter-bar-button-saved-hover-bg: #69697D;
  --grist-theme-icon-button-fg: #FFFFFF;
  --grist-theme-icon-button-primary-bg: #1DA270;
  --grist-theme-icon-button-primary-hover-bg: #157A54;
  --grist-theme-icon-button-secondary-bg: #69697D;
  --grist-theme-icon-button-secondary-hover-bg: #A4A4A4;
  --grist-theme-left-panel-page-hover-bg: rgba(111,111,117,0.25);
  --grist-theme-left-panel-active-page-fg: #EFEFEF;
  --grist-theme-left-panel-active-page-bg: #555563;
  --grist-theme-left-panel-disabled-page-fg: #69697D;
  --grist-theme-left-panel-page-options-fg: #A4A4A4;
  --grist-theme-left-panel-page-options-hover-fg: #FFFFFF;
  --grist-theme-left-panel-page-options-hover-bg: #69697D;
  --grist-theme-left-panel-page-options-selected-hover-bg: #A4A4A4;
  --grist-theme-left-panel-page-initials-fg: white;
  --grist-theme-left-panel-page-initials-bg: #929299;
  --grist-theme-right-panel-tab-fg: #EFEFEF;
  --grist-theme-right-panel-tab-bg: #262633;
  --grist-theme-right-panel-tab-icon: #A4A4A4;
  --grist-theme-right-panel-tab-icon-hover: #1DA270;
  --grist-theme-right-panel-tab-hover-bg: rgba(111,111,117,0.6);
  --grist-theme-right-panel-tab-selected-fg: #FFFFFF;
  --grist-theme-right-panel-tab-selected-bg: #1DA270;
  --grist-theme-right-panel-tab-button-hover-bg: #157A54;
  --grist-theme-right-panel-subtab-fg: #1DA270;
  --grist-theme-right-panel-subtab-selected-fg: #EFEFEF;
  --grist-theme-right-panel-subtab-selected-underline: #1DA270;
  --grist-theme-right-panel-subtab-hover-fg: #157A54;
  --grist-theme-right-panel-subtab-hover-underline: #1DA270;
  --grist-theme-right-panel-disabled-overlay: #262633;
  --grist-theme-right-panel-toggle-button-enabled-fg: #FFFFFF;
  --grist-theme-right-panel-toggle-button-enabled-bg: #555563;
  --grist-theme-right-panel-toggle-button-enabled-hover-fg: #D9D9D9;
  --grist-theme-right-panel-toggle-button-disabled-fg: #FFFFFF;
  --grist-theme-right-panel-toggle-button-disabled-bg: #333333;
  --grist-theme-right-panel-field-settings-bg: #414358;
  --grist-theme-right-panel-field-settings-button-bg: #57575F;
  --grist-theme-document-history-snapshot-fg: #EFEFEF;
  --grist-theme-document-history-snapshot-selected-fg: #EFEFEF;
  --grist-theme-document-history-snapshot-bg: #32323F;
  --grist-theme-document-history-snapshot-selected-bg: #555563;
  --grist-theme-document-history-snapshot-border: #69697D;
  --grist-theme-document-history-activity-text: #EFEFEF;
  --grist-theme-document-history-activity-text-light: #A4A4A4;
  --grist-theme-accent-icon: #1DA270;
  --grist-theme-accent-border: #1DA270;
  --grist-theme-accent-text: #1DA270;
  --grist-theme-input-fg: #EFEFEF;
  --grist-theme-input-bg: #32323F;
  --grist-theme-input-disabled-fg: #A4A4A4;
  --grist-theme-input-disabled-bg: #262633;
  --grist-theme-input-placeholder-fg: #A4A4A4;
  --grist-theme-input-border: #69697D;
  --grist-theme-input-valid: #1DA270;
  --grist-theme-input-invalid: #FF6666;
  --grist-theme-input-focus: #5E9ED6;
  --grist-theme-input-readonly-bg: #262633;
  --grist-theme-input-readonly-border: #69697D;
  --grist-theme-choice-entry-bg: #32323F;
  --grist-theme-choice-entry-border: #69697D;
  --grist-theme-choice-entry-border-hover: #A4A4A4;
  --grist-theme-select-button-fg: #EFEFEF;
  --grist-theme-select-button-placeholder-fg: #A4A4A4;
  --grist-theme-select-button-disabled-fg: #A4A4A4;
  --grist-theme-select-button-bg: #32323F;
  --grist-theme-select-button-border: #69697D;
  --grist-theme-select-button-border-invalid: #FF6666;
  --grist-theme-menu-text: #A4A4A4;
  --grist-theme-menu-light-text: #A4A4A4;
  --grist-theme-menu-bg: #32323F;
  --grist-theme-menu-subheader-fg: #EFEFEF;
  --grist-theme-menu-border: #69697D;
  --grist-theme-menu-shadow: #000000;
  --grist-theme-menu-item-fg: #FFFFFF;
  --grist-theme-menu-item-selected-fg: #FFFFFF;
  --grist-theme-menu-item-selected-bg: #1DA270;
  --grist-theme-menu-item-disabled-fg: #69697D;
  --grist-theme-menu-item-icon-fg: #A4A4A4;
  --grist-theme-menu-item-icon-selected-fg: #FFFFFF;
  --grist-theme-menu-item-link-fg: #1DA270;
  --grist-theme-menu-item-link-selected-fg: #157A54;
  --grist-theme-menu-item-link-selected-bg: #484859;
  --grist-theme-autocomplete-match-text: #1DA270;
  --grist-theme-autocomplete-selected-match-text: #0A5438;
  --grist-theme-autocomplete-item-selected-bg: #69697D;
  --grist-theme-search-border: #69697D;
  --grist-theme-search-prev-next-button-fg: #A4A4A4;
  --grist-theme-search-prev-next-button-bg: #24242F;
  --grist-theme-loader-fg: #1DA270;
  --grist-theme-loader-bg: #69697D;
  --grist-theme-site-switcher-active-fg: #FFFFFF;
  --grist-theme-site-switcher-active-bg: #000000;
  --grist-theme-doc-menu-doc-options-fg: #69697D;
  --grist-theme-doc-menu-doc-options-hover-fg: #A4A4A4;
  --grist-theme-doc-menu-doc-options-hover-bg: #69697D;
  --grist-theme-shortcut-key-fg: #FFFFFF;
  --grist-theme-shortcut-key-primary-fg: #17B378;
  --grist-theme-shortcut-key-secondary-fg: #A4A4A4;
  --grist-theme-shortcut-key-bg: #32323F;
  --grist-theme-shortcut-key-border: #A4A4A4;
  --grist-theme-breadcrumbs-tag-fg: white;
  --grist-theme-breadcrumbs-tag-bg: #929299;
  --grist-theme-breadcrumbs-tag-alert-bg: #D0021B;
  --grist-theme-widget-picker-primary-bg: #32323F;
  --grist-theme-widget-picker-secondary-bg: #262633;
  --grist-theme-widget-picker-item-fg: #FFFFFF;
  --grist-theme-widget-picker-item-selected-bg: rgba(111,111,117,0.6);
  --grist-theme-widget-picker-item-disabled-bg: rgba(111,111,117,0.6);
  --grist-theme-widget-picker-icon: #A4A4A4;
  --grist-theme-widget-picker-primary-icon: #1DA270;
  --grist-theme-widget-picker-summary-icon: #1DA270;
  --grist-theme-widget-picker-border: rgba(111,111,117,0.6);
  --grist-theme-widget-picker-shadow: #000000;
  --grist-theme-code-view-text: #D2D2D2;
  --grist-theme-code-view-keyword: #D2D2D2;
  --grist-theme-code-view-comment: #888888;
  --grist-theme-code-view-meta: #7CD4FF;
  --grist-theme-code-view-title: #ED7373;
  --grist-theme-code-view-params: #D2D2D2;
  --grist-theme-code-view-string: #ED7373;
  --grist-theme-code-view-number: #ED7373;
  --grist-theme-importer-table-info-border: #69697D;
  --grist-theme-importer-preview-border: #69697D;
  --grist-theme-importer-skipped-table-overlay: rgba(111,111,117,0.6);
  --grist-theme-importer-match-icon: #69697D;
  --grist-theme-menu-toggle-fg: #A4A4A4;
  --grist-theme-menu-toggle-hover-fg: #1DA270;
  --grist-theme-menu-toggle-active-fg: #157A54;
  --grist-theme-menu-toggle-bg: #32323F;
  --grist-theme-menu-toggle-border: #A4A4A4;
  --grist-theme-button-group-fg: #EFEFEF;
  --grist-theme-button-group-light-fg: #A4A4A4;
  --grist-theme-button-group-bg: unset;
  --grist-theme-button-group-icon: #A4A4A4;
  --grist-theme-button-group-border: #69697D;
  --grist-theme-button-group-border-hover: #555563;
  --grist-theme-button-group-selected-fg: #EFEFEF;
  --grist-theme-button-group-light-selected-fg: #1DA270;
  --grist-theme-button-group-selected-bg: #555563;
  --grist-theme-button-group-selected-border: #555563;
  --grist-theme-access-rules-table-header-fg: #EFEFEF;
  --grist-theme-access-rules-table-header-bg: #57575F;
  --grist-theme-access-rules-table-body-fg: #A4A4A4;
  --grist-theme-access-rules-table-border: #A4A4A4;
  --grist-theme-access-rules-column-list-border: #69697D;
  --grist-theme-access-rules-column-item-fg: #EFEFEF;
  --grist-theme-access-rules-column-item-bg: #57575F;
  --grist-theme-access-rules-column-item-icon-fg: #A4A4A4;
  --grist-theme-access-rules-column-item-icon-hover-fg: #EFEFEF;
  --grist-theme-access-rules-column-item-icon-hover-bg: #A4A4A4;
  --grist-theme-cell-fg: #FFFFFF;
  --grist-theme-cell-bg: #32323F;
  --grist-theme-cell-zebra-bg: #262633;
  --grist-theme-formula-editor-bg: #282A36;
  --grist-theme-chart-fg: #A4A4A4;
  --grist-theme-chart-bg: #32323F;
  --grist-theme-chart-legend-bg: #32323F80;
  --grist-theme-chart-x-axis: #A4A4A4;
  --grist-theme-chart-y-axis: #A4A4A4;
  --grist-theme-comments-popup-header-bg: #262633;
  --grist-theme-comments-popup-body-bg: #32323F;
  --grist-theme-comments-popup-border: #69697D;
  --grist-theme-comments-user-name-fg: #DFDFDF;
  --grist-theme-comments-panel-topic-bg: #32323F;
  --grist-theme-comments-panel-topic-border: #555563;
  --grist-theme-comments-panel-resolved-topic-bg: #262634;
  --scroll-bar-fg: #6B6B6B;
  --scroll-bar-hover-fg: #7B7B7B;
  --scroll-bar-active-fg: #8B8B8B;
  --scroll-bar-bg: #2B2B2B;
  --grist-theme-bg: url("img/prismpattern.png");
}
4

Ah, thank you for the pointers.
I have played around with custom CSS and for the time being that’s not an approach we’d use, we’ll probably rather wait for an option to be able to globally switch theme, since this isn’t exactly the most breaking thing in our workflow and for the time being it mostly affects public facing tables that are embedded on different sites of ours, since I can just tell everyone else to switch appearance for best experience.

Thank you either way!

5

Hmm if you know any programmer, you might be able to change the default in code right here:

(is that the right spot @georgegevoian ?)

If we got a pull request at GitHub - gristlabs/grist-core: Grist is the evolution of spreadsheets. making this configurable via an environment variable, I’d say we’d accept it and maintain it.

6

Yep, that’s a good spot to override defaults. The only catch would be that this would only apply to new users, and they’d still be able to change the theme if they’d like.

Globally forcing a specific theme is certainly doable and not that much more complicated, but it won’t be as simple as just updating that snippet, unfortunately.

7

I’m not a programmer myself, aside from some specific Python-related stuff, but for the time being we’ll stick to manually selecting it. New user additions are rare in my team, so this shouldn’t be that much of an issue for now.
Thank you for the great support and this amazing product!

1 Like
8

Well, sorry for necroing this thread after a long time.

Ended up using the custom CSS on another implementation we’re using Grist for. Works perfect!
Had to add some things, for example we had to change the color of kf_elabel_input as it was unreadable if someone was editing a column name within the header of a table, but that was probably an edge case since we wanted higher visibility of selected row/column and they are frequently edited by some roles.
image

Again, thank you for the work and effort you lot have put into this.

2 Likes