Authorltrademark
LicenseNo License
Categoryfigma
Created
Updated
Size14 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Definitely not the first of its kind, and likely a premature attempt to bring dark mode to Figma. however, one additional thing this theme does is bring a more uniform "light mode" to the editor as well.
As for customization, you can apply a theme accent that replaces most highlights and accents in the UI.
Any bugs or issues in the UI can be addressed directly, either by messaging me on Twitter, or other social platforms.
/* ==UserStyle==
@name Figma Themer
@namespace --
@version 1.0.0
@description A new userstyle
@author Ltrademark
@preprocessor less
@var color accent "Accent" "#1155ee"
@var select theme "Theme" ["Default", "Light", "Dark"]
==/UserStyle== */
@-moz-document url-prefix("https://www.figma.com/file/") {
@lightBackground: #fff;
@lightBackground-overlay: #fafafa;
@lightForeground: #000;
@lightBorderColor: #eee;
@darkBackground: #000;
@darkBackground-overlay: #131313;
@darkForeground: #fff;
@darkBorderColor: #333;
.theme(@theme) when (@theme = Dark) {
@background: @darkBackground;
@background-overlay: @darkBackground-overlay;
@foreground: @darkForeground;
@borderColor: @darkBorderColor;
}
.theme(@theme) when (@theme = Light) {
@background: @lightBackground;
@background-overlay: @lightBackground-overlay;
@foreground: @lightForeground;
@borderColor: @lightBorderColor;
}
.fig() when not (@theme =Default) {
.theme(@theme);
--fg-toolbar: @foreground;
--fg-toolbar-hover: @foreground;
--fg-toolbar-filename: @foreground;
--fg-toolbar-foldername: fade(@foreground, 54%);
--fg-keyboard-shortcuts-divider: @borderColor;
--fg-toolbar-chevron: @foreground;
--fg-overlay: @foreground;
--fg-overlay-sep: @borderColor;
--fg-overlay-right-arrow: @foreground;
--fg-overlay-right: @foreground;
--fg-select-chevron: @borderColor;
--fg-select-chevron-hover: @foreground;
--fg-overlay-active: contrast(@accent, #000, #fff);
--fg-overlay-secondary: fade(@foreground, 45%);
--fg-overlay-tenth: fade(@foreground, 10%);
--fg-keyboard-shortcuts-tab: fade(@foreground, 45%);
--fg-toggle-border: @borderColor;
--fg-keyboard-shortcuts-tab-border: @borderColor;
--bg-overlay: @background;
--bg-toolbar-hover: fade(@foreground, 30%);
--bg-toolbar: @background;
--bg-toolbar-hover: @background-overlay;
--bg-keyboard-shortcuts: @background;
--bg-slider-track: @borderColor;
--magnify-icon: url("data:image/svg+xml;utf8,<svg width='11' height='11' viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.45285 7.15991C5.77551 7.68652 4.92438 8 4 8C1.79086 8 0 6.20923 0 4C0 1.79077 1.79086 0 4 0C6.20914 0 8 1.79077 8 4C8 4.92432 7.68643 5.77563 7.15991 6.45288L10.3535 9.64648L9.64645 10.3535L6.45285 7.15991ZM7 4C7 5.65674 5.65686 7 4 7C2.34314 7 1 5.65674 1 4C1 2.34326 2.34314 1 4 1C5.65686 1 7 2.34326 7 4Z' fill='%23FFFFFF'/></svg>");
background-color: @borderColor;
#fullscreen-root .view,
[class|="history_view--autoInfo"],
[class|="history_view--itemInfoAutoRow"],
[class|="nav_container--container"],
[class|="component_sidebar--container"],
[class|="style_icon_button--rowButton"],
[class|="nav_container--section"],
[class|="style_icon_button--button"],
[class|="properties_panel--stylePreviewContainer"] {
background: none !important;
}
[class|="library_item_tile--nameGrid"],
[class|="progress_bar--progressBarCoverShowUI"],
[class|="header_modal--modal"] > [class*="header_modal--modal"] {
color: @foreground !important;
background-color: @background !important;
}
[class*="tab--unselected"],
[class|="permissions_modal--baseTab"] {
color: fade(@foreground, 30%);
}
[class|="image_settings_modal--colorAdjustLabel"],
[class|="action_option--shortcut"] {
color: fade(@foreground, 80%);
}
[class*="option_button--_optionButton"] {
color: fade(@foreground, 80%);
fill: fade(@foreground, 80%);
}
[class|="nav_container--container"],
[class*="library_section_header"],
[class|="permissions_banners--draftsMoveBanner"],
[class*="quick_actions--floating"],
[class|="pages_panel--objectPanelContent"],
[class|="left_panel--panelContainer"],
[class|="pages_panel--pagesHeaderContainerWithShadow"],
[class|="object_row--row"],
[class|="properties_panel--propertiesPanel"],
[class|="properties_panel--propertiesPanel"] ~ div {
color: @foreground !important;
fill: @foreground !important;
background-color: @background-overlay !important;
}
[class|="plugin_tiles--headerContainer"],
[class|="help_widget--helpWidget"],
[class|="close_button--closeX"],
[class*="raw_components--base"],
[class|="component_tiles--styleTypeSectionHeader"],
[class*="raw_components--_iconButton"],
[class|="role_row--linkAccessIcon"] {
color: @foreground !important;
fill: @foreground !important;
}
[class*="library_section_header"],
[class|="quick_actions--floating"],
[class|="quick_actions--floating"] ~ div,
[class*="object_row--layerIcon"],
[class|="permissions_banners--draftsMoveBanner"],
[class|="raw_components--_iconButton"] {
color: @foreground !important;
fill: @foreground !important;
stroke: @foreground !important;
}
[class|="subscription_file_view_header"] .svg-container,
[class*="file_row--_fileRowBase"],
[class|="nav_container--container"],
[class|="permissions_banners--draftsMoveIcon"] .svg {
fill: fade(@foreground, 80%);
}
[class|="raw_components--textInput"],
[class*="desktop_tool_bar--toolBarContainer"],
[class*="modal--modalBare"],
[class*="updates--scrollContainer"],
[class|="draggable_modal--frame"],
[class|="thread_comment--_threadElement"],
[class|="autocomplete_input--inputWrapper"],
[class|="autocomplete_input--container"],
[class*="autocomplete_input--input"] {
color: @foreground !important;
background-color: @background-overlay !important;
border: none;
}
[class|="library_preferences_modal--fileViewFooter"],
[class*="left_panel--panelContainer"],
[class|="comments_list--commentDateGroupHeader"] {
color: @foreground !important;
background-color: @background-overlay !important;
border-color: @borderColor !important;
}
[class|="style_section--sectionOrganized"]::before {
background-color: @borderColor;
}
[class*="toolbar_view--toolbar"] {
--bg-toolbar: @background;
border: none;
}
[class*="help_widget--helpWidget"] {
background-color: @background;
border: 1px solid @borderColor;
&:hover {
[class*="help_widget--tooltip"] {
--bg-overlay: @borderColor;
}
}
}
[class|="prototype_easing_editor--bezierCurveContainer"],
[class|="slider--sliderThumbInactive"],
[class|="raw_components--textInput"],
[class|="plugin_settings_fragment"],
[class|="updates--updateFooter"],
[class|="subscription_file_view_header"],
[class|="library_preferences_modal--searchContainer"],
[class|="library_preferences_modal--teamSection"],
[class|="nav_container--container"],
[class|="export_picker--header"],
[class|="properties_panel--border"],
[class*="component_description_modal--textRow"] textarea,
[class*="component_description_modal--textRow"] input,
[class|="basic_form--btn"],
[class|="alignment_view--mainContainer"],
[class*="style_preview_panel--styleTextInput"],
[class*="header_modal--header"],
[class|="comments_list--borderTop"],
[class|="left_panel--panelContainer"],
[class|="header_modal--header"],
[class|="permissions_modal--dividedInputSection"],
[class|="properties_panel--propertiesPanel"],
[class|="permissions_modal--publishFooter"],
[class|="properties_panel--tabsHeaderBordered"],
[class|="raw_components--panel"] {
border-color: @borderColor !important;
}
[class*="desktop_tool_bar--toolBarContainer"] {
box-shadow: 0 1px 0 @borderColor;
}
[class*="progress_bar--strokedElement"] {
border-color: @foreground !important;
}
[class*="combo_box--container"]:hover [class*="combo_box--selectInputExpanded"] {
border-color: @accent;
}
[class*="progress_bar--lineContainer"] {
[class*="progress_bar--strokedElement"] {
background-color: @foreground !important;
}
}
[class*="file_row--_fileRow"],
[class|="history_view--item"],
[class|="nav_container--container"],
[class*="history_view--topHeader"],
[class*="drilldown_item--_drilldownItemBase"],
[class|="basic_form--btn"],
[class|="style_icon_button--rowButton"],
[class|="style_section--sectionHeaderFileName"],
[class|="in_app_page--appFont"],
[class|="comments_list--pageNameSubheader"],
[class|="comments_list--commentMessage"],
[class|="permissions_modal--selectedTab"],
[class|="quick_actions--searchInput"],
[class|="draggable_list--panelTitleText"],
[class|="collapsible_property_panel--panelTitle"],
[class|="raw_components--panel"] {
color: @foreground !important;
}
[class|="missing_fonts_modal--missingFontText"],
[class|="plugin_tiles--h2Inline"],
[class|="plugin_tiles--h2"],
[class*="history_view--time"],
[class|="history_view--timeAsLabel"],
[class*="expanding_textarea--expandingTextarea"],
[class|="raw_components--panelTitleFaded"] {
color: inherit;
}
[class*="history_view--timeRevised"] {
color: fade(@foreground, 30%) !important;
}
[class*="tab--selected"],
[class|="properties_panel--tabActive"],
[class|="pages_panel--tabActive"] {
color: @accent !important;
&:after {
color: @accent !important;
}
}
[class*="history_view--bullet"] svg path,
[class*="--iconBlue"] {
fill: @accent !important;
}
[class|="history_view--autoSummary"],
[class|="history_view--item"],
[class|="comments_list--comment--hovered"],
[class|="comments_list--comment"],
[class|="raw_components--singleRow"] [class|="raw_components--_iconButton"] {
&:hover {
background-color: fade(@accent, 10%);
}
}
[class*="select--comboBoxSelect"] [class*="select--chevron"],
[class*="object_row--selected"],
[class*="drilldown_item--_thumbnailContainer"],
[class|="library_item_tile--thumbWrapper"],
[class|="pages_panel--pageRow"] {
background-color: fade(@foreground, 5%) !important;
&:hover {
background-color: fade(@accent, 15%) !important;
}
}
[class*="file_row--_fileRowHover"],
[class*="drilldown_item--_drilldownItemBase"] {
background-color: fade(@accent, 0%);
&:hover {
backgrou...