umputun/remark42

support color-scheme

Open

#1430 opened on Jul 22, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)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;

Contributor guide

Tech stack
typescriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
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.