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 commentaires) (0 réactions) (0 assignés)Go (5 500 stars) (432 forks)user submission

frontendgood-first-issuehelp wanted

Description

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;

Guide contributeur

Stack technique: typescriptcss
Domaine: frontend
Type d'issue: feature
Difficulté: 2
Temps estimé: half day
Statut d'activité: fresh
Clarté: clear
Prérequis: TypeScriptCSS
Accessibilité débutant: 80
Direction de recherche: 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.