Analog Clock Darkmode

by Mentaldiarrhoe

HTML

<!DOCTYPE html>
<html>
<body style="background-color:#373737";>
<div id="main">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(-canvas.height/2, -canvas.width/2, canvas.height, canvas.width);
 drawFace(ctx, radius);
 drawNumbers(ctx, radius);
 drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
	 
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = "#373737";
  ctx.fill();
	grad = ctx.createRadialGradient(0,0,radius*5.95, 0,0,radius*6.55);
 	grad.addColorStop(0.95, '#606060');
 ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.005;
  ctx.stroke();

}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.fillStyle="#A6A6A6";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
   
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();   
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.60, radius*0.045,"#C9C9C9");
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.75, radius*0.04,"#C9C9C9");
     // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.015,"#EE9A2A");
    
}

function...

CSS

#main{
 
  
  display: flex;
  justify-content: center;

  
  
}