Skip to content

Others

For configuring vim mode text, new tab appearance (ASCII art), sidedock icons, tooltip radius

Accepted formats: px

Navigation 

Style Settings
|-- flexcyon://Others
md

Configuration Options

Vim Mode Text

Enable Vim Mode Text

CSS Variable(s) targeted: var(--flexcyon-vim-mode-text-enable)

Default: true (class toggle)

Vim mode text left positioning

CSS Variable(s) targeted: var(--flexcyon-vim-mode-left-positioning)

Default: 6 (px)

Vim mode text bottom positioning

CSS Variable(s) targeted: var(--flexcyon-vim-mode-left-positioning)

Default: -4 (px)

Insert Mode Text

CSS Variable(s) targeted: var(--flexcyon-vim-insert-text)

Default: “INSERT”

Normal Mode Text

CSS Variable(s) targeted: var(--flexcyon-vim-normal-text)

Default: “NORMAL”

Command Mode Text

CSS Variable(s) targeted: var(--flexcyon-vim-command-text)

Default: “COMMAND”

New Tab Appearance

Customize the appearance of new empty tabs

Accepted Formats: px

Add before empty state title

CSS Classe(s) targeted: .flexcyon-ascii-enable, .flexcyon-quote-enable

Changing this may take an app reload/restart to take effect

Default: none (class select)

Options:

  • ASCII Art
  • Quote

New tab font group

CSS Variable(s) targeted: var(--flexcyon-new-tab-font-group)

For ASCII art to look good, we recommend the using a monospace font like Source Code Pro

Default: none (class select)

Options:

  • Monospace Font
  • Interface Font
  • Text

Background for add before empty state title

CSS Variable(s) targeted: var(--flexcyon-new-tab-bg-wrapper)

Default: linear-gradient(to right, var(--collor-green), var(--text-accent))

Quote

CSS Variable(s) targeted: var(--flexcyon-quote-val)

Default: “This is a placeholder quote\ain the Flexcyon Theme.”

Quote Attribution Prefix

CSS Variable(s) targeted: var(--flexcyon-quote-credit-prefix)

Default: “-”

Quote Attribution

CSS Variable(s) targeted: var(--flexcyon-quote-credit)

Default: “bladeacer”

Quote font size

CSS Variable(s) targeted: var(--flexcyon-quote-font-size)

Default: 24 (px)

Line breaks are escaped as \a and \ is escaped as \\

ASCII Art

CSS Variable(s) targeted: var(--flexcyon-ascii-art)

Default:

" \a\
       fjlj dlkg1                    un       cj                            \a\
     nze     1byk                   xh       gh                             \a\
     yg       hy     ksud fv      dza       je     fhhif1 dj    bil  j5dhjb \a\
  opvysppc    zo       jzuk      lv4       l0    gk       1le  1lb  il   lj \a\
    oz       iy       auy9      ss       ak4     mb         l0lig   mb   la \a\
    xt       hylfk  aul wrfb   vk       fis       lb0bg8    6mle   cm1  cl1 \a\
   fye        366            axd       hf                 s0if     1    s1  \a\
0ruo0                                                   sjg9l               \a\a\a"
md

The ASCII art string needs to be escaped for CSS to render it, line breaks are escaped as \a and \ is escaped as \\

It is highly recommended to use a CSS snippet to manage and configure individual ASCII art.

An example can be found here.

ASCII art font size limit

CSS Variable(s) targeted: var(--flexcyon-ascii-max-font-size)

Default: 14 (px)

ASCII art line height

CSS Variable(s) targeted: var(--flexcyon-ascii-line-height)

Changes line height for quote as well

Default: 1

ASCII art scaling factor

CSS Variable(s) targeted: var(--flexcyon-ascii-scaling-factor)

Default: 1

ASCII art text alignment

CSS Variable(s) targeted: var(--flexcyon-ascii-alignment)

Default: left

Options:

  • Left
  • Center
  • Right

Disable Empty State title

CSS Variable(s) targeted: var(--flexcyon-empty-state-title-disable)

Default: true (class toggle)

Disable Empty State Actions

CSS Variable(s) targeted: var(--flexcyon-empty-state-actions-disable)

