Here we offer multiple custom CSS snippets to copy and paste, to improve your experience on Anytype, especially for plurals !
Applying custom themes works on PC, not on mobile, and only apply per device (not synced).
How to Apply
1.
Click Anytype > File > Open > Custom CSS .
2.
Copy a code block on the next section, and paste in the custom.css file that was opened on the previous step.
3.
Save, then back to Anytype, click File > Apply Custom CSS (do it twice ).
4.
Themes & Add-Ons
If you know what you are doing, don't hesitate to edit the file to make it more convenient for you, if needed!
Cozy Warm Theme
An easy to read and comfy theme with a nice yellow background and an optimised font for Ubuntu!
/* Cozy Warm Theme Add-On v1.1 */
:root {
--color-text-primary: #002b36;
--color-text-secondary: #586e75;
--color-text-tertiary: #839496;
--color-text-inversion: #fff5e6;
--color-shape-primary: #586e75;
--color-shape-secondary: #eee8d5;
--color-shape-tertiary: #eee8d5;
--color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
--color-shape-highlight-light: rgba(79, 79, 79, 0.04);
--color-control-accent: #252525;
--color-control-active: #b6b6b6;
--color-control-inactive: #dcdcdc;
--color-control-bg: #fff;
--color-bg-primary: #fdf6e3;
--color-bg-loader: rgba(255,255,255,0.7);
--color-system-accent-100: #ffb522;
--color-system-accent-50: #ffd15b;
--color-system-accent-25: #ffee94;
--color-system-selection: rgba(24, 163, 241, 0.15);
--color-system-drop-zone: rgba(255, 187, 44, 0.25);
--color-yellow: #ecd91b;
--color-orange: #ffb522;
--color-red: #f55522;
--color-pink: #e51ca0;
--color-purple: #ab50cc;
--color-blue: #3e58eb;
--color-ice: #2aa7ee;
--color-teal: #0fc8ba;
--color-lime: #5dd400;
--color-green: #66B395;
}
.pageFlex, .sidebar {
background-color: var(--color-bg-primary);
}
/* Change the overall UI font. */
*, body, input, textarea, select {
font-family: "Ubuntu", "Inter", "霞鹜文楷", "jetBrainsMono" !important;
}
/* Monospace font for code snippets. */
markupcode, .blocks, .token {
font-family: "Ubuntu Mono", "Plex" !important;
}
Plural Chats Add-On
As a plurality, chatting with the entire screen width and the author shown above the message (instead of below) is more convenient! Profile pictures are also set to be smaller, and other convenient adjustments have been made. Enjoy a chatting experience similar to Simply Plural!
Paste the code below everything else in the CSS file, if another theme is applied.
/* Plural Chats Add-On v1.1 */
/* Full Width Bubbles & Invert Attachment and Text Display. */
.blocks .block.blockChat .message .bubbleInner .bubble:not(.withLayout) {
max-width: 100%;
flex-direction: column-reverse;
}
.blocks .block.blockChat .message.withAttachment .bubbleInner .bubble .textWrapper {
padding: 0px 12px 6px; /* Fix for reverted content padding. */
}
.blocks .block.blockChat .bubble .attachments .attachment {
position: relative;
background: #0000;
min-width: 0;
height: fit-content;
border-radius: 0;
flex-direction: row;
align-items: center;
color: var(--color-system-accent-100);
border-bottom: solid 1px;
border-bottom-color: var(--color-text-secondary-inversion);
}
/* Align to Left. */
.blocks .block.blockChat .message.isSelf>.flex>.side.right {
align-items: flex-start;
}
.blocks .block.blockChat .message .bubbleInner {
display: flex;
flex-direction: row !important;
gap: 0px 8px;
align-items: center; /* Vertical alignment */
width: 100%;
}
/* Chat size Avatars. */
.iconObject.c48.isHuman {
width: 36px;
height: 36px;
}
/* Remove Account Name on Replies. */
.blocks .block.blockChat .message .reply .name {
display: none;
}
/* Misc adjustments */
/* Moved somewhere else. */
Accessibility Add-On
Adjustments that make content easier to read, especially in chats.
Paste the code below everything else in the CSS file, if another theme is applied.
/* Accessibility Add-On v1.1 */
/* Make chats easier to read. */
.blocks .block.blockChat .message.isSelf .bubbleInner .bubble {
color: var(--color-text-inversion);
background-color: var(--color-control-accent);
}
/* Use wider text spacing. */
:root {
--letter-spacing-common: 0.1px;
--line-height-common: 24px;
}