How to use css-prefers-color-scheme - 1 common examples

To help you get started, we’ve selected a few css-prefers-color-scheme examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SignalK / instrumentpanel / lib / ui / main.js View on Github external
import InstrumentPanel from './instrumentpanel';
import IpNavBar from './navbar';
import SettingsPanel from './settings/settingspanel';
import StreamBundle from '../streambundle';
import HelpComponent from '../util/help';
import {getUrlParameter} from '../util/browser';
import {ResetComponent} from './settings/resetsettings';
import {TouchAppComponent} from '../svg/SvgTouchApp24px';
import {retrieveColorScheme} from '../util/localstorage';
import {CS_BY_OS} from './settings/colorschemesettings';

var streamBundle = new StreamBundle();
var instrumentPanel = new InstrumentPanel(streamBundle);
const notificationPageId = -1;
instrumentPanel.colorSchemeTool = prefersColorScheme();

var model = BaconModel.Model.combine({
  isLocked: BaconModel.Model(true),
  settingsVisible: BaconModel.Model(false),
  gridSettings: instrumentPanel.gridSettingsModel,
  helpVisible: BaconModel.Model(window.location.hash === '#help')

const ReactGridLayout = WidthProvider(RGL);

class App extends React.Component {
  constructor(props) {
    this.state = this.props.model.get();
    this.wrapWidget = this.wrapWidget.bind(this);
    this.generateClickmeElement  = this.generateClickmeElement.bind(this);


Use light and dark color schemes in all browsers

Latest version published 3 months ago

Package Health Score

92 / 100
Full package analysis

Popular css-prefers-color-scheme functions