Default: true (class toggle)

Side Dock

Configure the side dock icons

Enable side dock icon effects

Rainbow effect on hover

CSS Variable(s) targeted: var(--flexcyon-sidedock-icon-effects)

Default: true (class toggle)

Side Dock Ribbon Width

CSS Variable(s) targeted: var(--flexcyon-sidedock-ribbon-width)

Default: 48 (px)

Place workspace ribbon at the top

CSS Variable(s) targeted: var(--flexcyon-ribbon-top)

Default: false (class toggle)

Place vault switcher at the top

CSS Variable(s) targeted: var(--flexcyon-vault-switch-top)

Default: false (class toggle)

Reverse order of vault switcher and actions

CSS Variable(s) targeted: var(--flexcyon-vault-reverse)

Default: false (class toggle)

Tooltip radius

Configure the tooltip radius

Small radius

CSS Variable(s) targeted: var(--radius-s)

Default: 2 (px)

Medium radius

CSS Variable(s) targeted: var(--radius-m)

Default: 4 (px)

Large radius

CSS Variable(s) targeted: var(--radius-l)

Default: 6 (px)

Extra large radius

CSS Variable(s) targeted: var(--radius-xl)

Default: 8 (px)

Sidebar Background

Configure background images in the left and right sidebars.

Accepted Formats: px, %

Select background in sidebar

CSS Classe(s) targeted: .flexcyon-sidebar-bg-dots, .flexcyon-sidebar-bg-grid, flexcyon-sidebar-bg-rhombus

Overrides background image declaration below, configures in both left and right sidebar

Default: none (class select)

Options:

  • Grid
  • Dotted
  • Rhombus

Left sidebar background image url

CSS Variable(s) targeted: var(--flexcyon-bg-image-sidebar-left-url)

Default: url("")

For urls to work, add your URL between the double quotes e.g. a value of: url("https://fake_domain/not_a_real_image.png")

Right sidebar background image url

CSS Variable(s) targeted: var(--flexcyon-bg-image-sidebar-right-url)

Default: url("")

For urls to work, add your URL between the double quotes e.g. a value of: url("https://fake_domain/not_a_real_image.png")

Sidebar Background image blend mode

CSS Variable(s) targeted: var(--flexcyon-bg-image-blend-mode)

Default: darken

Sidebar Background image repeat

CSS Variable(s) targeted: var(--flexcyon-bg-image-repeat)

Default: no-repeat

Sidebar Background image blur

CSS Variable(s) targeted: var(--flexcyon-bg-image-blur)

Default: 0 (px)

Sidebar Background image brightness

CSS Variable(s) targeted: var(--flexcyon-bg-image-brightness)

Default: unset

Accepts percentage values like 55%

Sidebar Background image size

CSS Variable(s) targeted: var(--flexcyon-bg-image-size)

Default: contain

Sidebar Background image position

CSS Variable(s) targeted: var(--flexcyon-bg-image-position)

Default: center

Modal Background

Configure background images in the background of settings menu, prompts etc

Accepted Formats: px, %

Modal Background image url

CSS Variable(s) targeted: var(--flexcyon-modal-bg-url)

Default: url("")

For urls to work, add your URL between the double quotes e.g. a value of: url("https://fake_domain/not_a_real_image.png")

Modal Background image blend mode

CSS Variable(s) targeted: var(--flexcyon-modal-image-blend-mode)

Default: lighten

Modal Background image repeat

CSS Variable(s) targeted: var(--flexcyon-modal-image-repeat)

Default: no-repeat

Modal Background image blur

CSS Variable(s) targeted: var(--flexcyon-modal-image-blur)

Default: 0 (px)

Modal Background image brightness

CSS Variable(s) targeted: var(--flexcyon-bg-modal-brightness)

Default: unset

Accepts percentage values like 55%

Modal background image size

CSS Variable(s) targeted: var(--flexcyon-modal-image-size)

Default: cover

Modal background image position

CSS Variable(s) targeted: var(--flexcyon-modal-image-position)

Default: center

Modal background darkness intensity

CSS Variable(s) targeted: var(--flexcyon-modal-dark-intensity)

Default: 1