CSS（body）に記述した背景色（background-color）をmetaタグのtheme-colorに適用させたい

Question

• HTMLファイルに<meta name="theme-color" content="#F8C3CD">の content="#F8C3CD" 部分を書かず、CSS内から theme-color を制御したい（ background-color を適用させたい）です。
• HTMLファイル内にカラーコード（上記の#F8C3CD）を書かない状態での javascript 等で制御できる場合があれば、どうかお教え頂きたく存じます。

body {
color: #000;
background-color: #F8C3CD;
}

サイト改装などでちまちまとベタ打ち修正していましたが、HTMLファイル数が増えていき、
修正そのものがとても大変になってしまった為、質問させて頂きました。

事前に検索しましたが該当・類似する記事はまったく発見できず、
現在の技術的には不可能な質問かも知れませんが、ご回答のほどを何卒よろしくお願い致します。

Answer 1

Window.getComputedStyle()APIにて、
第一引数の要素の、適用されているスタイルを取得できます。

Window.getComputedStyle() - Web API | MDN

その取得したスタイルをもって、
meta要素を生成し、head要素に入れれば可能かと。

ただし、Window.getComputedStyle()で取得した場合、
カラー系は、多くのブラウザで、rgba形式の文字列で取得されるので、
rgba→hexへの形式変換が必要となります。

Comments

[dokoyakoko]

ご回答ありがとうございます！
ただ当方が javascript に関する知識は乏しい、という事を記載することを忘れてしまい、
せっかく頂けたご回答を理解することが難しく、誠に申し訳ございません。

具体的な構造としては <meta name="theme-color"> は記述しておき、
<script>
var style = window.getComputedStyle(element [, pseudoElt]);
</script>
だけをHTMLに追加すればいいのか、もしくは
javascript の構文として不成立なものであることを前提として
<script>
let para = document.querySelector('meta');
let compStyles = window.getComputedStyle(para);
para.textContent = 'theme-color' +
'.';
</script>
のような形で javascript を記述すれば良いのでしょうか……？

お見苦しく手数をお掛けしてしまいますが、ご返答のほどをよろしくお願い致します。

[miyabi_pudding]

記述の仕方まではまだ回答することはできません。
自分でやってみたコードを記載いただいて、初めて回答が可能になります。
（でないと、作業依頼となってしまうため）
まずは、上記も含め、ご自身でいろいろ調べて試してみてください。
質問は、編集が可能なので、
ご自身でまずやってみたコードも記載していただくとよいかと。