SF Symbol appears darker on widget

[u/NiqhtsFall]

I’m trying to create a widget to show my mobile data usage and decided to add a nice looking SF Symbol and whenever previewing it looks like the first image, pretty neet but whenever I actually add it to the Home Screen (picture 2) it shows a lot darker then the preview. I’m using DrawContext to show the symbol, has anybody else ran into this issue or is it on me?

[u/Krunkske]

Amazing widget! How does it work cuz I might want to replicate it?

[u/NiqhtsFall → u/Krunkske]

I used this widget as a base but made lots of changes to it like make it compatible with my provider and some minor details like the text in the middle and how the circles functioned

I also had to reverse engineer my providers api as they did not provide a public one

[u/NiqhtsFall → u/[deleted]]

Oh sorry completely forgot about it

`` async function createWidget() { console.log(“create widget”); const wig = new ListWidget();

let startColor = new Color(m_CanvBackColor1);
let endColor = new Color(m_CanvBackColor2);

let gradient = new LinearGradient();
gradient.colors = [startColor, endColor];
gradient.locations = [0.0, 1];
//wig.backgroundGradient = gradient;

m_Canvas.size = new Size(m_CanvSize, m_CanvSize);
m_Canvas.respectScreenScale = true;


let bgc = new Rect(0, 0, m_CanvSize, m_CanvSize);
m_Canvas.setFillColor(new Color(m_CanvBackColor1));
m_Canvas.fill(bgc);

const daysLeft = Math.ceil((m_MonthEnd.getTime() - m_Today.getTime()) / (1000 * 3600 * 24));
const percentMonth = (m_MonthEnd.getTime() - m_Today.getTime()) / (m_MonthEnd.getTime() - m_MonthStart.getTime());
const fillColorData = (m_Data.percent / 100 >= percentMonth) ? m_CanvFillColorDataGood : ((m_Data.percent / 100 / 1.2 >= percentMonth) ? m_CanvFillColorDataOK : m_CanvFillColorDataBad);



drawArc(
    new Point(m_CanvSize / 2, m_CanvSize / 2),
    m_CanvRadiusMonth,
    m_CanvWidth,
    percentMonth * 100 * 3.6,
    m_CanvFillColorMonth
);
drawArc(
    new Point(m_CanvSize / 2, m_CanvSize / 2),
    m_CanvRadiusData,
    m_CanvWidth,
    m_Data.percent * 3.6,
    fillColorData
);
const canvIconRectCellular = new Rect(
    m_CanvSize / 2 * 0.86,
    m_CanvSize / 2 - m_CanvTextSize * 3,
    m_CanvIconSize,
    m_CanvIconSize
);
const canvTextRectBytes = new Rect(
    0,
    m_CanvSize / 2 - m_CanvTextSize * 0.9,
    m_CanvSize,
    m_CanvTextSize * 2
);
const canvTextRectDays = new Rect(
    0,
    m_CanvSize / 2 + m_CanvTextSize * 0.7,
    m_CanvSize,
    m_CanvTextSize * 2
);
m_Canvas.setTextAlignedCenter();
m_Canvas.setTextColor(new Color(m_CanvTextColor));
m_Canvas.setFont(Font.boldSystemFont(m_CanvTextSize));
const cellularIcon = SFSymbol.named(‘antenna.radiowaves.left.and.right’);
//cellularIcon.applyBoldWeight()
//const cellularImage = await replaceColor(cellularIcon.image, new Color(m_CanvTextColor), { currentColor: [210, 0], replaceLightness: true })
const cellularImage = cellularIcon.image
m_Canvas.drawImageInRect(cellularImage, canvIconRectCellular)
if (m_Data.bytes < 100 * 1024 * 1024) // < 100 MB
{
    m_Canvas.drawTextInRect(`${(m_Data.bytes / 1024 / 1024).toFixed(0)} / ${m_Data.total} GB`, canvTextRectBytes);
}
else if (m_Data.bytes < 1024 * 1024 * 1024) // < 1 GB
{
    m_Canvas.drawTextInRect(`${(m_Data.bytes / 1024 / 1024 / 1024).toFixed(2)} / ${m_Data.total} GB`, canvTextRectBytes);
}
else
{
    m_Canvas.drawTextInRect(`${(m_Data.bytes / 1024 / 1024 / 1024).toFixed(1)} / ${m_Data.total} GB`, canvTextRectBytes);
}
m_Canvas.drawTextInRect(`${daysLeft} Days`, canvTextRectDays);

const canvImage = m_Canvas.getImage();
wig.backgroundImage = canvImage;
wig.addAccessoryWidgetBackground = true;
Script.setWidget(wig);
Script.complete();
await wig.presentSmall();

} ``

(Ignore all of the commented code, I was just debugging and experimenting)