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 comments) (0 reactions) (0 assignees)Go (5,500 stars) (432 forks)user submission

frontendgood-first-issuehelp wanted

説明

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;

コントリビューターガイド

技術スタック: typescriptcss
領域: frontend
Issue 種別: feature
難度: 2
推定時間: half day
活動状況: fresh
明確さ: clear
前提条件: TypeScriptCSS
初心者向け度: 80
調査方針: 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.