617f8a928c
Summary: This diff adds OS support for dark mode (at least on Mac), by making sure system elements are styled according to system dark theme. For some unknown reason, this does apply to all system dialogs, titlebars etc, but not for scrollbars, so they got custom themed. Differential Revision: D29436058 fbshipit-source-id: bac649b6cd81f0142c607ed567eeb00f41625041
54 lines
1.8 KiB
Plaintext
54 lines
1.8 KiB
Plaintext
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
*/
|
|
@import '../node_modules/antd/lib/style/themes/dark.less';
|
|
@import './base.less';
|
|
|
|
// Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84614
|
|
|
|
// Link Text & Icon
|
|
@primary-color: @purple-8;
|
|
// Success
|
|
@success-color: @green-7;
|
|
// Negative
|
|
@error-color: @red-6;
|
|
// Warning
|
|
@warning-color: @gold-6;
|
|
// Primary Text & Icon
|
|
@text-color-primary: @white;
|
|
// Secondary Text & Icon
|
|
@text-color-secondary: #999; // white 60%
|
|
// Placeholder Text & Icon
|
|
@text-color-placeholder: #737373; // white 45%
|
|
// Disabled & Icon
|
|
@disabled-color: #404040; // white 25%
|
|
// Background - default
|
|
@background-default: @black;
|
|
// Background - Wash
|
|
@background-wash: #0d0d0d; // white 5%
|
|
// Backgroud - default button
|
|
@button-default-background: rgba(255, 255, 255, 0.1); // white 10%
|
|
// Background - transparent hover
|
|
@button-transparent-hover: rgba(255, 255, 255, 0.1); // white 10%
|
|
|
|
// The following variables are not yet defined at this moment,
|
|
// as they have / need no mapping to ANT (?)
|
|
// @background-wash2: fade(@white, 10%)
|
|
// @button-primary-background: @purple6;
|
|
// @button-primary-background-hover: @purple7;
|
|
// @button-default=backgorund-hover: @fade(@white, 15%)
|
|
// @button-default-background-disabled: @fade(@white, 10%)
|
|
// @button-background-active: @fade(@white, 8%)
|
|
|
|
// Divider color
|
|
@divider-color: #181818; // white 10%
|
|
|
|
::-webkit-scrollbar { width: 8px;}
|
|
::-webkit-scrollbar-track-piece { background-color: transparent; }
|
|
::-webkit-scrollbar-thumb { height: 50px; background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}
|
|
::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.7);}
|