Skip to content

Others

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

Accepted formats: px

Style Settings
|-- ...
|-- Flexcyon Style Settings
|   |-- ...
|   |-- Others

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

Background for add before empty state title

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

Default: linear-gradient(to right, var(--text-accent), var(--color-blue), var(--color-cyan))

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\
    _______________                                       \a\
    ___  ____/__  /________  ____________  ______________ \a\
    __  /_   __  /_  _ \\_  |/_/  ___/_  / / /  __ \\_  __ \\ \a\
    _  __/   _  / /  __/_>  < / /__ _  /_/ // /_/ /  / / / \a\
    /_/      /_/  \\___//_/|_| \\___/ _\\__, / \\____//_/ /_/ \a\
                                    /____/                \a\a\a "

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

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)

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

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")

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")

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

Default: darken

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

Default: no-repeat

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

Default: 0 (px)

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

Default: unset

Accepts percentage values like 55%

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

Default: contain

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

Default: center

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

Accepted Formats: px, %

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")

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

Default: lighten

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

Default: no-repeat

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

Default: 0 (px)

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

Default: unset

Accepts percentage values like 55%

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

Default: cover

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

Default: center

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

Default: 1

Comments