support color-scheme · umputun/remark42#1430

2022-07-22T02:51:20.000Z

- add new option for theme to the config in order to understand if site supports auto switch between light and dart theme - add `color-scheme: light dark` when the param is `true`, add `light` or `dark` when `false` and switch `coloe-scheme` value accordingly - remove this change https://github.com/umputun/remark42/pull/1429 ## Cases ### Auto ```ts var remark_config = { theme: 'auto' } ``` ```css color-scheme: light dark; ``` Add support for auto switch between themes ### Dark ```ts var remark_config = { theme: 'dark' } ``` ```css color-scheme: dark; ``` ### Light ```ts var remark_config = { theme: 'light' } ``` ```css color-scheme: light; ```

(3 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)Go (5.500 Stars) (432 Forks)user submission

frontendgood-first-issuehelp wanted

Beschreibung

add new option for theme to the config in order to understand if site supports auto switch between light and dart theme
add color-scheme: light dark when the param is true, add light or dark when false and switch coloe-scheme value accordingly
remove this change https://github.com/umputun/remark42/pull/1429

Cases

Auto

var remark_config = {
  theme: 'auto'
}

color-scheme: light dark;

Add support for auto switch between themes

Dark

var remark_config = {
  theme: 'dark'
}

color-scheme: dark;

Light

var remark_config = {
  theme: 'light'
}

color-scheme: light;

Contributor Guide

Tech Stack: typescriptcss
Domain: frontend
Issue Type: feature
Schwierigkeit: 2
Geschätzte Zeit: half day
Aktivitätsstatus: fresh
Klarheit: clear
Voraussetzungen: TypeScriptCSS
Einsteigerfreundlichkeit: 80
Research-Richtung: The issue requires adding a `theme` option to the `remark config` object. The CSS property `color scheme` should be set dynamically based on the option: `light dark`, `light`, or `dark`. The change from PR #1429 (in the linked PR) needs to be reverted. Look at the frontend source code for where the config is read and where CSS is injected. Relevant files are likely in the frontend directory, such as an initialization script or a style setting module.